CODEWITHSUNDEEP
xamarin.forms
ArthurCPPCLI
ArthurCPPCLI

Reputation: 1082

Xamarin Forms navigation bar with rounded central button

Is it possible to reproduce a bottom navigation bar like this in Xamarin Forms ?

enter image description here

Not with a Grid for example, but with a real navigation bar so this content stay static and navigation occurs in navigation area.

Upvotes: 1

Views: 1017

Answers (1)

nevermore
nevermore

Reputation: 15786

You can use custom renderer to achieve this in iOS:

In Xamarin.forms, create a TabbePage with 5 pages there:

<ContentPage Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="" />
<ContentPage Title="Tab 3" />
<ContentPage Title="Tab 4" />

In the TabbedRenderer, add the round button there:

[assembly : ExportRenderer(typeof(TabbedPage),typeof(MyRenderer))]
namespace App325.iOS
{
    public class MyRenderer : TabbedRenderer
    {

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            UIButton btn = new UIButton(frame: new CoreGraphics.CGRect(0, 0, 60, 60));
            this.View.Add(btn);

            //customize button
            btn.ClipsToBounds = true;
            btn.Layer.CornerRadius = 30;
            btn.BackgroundColor = UIColor.Red;
            btn.AdjustsImageWhenHighlighted = false;

            //move button up
            CGPoint center = this.TabBar.Center;
            center.Y = center.Y - 20;
            btn.Center = center;

            //button click event
            btn.TouchUpInside += (sender, ex) =>
            {
                //use mssage center to inkove method in Forms project
            };

            //disable jump into third page
            this.ShouldSelectViewController += (UITabBarController tabBarController, UIViewController viewController) =>
            {
                if (viewController == tabBarController.ViewControllers[2])
                {
                    return false;
                }
                return true;
            };
        }
    }
}

Upvotes: 1

Related Questions