Xamarin 选项卡栏顶部（边框）线答案

【问题标题】：Xamarin Tab Bar top(border) lineXamarin 选项卡栏顶部（边框）线
【发布时间】：2020-04-01 18:33:39
【问题描述】：

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

【问题讨论】：

你用什么标签栏？在Android上，默认tabbar的上边框线，你可以设置tabbar.xml的tab布局背景，然后在xamarin.forms中加载标签页时，会显示上边框线。 stackoverflow.com/a/41646955/11850033

标签： xamarin.forms xamarin.android xamarin.ios

【解决方案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);
            }
        }
    }

【讨论】：

你能告诉我如何在android上改变颜色吗？我尝试topBorderLine.SetStroke(1, Color.Red.ToAndroid()); 并使用 alpha，但线条颜色仅从完全透明变为黑色。

【解决方案2】：

GradientStrokeDrawable 在 android 上不适合我。这是我的解决方案：https://stackoverflow.com/a/66390258/4506984

【讨论】：