.NET MAUI Android平台下如何修改TabbedPage指示器颜色？

问题背景 #

开发.NET MAUI应用时，需要修改Android平台TabbedPage中选中标签下方的下划线（指示器）颜色。尝试设置TabbedPage的BackgroundColor、BarBackgroundColor、SelectedTabColor等属性均无效，且.NET MAUI没有直接提供设置该指示器颜色的属性。以下是简化的Demo代码：

TabbedPage XAML

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiBiometricAppDemo.Views"
            x:Class="MauiBiometricAppDemo.Views.MyTabbedPage"
            BackgroundColor="Yellow"
            BarBackgroundColor="Yellow"
            BarTextColor="Black"
            SelectedTabColor="White"
            UnselectedTabColor="White">
    <local:MainPage />
    <local:NewPage1 />
</TabbedPage>

TabbedPage 后台代码

public partial class MyTabbedPage : TabbedPage
{
    public MyTabbedPage()
    {
        InitializeComponent();
    }
}

MainPage 代码

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBiometricAppDemo.Views.MainPage"
             Title="MainPage">
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

NewPage1 代码

public partial class NewPage1 : ContentPage
{
    public NewPage1()
    {
        InitializeComponent();
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBiometricAppDemo.Views.NewPage1"
             Title="NewPage1">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

解决方案 #

.NET MAUI中Android平台的TabbedPage指示器颜色需要通过自定义Handler（替代Xamarin.Forms中的渲染器）或修改Android资源文件实现，以下是两种可行方法：

方法一：自定义TabbedPage Handler（推荐）

这种方式符合MAUI的现代化架构，无需修改资源文件，直接通过代码控制：

1. 在Android项目中创建自定义Handler类：

using Android.Content;
using Android.Support.Design.Widget;
using Microsoft.Maui.Handlers;

namespace MauiBiometricAppDemo.Platforms.Android
{
    public class CustomTabbedPageHandler : TabbedPageHandler
    {
        public CustomTabbedPageHandler(IPropertyMapper mapper, CommandMapper commandMapper = null) 
            : base(mapper, commandMapper)
        {
        }

        protected override void ConnectHandler(TabLayout platformView)
        {
            base.ConnectHandler(platformView);
            // 设置选中标签指示器颜色，替换为你需要的颜色值
            platformView.SetSelectedTabIndicatorColor(Android.Graphics.Color.ParseColor("#FF0000"));
            // 可选：设置指示器高度，单位为像素
            platformView.SetSelectedTabIndicatorHeight(4);
        }
    }
}

2. 在MauiProgram.cs中注册该Handler：

using MauiBiometricAppDemo.Platforms.Android;

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    })
    .ConfigureMauiHandlers(handlers =>
    {
#if ANDROID
        handlers.AddHandler(typeof(TabbedPage), typeof(CustomTabbedPageHandler));
#endif
    });

return builder.Build();

方法二：修改Android资源文件

适合需要全局统一设置TabLayout样式的场景：

1. 在Android项目的Resources/values/styles.xml中添加自定义样式：

<resources>
    <style name="AppTheme" parent="Theme.Maui">
        <!-- 其他样式 -->
    </style>

    <!-- 自定义TabLayout样式 -->
    <style name="CustomTabLayoutStyle" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">#FF0000</item> <!-- 指示器颜色 -->
        <item name="tabIndicatorHeight">4dp</item> <!-- 指示器高度 -->
    </style>
</resources>

2. 在Resources/values-v21/styles.xml中同步添加（适配Android 5.0及以上版本）：

<resources>
    <style name="AppTheme" parent="Theme.Maui">
        <!-- 其他样式 -->
    </style>

    <style name="CustomTabLayoutStyle" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">#FF0000</item>
        <item name="tabIndicatorHeight">4dp</item>
    </style>
</resources>

3. 在Android项目的MainActivity.cs中应用该样式：

using Android.Support.Design.Widget;
using Android.OS;

namespace MauiBiometricAppDemo.Platforms.Android
{
    [Activity(Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : MauiAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            
            var tabLayout = FindViewById<TabLayout>(Resource.Id.tab_layout);
            if (tabLayout != null)
            {
                tabLayout.SetStyle(Resource.Style.CustomTabLayoutStyle, null);
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者danny