android上带有分隔线的TabbedPage答案

【问题标题】：TabbedPage with separator line on androidandroid上带有分隔线的TabbedPage
【发布时间】：2021-02-27 01:24:37
【问题描述】：

可以在 TabbedPage 和子页面之间创建分隔符吗？ iOS 默认有一个，但安卓没有。
iOS：

安卓：

【问题讨论】：

标签： xamarin xamarin.forms xamarin.android

【解决方案1】：

您可以使用自定义渲染器来实现它

public class ExtendedTabbedPageRenderer : TabbedPageRenderer
    {
        Xamarin.Forms.TabbedPage tabbedPage;
        BottomNavigationView bottomNavigationView;
        private bool firstTime = true;

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

            if (e.NewElement != null)
            {
                tabbedPage = e.NewElement as ExtendedTabbedPage;
                bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;
                bottomNavigationView.NavigationItemSelected += BottomNavigationView_NavigationItemSelected;


                //add the line manualy here
            }

        }
       
        

        void BottomNavigationView_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
        {       
            this.OnNavigationItemSelected(e.Item);
        }

       
}

【讨论】：

试过了：if(e.NewElement != null) { bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView; GradientStrokeDrawable topBorderLine = new GradientStrokeDrawable { Alpha = 0x33 }; topBorderLine.SetStroke(1, Color.Red.ToAndroid()); LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] { topBorderLine }); layerDrawable.SetLayerInset(0, 0, 0, 0, bottomNavigationView .Height - 2); _bottomNavigationView.SetBackground(layerDrawable); } 但没有线路。只有背景变成灰色。

【解决方案2】：

以下内容对我有用。 BottomNavigationView.Height 在 OnElementChanged 中为 0，所以我们需要重写 OnLayout：

public class CustomTabbedPageRenderer : TabbedPageRenderer {
    private BottomNavigationView _bottomNavigationView;

    public CustomTabbedPageRenderer(Context context) : base(context) {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e) {
        base.OnElementChanged(e);
        if(e.NewElement != null) {
            _bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).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);
        ShapeDrawable line = new ShapeDrawable() {
            Alpha = 255
        };
        line.Paint.Color = Color.Red.ToAndroid();
        line.Paint.SetStyle(Paint.Style.Fill);
        var layerDrawable = new LayerDrawable(new Drawable[] { line });
        layerDrawable.SetLayerInset(0, 0, 0, 0, _bottomNavigationView.Height - 5);
        _bottomNavigationView.SetBackground(layerDrawable);
    }
}

5 是行高。

【讨论】：