android上带有分隔线的TabbedPage

问题描述

是否可以在 TabbedPage 和子页面之间创建分隔符? iOS 认有一个,但 android 没有。
iOS:

enter image description here

安卓:

enter image description here

解决方法

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

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

       
}
,

以下内容对我有用。 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,_bottomNavigationView.Height - 5);
        _bottomNavigationView.SetBackground(layerDrawable);
    }
}  

5 是行高。