Xamarin 标签栏顶部（边框）线

Question

如何在Android和iOS上实现Tab栏上方的橙色线？

Answer 1

为了实现这种效果，您需要创建一个自定义的TabbedPageRenderer。

在安卓上：

    public class EnhancedTabbedPageRenderer : TabbedPageRenderer
    {
        private BottomNavigationView _bottomNavigationView;

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

        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                _bottomNavigationView = ((RelativeLayout)GetChildAt(0)).GetChildAt(1) as BottomNavigationView;
            }
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            // Create a Gradient Stroke as the new top border. (Set alpha if needed.)
            GradientStrokeDrawable topBorderLine = new GradientStrokeDrawable { Alpha = 0x33 };
            // Change it to the color you want.
            topBorderLine.SetStroke(1, Color.FromRgb(0x00, 0x00, 0x00).ToAndroid());
            LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] { topBorderLine });
            layerDrawable.SetLayerInset(0, 0, 0, 0, _bottomNavigationView.Height - 2);
            _bottomNavigationView.SetBackground(layerDrawable);
        }
    }

在 iOS 上：

    public class EnhancedTabbedPageRenderer : TabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                // Hide the origin top border.
                UITabBar.Appearance.BackgroundImage = new UIImage();
                UITabBar.Appearance.ShadowImage = new UIImage();
                // Create a view as the new top border. Change it to the color you want. (Set alpha if needed.)
                UIView view = new UIView(new CGRect(0, 0, TabBar.Frame.Width, 1)) { BackgroundColor = Color.FromRgb(0x00, 0x00, 0x00).ToUIColor(), Alpha = (System.nfloat)0.2 };
                // Add the view to the TabBar.
                TabBar.AddSubview(view);
            }
        }
    }