带有圆形中央按钮的 Xamarin Forms 导航栏 [英] Xamarin Forms navigation bar with rounded central button

问题描述

是否可以在 Xamarin Forms 中重现这样的底部导航栏?

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.

推荐答案

你可以在 iOS 中使用自定义渲染器来实现:

You can use custom renderer to achieve this in iOS:

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

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" />

在 TabbedRenderer 中，添加圆形按钮:

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

这篇关于带有圆形中央按钮的 Xamarin Forms 导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！