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

Question

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



有什么方法可以为选项卡区域添加左右边距吗？

Answer 1

在这里，更好的方法是使用 Padding 而不是 Margin。一会儿你就会明白为什么。
因此，从实现开始 - 您需要利用 Custom renderers 的力量.
在这种特殊情况下，我们需要继承 ShellRenderer .此外，Android 和 iOS 也存在一些差异 - 对于 Android，您需要覆盖 CreateBottomNavViewAppearanceTracker对于 iOS - CreateTabBarAppearanceTracker假设您已遵循这些建议并将您的 Shell 命名为 AppShell ，那么 2 个类将如下所示。
安卓:

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 上的默认外观:
正确的实现是像这样设置底部导航 View 的左右填充:

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

最终结果:
如果我们想设置边距，而不是填充，那么我们可以像这样修改 View 的 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;
    }
}

但是，这里看起来像这样:
您可以尝试设置父 View 的背景颜色，但最终结果将是相同的，并且使用 Padding 设置，您无需尝试修复未损坏的内容。
对于 iOS，基本流程是相同的。重要的方法又是 SetAppearance在里面我们可以修改我们的 UITabBar .
不幸的是，我还没有找到合适的配置，但我会在找到时更新我的​​答案。设置 View /框架的边距/偏移量应该可以完成工作，但我怀疑 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;
}

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