底部选项卡式Xamarin表单上的圆形图标或按钮

Question

我正在尝试以xamarin形式在我的选项卡式条栏上看到上面的样子，我尝试使用渲染器自定义选项卡式条栏，但仍然无法获得预期的输出

output i am getting

直到现在这就是我尝试过的

[assembly: ExportRenderer(typeof(BottomNavTabPage), typeof(BottomNavTabPageRenderer))]

namespace HealthMobile.Droid.Renderers
{
  public class BottomNavTabPageRenderer : TabbedPageRenderer
   {
    private bool _isShiftModeSet;

    public BottomNavTabPageRenderer(Context context)
        : base(context)
    {

    }


    protected override void OnVisibilityChanged(Android.Views.View changedView, [GeneratedEnum] ViewStates visibility)
    {
        base.OnVisibilityChanged(changedView, visibility);


        var tabs = changedView.FindViewById<TabLayout>(Resource.Id.sliding_tabs);

        if (tabs != null)
        {
            ViewGroup vg = (ViewGroup)tabs.GetChildAt(0);
            int tabsCount = vg.ChildCount;

        }
    }



    //protected override void DispatchDraw (global::Android.Graphics.Canvas canvas)
    //  {
    //  base.DispatchDraw (canvas);
    //      SetTabIcons();
    //      //  var tabLayout = (TabLayout)GetChildAt(1);


    //  }

    //  private void SetTabIcons()
    //  {
    //      var element = this.Element;
    //      if (null == element)
    //      {
    //          return;
    //      }

    //      Activity activity = this.Context as Activity;

    //      if ((null != activity) && (null != activity.ActionBar) && (activity.ActionBar.TabCount > 0))
    //      {
    //          for (int i = 0; i < element.Children.Count; i += 1)
    //          {
    //              var tab = activity.ActionBar.GetTabAt(i);
    //              var page = element.Children[i];
    //              if ((null != tab) && (null != page) && (null != page.Icon)

    //              && (tab.CustomView == null))
    //              {
    //                  var resourceId = activity.Resources.GetIdentifier(page.Icon.File.ToLowerInvariant(), "drawable", this.Context.PackageName);
    //                  LinearLayout tabHeader

    //                  = new LinearLayout(activity) { Orientation = Orientation.Vertical };
    //                  ImageView tabImg = new ImageView(activity);
    //                  TextView tabTitle = new TextView(activity);
    //                  tabImg.SetImageResource(resourceId);
    //                  tabTitle.Text = page.Title;
    //                  tabTitle.SetTextColor(Android.Graphics.Color.White);
    //                  tabHeader.AddView(tabTitle);
    //                  tabHeader.AddView(tabImg);
    //                  tab.SetCustomView(tabHeader);
    //              }
    //        }
    //      }   

    //  }



     protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
     {
       base.OnElementChanged(e);

    var childViews = GetAllChildViews(ViewGroup);



        //tab.SetIcon(Resource.Drawable.icon);


        var scale = Resources.DisplayMetrics.Density;
        var paddingDp = 0;
        var dpAsPixels = (int)(paddingDp * scale + 0.5f);

        foreach (var childView in childViews)
        {
            if (childView is BottomNavigationItemView tab)
            {

                //tab.SetPadding(-50, -100, -50, -100);





            }
            else if (childView is TextView textView)
            {
                textView.SetTextColor(Android.Graphics.Color.Transparent);
            }
        }
    }






    protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
    {
        base.SetTabIcon(tab, icon);
    }





    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);
        try
        {
            if (!_isShiftModeSet)
            {
                var children = GetAllChildViews(ViewGroup);

                if (children.SingleOrDefault(x => x is BottomNavigationView) is BottomNavigationView bottomNav)
                {
                    bottomNav.SetShiftMode(false, false);
                    _isShiftModeSet = true;
                }
            }
        }
        catch (Exception e)
        {
            Console.WriteLine($"Error setting ShiftMode: {e}");
        }
    }

    private List<View> GetAllChildViews(View view)
    {
        if (!(view is ViewGroup group))
        {
            return new List<View> {view };
        }

        var result = new List<View>();

        for (int i = 0; i < group.ChildCount; i++)
        {
            var child = group.GetChildAt(i);

            var childList = new List<View> {child};
            childList.AddRange(GetAllChildViews(child));

            result.AddRange(childList);
        }

        return result.Distinct().ToList();
    }
}

}

我正在尝试使它看起来像这样

output expecting

我也尝试设置图标，但是SetTabIcons方法从未触发