有没有办法可以使用 Xamarin 表单向 Shell 选项卡区域添加左右边距？

Question

在横向模式下在平板设备上查看时，我的页面在左侧和右侧有一个边距：

有什么办法可以在选项卡区域中添加左右边距吗？

Answer 1

在这里，更好的方法是使用 Padding 而不是 Margin。一会儿你就会明白为什么。

因此，从实现开始 - 您需要利用自定义渲染器的强大功能。

在这种特定情况下，我们需要继承自ShellRenderer. 此外，Android 和 iOS 也存在一些差异 - 对于 Android，您需要覆盖CreateBottomNavViewAppearanceTracker，对于 iOS -CreateTabBarAppearanceTracker

假设您遵循了建议并命名了您的Shell AppShell，那么这两个类将如下所示。

安卓：

using Android.Content;
using TestShellTabBarMargin;
using TestShellTabBarMargin.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(AppShell), typeof(AppShellRenderer))]
namespace TestShellTabBarMargin.Droid
{
    public class AppShellRenderer : ShellRenderer
    {
        public AppShellRenderer(Context context)
            : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MarginedTabBarAppearance();
        }
    }
}

IOS：

using TestShellTabBarMargin;
using TestShellTabBarMargin.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell), typeof(AppShellRenderer))]
namespace TestShellTabBarMargin.iOS
{
    public class AppShellRenderer : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new MarginedTabBarAppearance();
        }
    }
}

接下来，您需要创建外观类并从基类（Android -ShellBottomNavViewAppearanceTracker和 iOS - ShellTabBarAppearanceTracker）继承。

注意！：您也可以实现它们的界面（Android -IShellBottomNavViewAppearanceTracker和 iOS - IShellTabBarAppearanceTracker），但这样您将丢失所有已应用的样式，然后您必须手动设置它们。

在类被子类化之后，重要的方法是SetAppearance. ResetAppearance也可以工作，但它在许多其他情况下会被调用，我们只需要更改一次。

以下是它在 Android 上的默认外观：

正确的实现是像这样设置底部导航视图的左右填充：

using Android.Support.Design.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

namespace TestShellTabBarMargin.Droid
{
    public class MarginedTabBarAppearance : ShellBottomNavViewAppearanceTracker
    {
        public MarginedTabBarAppearance(IShellContext shellContext, ShellItem shellItem)
            : base(shellContext, shellItem)
        {
        }

        public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            base.SetAppearance(bottomView, appearance);

            bottomView.SetPadding(400, 0, 400, 0);
        }
    }
}

最终结果：

如果我们想设置边距，而不是填充，那么我们可以像这样修改视图的 layoutParams：

public override void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
{
    if (bottomView.LayoutParameters is LinearLayout.LayoutParams layoutParams)
    {
        layoutParams.SetMargins(400, 0, 400, 0);
        bottomView.LayoutParameters = layoutParams;
    }
}

但是，这里看起来像这样： 您可以尝试设置父视图的背景颜色，但最终结果将是相同的，并且使用 Padding 设置您无需尝试修复未损坏的内容。

对于 iOS，基本流程是相同的。重要的方法是再次SetAppearance，在它里面我们可以修改我们的UITabBar.

不幸的是，我还没有找到合适的配置，但我会在找到时更新我的​​答案。设置视图/框架的边距/偏移量应该可以完成工作，但我怀疑 Xamarin 的人在执行该方法后正在重置这些值。我需要在这里进行一些修补和反复试验。

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

namespace TestShellTabBarMargin.iOS
{
    public class MarginedTabBarAppearance : ShellTabBarAppearanceTracker
    {
        public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            // Modify tab bar settings
        }
    }
}

编辑：将项目的宽度和定位设置为居中也应该有效并且实际上有效，但仅适用于 iPhone（纵向）。就像我说的那样，我怀疑 Xamarin 的人在我们更改后会进行一些更新。

这应该有效，但它没有：

public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
    base.SetAppearance(controller, appearance);

    var tabBar = controller.TabBar;
    tabBar.ItemWidth = 50;
    tabBar.ItemPositioning = UITabBarItemPositioning.Centered;
}

注意：请记住，您将需要正确处理方向更改以及设备习惯用法（平板电脑或手机）。根据返回的值，您只能更新所需的偏移量。

Answer 2

您应该在 iOS/Android 平台上使用 TabbedPageRenderer 来更改 TabBar 模板。例如，Android 对于 Android 平台可以是 TabLayout，对于 iOS 可以是 TabBar

如果您指的是 shell 选项卡页面，您应该做的第一件事就是在平台上实现您自己的 ShellRenderer。之后，您需要覆盖 CreateTabBarAppearanceTracker 方法，您可以在其中创建并返回您自己的 ShellTabBarAppearanceTracker（或适用于 Android 的 ShellTabLayoutAppearenceTracker）。之后，您使用 IShellTabBarAppearanceTracker（适用于 iOS）实现您的 ShellTabBarAppearanceTracker。你可以像这个人那样做： -创建 ShellTabBar/LayoutAppearanceTracker