android 上带有分隔线的 TabbedPage

Question

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

Android:

Answer 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);
        }

       
}

Answer 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 是行高。

android 上带有分隔线的 TabbedPage

TabbedPage with separator line on android

xamarin.android

xamarin

xamarin.forms