c# - 如何在 Xamarin Shell 中自定义顶部选项卡 (ShellSection) 的外观？

Question

我做了很多研究：

• 如何更改 ActionBar Tab textStyle？
• 小写的 TabLayout 选项卡标题文本
• https://github.com/Andy671/Dachshund-Tab-Layout/issues/2
• https://github.com/NativeScript/NativeScript/issues/2551

但是，我找不到如何正确实现我的想法。

我的应用程序使用带有弹出菜单的 Xamarin Shell，并且某些页面显示了一个顶部选项卡栏。举个例子，我的应用程序如下所示：

Xamarin Shell 提供了一种创建这些多选项卡页面的简单方法。现在，我想自定义这些选项卡并更改字体、选择指示器的颜色等。一开始，我以为我可以在styles.xml我的 Android 项目的文件中创建一个特定的样式，然后在android.support.design.widget.TabLayout. 举个例子，我在Tabbar.xml我的 Xamarin 解决方案的 Android 项目中的文件中做了这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/sliding_tabs"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   app:tabIndicatorColor="@android:color/white"
   style="@style/MyCustomTabLayout"
   app:tabGravity="fill"
   app:tabMode="fixed" />

这在styles.xml文件中总是在解决方案的Android项目中：

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MainTheme" parent="MainTheme.Base">
    <item name="android:textAllCaps">false</item>
  </style>

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#FFFFFF</item>
    <item name="tabIndicatorHeight">3dp</item>
    <item name="tabSelectedTextColor">#FFFFFF</item>
  </style>
</resources>

但是，什么也没发生，样式也没有应用。我认为这是对如何真正实现我的想法的误解，并且我认为“子”顶部标签栏可能不被认为是真实的TabLayout，因为它只是ShellSection. 最后，我发现也许我需要的是一个自定义渲染器。我正在实施它，但我被困在这个问题上：我不明白如何设置ShellSection. 我当前的自定义渲染器代码是这样的：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace A {
    internal class CustomShellRenderer : ShellRenderer {
        public CustomShellRenderer(Context context) : base(context) { }

        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection) {
            return new CustomShellSectionAppearance(this);
        }
    }

    class CustomShellSectionAppearance : ShellSectionRenderer {
        public Fragment Fragment { get; }
        public event EventHandler AnimationFinished;
        public void Dispose() {
            throw new NotImplementedException();
        }

        public ShellSection ShellSection { get; set; }

        public CustomShellSectionAppearance(IShellContext shellContext) : base(shellContext) { }

        // I thought I need to make my customization here, but it was only a guess:
        // I found nobody talking about customizing a ShellSection on the Web
        protected override void SetAppearance(ShellAppearance appearance) {
            base.SetAppearance(appearance);
            appearance.TabBarDisabledColor = Color.Aqua; // ERROR: appearance has only "get" properties
        }
    }
}

在自定义 Xamarin 应用程序顶部选项卡栏的外观的过程中，我是否遗漏了什么？

Answer 1

如果您想更改选定选项卡的颜色而无需自定义渲染器的麻烦，您可以通过编辑 Shell 选项卡的 ShellUnselectedColor、ShellTitleColor 和 ShellForegroundColor 来做到这一点：

  <Style x:Key="BaseStyle"
                   TargetType="Element">
                <Setter Property="Shell.BackgroundColor"
                        Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TitleColor"
                        Value="White" />
                <Setter Property="Shell.DisabledColor"
                        Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor"
                        Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor"
                        Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarUnselectedColor"
                        Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarTitleColor"
                        Value="White" />
            </Style>

Answer 2

您可以使用以下 Shell 自定义渲染器来实现这一点。

• 对于颜色：SetColors(TabLayout tabLayout, Color foreground, Color background, Color title, Color unselected)方法的参数名称是不言自明的。
• 如果在下面的代码中颜色类型前面没有命名空间，那么它来自 XF，因为using Color = Xamarin.Forms.Color;
• 对于字体，您需要创建一个自定义视图并定义您想要的任何属性。
• TabSelected您可以在使用和事件更改选择时修改属性，更改样式或执行任何逻辑TabUnSelected，在我的演示中，我在文本上应用粗体并在选择选项卡时使其变大并在取消选择选项卡时恢复，您可以实现一个不错的动画还有。

public class MyShellRenderer : ShellRenderer
{
    public MyShellRenderer(Context context) : base(context)
    {
    }

    protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        => new MyTabLayoutAppearanceTracker(this);
}


public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
    public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
    {
    }

    public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
    {
        base.SetAppearance(tabLayout, appearance);
        tabLayout.TabSelected += TabLayout_TabSelected;
        tabLayout.TabUnselected += TabLayout_TabUnselected;

        for (var i = 0; i < tabLayout.TabCount; i++)
        {
            TabLayout.Tab tab = tabLayout.GetTabAt(i);
            if (tab.CustomView == null)
            {
                TextView textview = new TextView(Android.App.Application.Context)
                {
                    Text = tabLayout.GetTabAt(i).Text,
                    TextSize = 20,
                    Typeface = Typeface.DefaultBold
                };
                textview.SetTextColor(Android.Graphics.Color.Black);
                tab.SetCustomView(textview);
            }
        }
        base.SetColors(tabLayout, Color.Red, Color.Yellow, Color.Black, Color.Gray);
    }
        private void TabLayout_TabUnselected(object sender, TabLayout.TabUnselectedEventArgs e)
        {
            if (e.Tab?.CustomView is TextView textView)
            {
                textView.Typeface = Typeface.Default;
                textView.TextSize = 15;
            }
        }

        private void TabLayout_TabSelected(object sender, TabLayout.TabSelectedEventArgs e)
        {
            if (e.Tab?.CustomView is TextView textView)
            {
                textView.Typeface = Typeface.DefaultBold;
                textView.TextSize = 20;
            }
        }
}

---

编辑

没有自定义渲染器的更简单的解决方案？

看看包中的TabViewxamarin-communitytoolkit。