Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 89864

Curved bottom navigation bar in xamarin forms

$
0
0

The webiste is not letting me post the links here. I'm trying to create a curved bottom navigation bar and the renderer code is working on Xamarin.Android but not in xamarin forms. Can anyone test this?

Code.

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

Renderer.

 ` [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;
    }
}}`

Any help would be appreciated!


Viewing all articles
Browse latest Browse all 89864

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>