如何在 MAUI 中制作自定义标签页？

Question

我创建了一个选项卡式页面，我正在尝试实现这种底部选项卡栏。

我设法在Android中使用TabbedViewHandler做到这一点，但是自定义选项卡栏后面有一个不需要的白色层，我该如何删除它？ 而且我也找不到适用于 iOS 的类似解决方案。

我在 Android 上尝试过这个：

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Controls.Platform;
using System.Reflection;
#if ANDROID
using static Android.Views.ViewGroup;
using Android.Graphics.Drawables;
using Google.Android.Material.BottomNavigation;
using AndroidX.Core.View;
#endif

namespace Project.Views.Handlers
{
    public class AndroidTabbedPageHandler : TabbedViewHandler
    {
        public AndroidTabbedPageHandler()
        {
            Mapper.AppendToMapping(nameof(CustomTabbedPage), (handler, view) =>
            {
#if ANDROID
                if (view is CustomTabbedPage)
                {
                    FieldInfo tabbedPageManagerFieldInfo = typeof(TabbedPage).GetField("_tabbedPageManager", BindingFlags.NonPublic | BindingFlags.Instance);
                    object tabbedPageManager = tabbedPageManagerFieldInfo?.GetValue(view);

                    FieldInfo tabLayoutFieldInfo = tabbedPageManager?.GetType().GetField("_bottomNavigationView", BindingFlags.NonPublic | BindingFlags.Instance);
                    BottomNavigationView bottomNavigationView = tabLayoutFieldInfo?.GetValue(tabbedPageManager) as BottomNavigationView;

                    if (bottomNavigationView != null)
                    {
                        GradientDrawable drawable = new GradientDrawable();
                        drawable.SetShape(ShapeType.Rectangle);
                        drawable.SetColor(Android.Graphics.Color.White);
                        drawable.SetCornerRadius(40);
                        MarginLayoutParams layoutParams = new(LayoutParams.WrapContent, LayoutParams.WrapContent);
                        layoutParams.SetMargins(20, 0, 20, 40);
                        bottomNavigationView.LayoutParameters = layoutParams;
                        bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
                        bottomNavigationView.SetElevation(12);
                        ViewCompat.SetBackground(bottomNavigationView, drawable);
                    }
                }
#endif
            });
        }
    }
}

Answer 1

对于iOS，请参考.NET MAUI中的TabbarRenderer源码，TabbedPage是由

TabbedRenderer

在iOS平台上实现的，所以你可以尝试新建一个Renderer类并让它继承

TabbedRenderer

。

具体来说，您可以通过重写名为

ViewDidLayoutSubviews

的 iOS 原生方法来更改 Tabbar 的位置和角度，如以下代码。

    public class CustomTabbar : TabbedRenderer
    {
#if iOS
        public override void ViewDidLayoutSubviews()
        {
            Tabbar.Layer.CornerRadius = 40;
            Tabbar.Layer.MasksToBounds = True;
            TabBar.Frame = new CoreGraphics.CGRect(TabBar.Frame.X + 10, TabBar.Frame.Y - 20, TabBar.Frame.Width - 20, TabBar.Frame.Height + 5);
        }
#end if
    }