Xamarin Forms：如何通过TabbedPageRenderer修改选中标签的文字颜色

嘿，我来帮你搞定这个Tab文字颜色改不了的问题！核心原因是你用了自定义Tab视图后，TabLayout默认的文字样式配置就不起作用了，得手动通过代码来控制选中/未选中状态下的文字和图标颜色。下面是具体的解决步骤：

1. 完善自定义Tab布局 #

首先确保你的自定义Tab布局（比如Resource.Layout.Custom_Tab.axml）里包含图标和文字控件，给它们设置好ID方便后续代码引用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginBottom="4dp"/>

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"/>
</LinearLayout>

2. 修改MyTabbedPageRenderer代码 #

接下来更新你的渲染器类，添加Tab选中状态监听，手动控制文字和图标的颜色：

public class MyTabbedPageRenderer : TabbedPageRenderer 
{ 
    bool setup; 
    TabLayout layout; 

    public MyTabbedPageRenderer(Context context) : base(context) { } 

    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement == null && e.NewElement != null)
        {
            // 获取TabLayout控件
            layout = (TabLayout)ViewGroup.GetChildAt(1);
            
            // 初始化所有Tab的自定义视图和初始颜色
            for (int i = 0; i < layout.TabCount; i++)
            {
                var tab = layout.GetTabAt(i);
                if (tab != null)
                {
                    tab.SetCustomView(Resource.Layout.Custom_Tab);
                    // 设置初始状态颜色（默认第一个Tab选中）
                    UpdateTabAppearance(tab, tab.IsSelected);
                }
            }

            // 添加Tab选中状态监听
            layout.AddOnTabSelectedListener(new TabSelectedListener(this));
        }
    }

    // 统一更新Tab的图标和文字颜色
    private void UpdateTabAppearance(TabLayout.Tab tab, bool isSelected)
    {
        var customView = tab.CustomView;
        if (customView == null) return;

        var tabIcon = customView.FindViewById<ImageView>(Resource.Id.tab_icon);
        var tabText = customView.FindViewById<TextView>(Resource.Id.tab_text);

        if (isSelected)
        {
            // 设置选中时的颜色（这里用红色示例，你可以换成自己需要的颜色）
            tabIcon.SetColorFilter(Android.Graphics.Color.ParseColor("#FF0000"), Android.Graphics.PorterDuff.Mode.SrcIn);
            tabText.SetTextColor(Android.Graphics.Color.ParseColor("#FF0000"));
        }
        else
        {
            // 设置未选中时的颜色（灰色示例）
            tabIcon.SetColorFilter(Android.Graphics.Color.ParseColor("#808080"), Android.Graphics.PorterDuff.Mode.SrcIn);
            tabText.SetTextColor(Android.Graphics.Color.ParseColor("#808080"));
        }
    }

    // Tab选中状态监听类
    private class TabSelectedListener : Java.Lang.Object, TabLayout.IOnTabSelectedListener
    {
        private readonly MyTabbedPageRenderer _renderer;

        public TabSelectedListener(MyTabbedPageRenderer renderer)
        {
            _renderer = renderer;
        }

        public void OnTabSelected(TabLayout.Tab tab)
        {
            _renderer.UpdateTabAppearance(tab, true);
        }

        public void OnTabUnselected(TabLayout.Tab tab)
        {
            _renderer.UpdateTabAppearance(tab, false);
        }

        public void OnTabReselected(TabLayout.Tab tab)
        {
            // 可选：处理Tab被重复选中的逻辑
        }
    }

    // 保留你原来的SetTabIcon方法
    protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon) 
    { 
        base.SetTabIcon(tab, icon); 
        // 如果需要在这里设置初始图标，也可以继续完善
    }
}

关键说明 #

• 当你给Tab设置了CustomView后，TabLayout默认的文字颜色样式会失效，必须通过代码手动切换状态颜色。
• UpdateTabAppearance方法是核心，它负责根据选中状态找到自定义视图里的控件，设置对应的颜色。
• 确保布局里的控件ID和代码里的Resource.Id.tab_icon、Resource.Id.tab_text完全一致，不然会找不到控件哦。

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