Xamarin Forms navigation bar with rounded central button

问题

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

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

回答1:

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

来源：https://stackoverflow.com/questions/63035236/xamarin-forms-navigation-bar-with-rounded-central-button

标签

xamarin.forms