c# - xamarin 表单中的弯曲底部导航栏

Question

我正在尝试在 xamarin 表单选项卡式页面中创建类似https://miro.medium.com/max/162/1 *yMtMLC3mdjndmVHzPY5Adw.png 的内容，我正在复制此https://medium.com/的代码@androidtutorial/draw-custom-shapes-in-curved-bottom-navigation-view-361c9a5507dd进入我的 TabbedPageRenderer。问题是我没有得到任何结果。

代码。

public partial class TabbedPages : TabbedPage
{
    public TabbedPages ()
    {
        InitializeComponent();

        this.Children.Add(new Page()
        {
            Title = "Home",
            Icon = "homepage_icon"
        });
        this.Children.Add(new Page()
        {
            Title = "Home",
            Icon = "homepage_icon"
        });
        this.Children.Add(new Page()
        {
            Title = "Home",
            Icon = "homepage_icon"
        });
        this.Children.Add(new Page()
        {
            Title = "Home",
            Icon = "homepage_icon"
        });
    }

渲染器。

    [assembly: ExportRenderer(typeof(TabbedPages), typeof(BottomNavTabPageRenderer))]
    namespace App.Droid.CustomRenderer
    {
        public class BottomNavTabPageRenderer : TabbedPageRenderer
        {
            private bool _isShiftModeSet;
            private Path mPath;
            private Paint mPaint;

            private int CURVE_CIRCLE_RADIUS = 90;
            // the coordinates of the first curve
            private Android.Graphics.Point mFirstCurveStartPoint = new Android.Graphics.Point();
            private Android.Graphics.Point mFirstCurveEndPoint = new Android.Graphics.Point();
            private Android.Graphics.Point mFirstCurveControlPoint1 = new Android.Graphics.Point();
            private Android.Graphics.Point mFirstCurveControlPoint2 = new Android.Graphics.Point();

            //the coordinates of the second curve
            private Android.Graphics.Point mSecondCurveStartPoint = new Android.Graphics.Point();
            private Android.Graphics.Point mSecondCurveEndPoint = new Android.Graphics.Point();
            private Android.Graphics.Point mSecondCurveControlPoint1 = new Android.Graphics.Point();
            private Android.Graphics.Point mSecondCurveControlPoint2 = new Android.Graphics.Point();
            private int mNavigationBarWidth;
            private int mNavigationBarHeight;

            public BottomNavTabPageRenderer(Context context)
                : base(context)
            {
                init();
            }

            private void init()
            {
                mPath = new Path();
                mPaint = new Paint();
                mPaint.SetStyle(Paint.Style.FillAndStroke);
                mPaint.Color = Android.Graphics.Color.White;
                SetBackgroundColor(Android.Graphics.Color.Transparent);
            }

            protected override void OnSizeChanged(int w, int h, int oldw, int oldh)
            {
                base.OnSizeChanged(w, h, oldw, oldh);

                BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);

                mNavigationBarWidth = bottomNavigationMenuView.Width; // Width I'm getting is 720
                mNavigationBarHeight = bottomNavigationMenuView.Height; // Height I'm getting is 112
                // the coordinates (x,y) of the start point before curve
                mFirstCurveStartPoint.Set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);
                // the coordinates (x,y) of the end point after curve
                mFirstCurveEndPoint.Set(mNavigationBarWidth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));
                // same thing for the second curve
                mSecondCurveStartPoint = mFirstCurveEndPoint;
                mSecondCurveEndPoint.Set((mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3), 0);

                // the coordinates (x,y)  of the 1st control point on a cubic curve
                mFirstCurveControlPoint1.Set(mFirstCurveStartPoint.X + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.Y);
                // the coordinates (x,y)  of the 2nd control point on a cubic curve
                mFirstCurveControlPoint2.Set(mFirstCurveEndPoint.X - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS, mFirstCurveEndPoint.Y);

                mSecondCurveControlPoint1.Set(mSecondCurveStartPoint.X + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS, mSecondCurveStartPoint.Y);
                mSecondCurveControlPoint2.Set(mSecondCurveEndPoint.X - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)), mSecondCurveEndPoint.Y);

                mPath.Reset();
                mPath.MoveTo(0, 0);
                mPath.LineTo(mFirstCurveStartPoint.X, mFirstCurveStartPoint.Y);

                mPath.CubicTo(mFirstCurveControlPoint1.X, mFirstCurveControlPoint1.Y,
                        mFirstCurveControlPoint2.X, mFirstCurveControlPoint2.Y,
                        mFirstCurveEndPoint.X, mFirstCurveEndPoint.Y);

                mPath.CubicTo(mSecondCurveControlPoint1.X, mSecondCurveControlPoint1.Y,
                        mSecondCurveControlPoint2.X, mSecondCurveControlPoint2.Y,
                        mSecondCurveEndPoint.X, mSecondCurveEndPoint.Y);

                mPath.LineTo(mNavigationBarWidth, 0);
                mPath.LineTo(mNavigationBarWidth, mNavigationBarHeight);
                mPath.LineTo(0, mNavigationBarHeight);
                mPath.Close();
            }

            protected override void OnDraw(Canvas canvas)
            {
                base.OnDraw(canvas);
                canvas.DrawPath(mPath, mPaint);
            }

          private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
            {
            if (viewGroup == null || viewGroup.ChildCount == 0) return null;

            for (var i = 0; i < viewGroup.ChildCount; i++)
            {
                var child = viewGroup.GetChildAt(i);

                var typedChild = child as T;
                if (typedChild != null) return typedChild;

                if (!(child is ViewGroup)) continue;

                var result = FindChildOfType<T>(child as ViewGroup);

                if (result != null) return result;
            }

            return null;
        }
    }}

任何帮助，将不胜感激！

标签： c#rxamarinxamarin.formsxamarin.android