如何在 Xamarin Shell 中自定义顶部选项卡（Shell 部分）的外观？

Question

我做了很多研究：

How to change ActionBar Tab textStyle?
https://github.com/Andy671/Dachshund-Tab-Layout/issues/2
https://github.com/NativeScript/NativeScript/issues/2551

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

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

Xamarin Shell provides a simple way to create these multi-tabs pages。现在，我想自定义这些选项卡并更改字体、选择指示器的颜色等。一开始，我想我可以在我的 Android 项目的 styles.xml 文件中创建一个特定的样式并在 android.support.design.widget.TabLayout 中引用它。举个例子，我在我的 Xamarin 解决方案的 Android 项目中的 Tabbar.xml 文件中做了类似的事情：

<?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，因为它只是 [= 的产物19=]。最后，我发现也许我需要的是一个custom renderer。我正在实施它，但我被困在这个问题上：我不明白如何设置 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 自定义渲染器实现。

对于颜色：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;
            }
        }
}

编辑

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

查看 xamarin-communitytoolkit 包中的 TabView。

Answer 2

如果您想更改所选选项卡的颜色而无需自定义呈现器的麻烦，您可以通过编辑 Shell 选项卡的 ShellUnselectedColor、ShellTitleColor 和Shell前景色：

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

如何在 Xamarin Shell 中自定义顶部选项卡（Shell 部分）的外观？

How can I customize the appearance of top tabs (ShellSection) in Xamarin Shell?

c#

android

custom-renderer

xamarin.forms

xamarin.forms.shell