Xamarin Forms导航栏，带有圆形的中心按钮

Question

是否可以在Xamarin Forms中复制这样的底部导航栏？

例如，不是使用Grid，而是使用真实的导航栏，因此该内容保持静态，并且导航在导航区域中进行。

Answer 1

您可以使用自定义渲染器在iOS中实现此目标：

在Xamarin.forms中，创建一个包含5页的TabbePage：

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

在TabbedRenderer中，在此处添加圆形按钮：

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