android - Xamarin 表格 : How to change text color of selected tab using TabbedPageRenderer

Question

我正在使用 TabbedPageRenderer 开发标签。我无法更改所选标签的文本颜色(只能更改所选标签的图标颜色)。下面是 MyTabbedPageRenderer.cs 类

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

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

    protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
    {
        base.SetTabIcon(tab, icon);
        tab.SetCustomView(Resource.Layout.Custom_tab_layou);
        var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
        var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
        tv.SetText(tab.Text, TextView.BufferType.Normal);
        imageview.SetBackgroundDrawable(tab.Icon);  
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (setup)
            return;
        if (e.PropertyName == "Renderer")
        {
            pager = (ViewPager)ViewGroup.GetChildAt(0);
            layout = (TabLayout)ViewGroup.GetChildAt(1);

            setup = true;
            ColorStateList colors = null;

            //using xml file
            if ((int)Build.VERSION.SdkInt >= 23)
                colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
            else
                colors = Resources.GetColorStateList(Resource.Color.icon_tab);

            for (int i = 0; i < layout.TabCount; i++)
            {
                var tab = layout.GetTabAt(i);
                var icon = tab.Icon;

                Android.Views.View view = GetChildAt(i);
                if (view is TabLayout)
                    layout = (TabLayout)view;

                if (icon != null)
                {
                    icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
                    Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
                }
            }
        }
    }
}

此 xml 文件用于更改选定的选项卡和文本颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:color="#E2725B" 
          android:state_selected="true" />
    <item android:color="#FFFFFF" />
    <item app:tabSelectedTextColor="#F3E5AB" />
</selector>

用于 MainActivity 的样式

  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

用于 splashActivity 的样式

<style name="MyTheme.Splash" parent 
   ="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>

下面是Tabbar.axml文件

   <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"
    app:tabIndicatorColor="#BF94E4"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabSelectedTextColor="#DFFF00"
    app:tabGravity="fill"
    app:tabMode="fixed" />

下面是只有图标颜色发生变化的输出截图

Answer 1

Xamarin Forms: How to change text color of selected tab using TabbedPageRenderer

不需要使用TabbedPageRenderer来改变选中的标签文本颜色，你可以直接改变它通过XML属性。

在您的Resource\layout\Tabbar.axml中:

<?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:tabMode="fixed"
        app:tabGravity="fill"

        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"
        app:tabIndicatorColor="@color/your_indicator_color"
     />

更新:

给你的 TextView 一个 ColorStateList 将解决这个问题。在您的 MyTabbedPageRenderer SetTabIcon 方法中:

protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
    base.SetTabIcon(tab, icon);
    tab.SetCustomView(Resource.Layout.Custom_tab_layou);

    var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
    var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);

    tv.SetText(tab.Text, TextView.BufferType.Normal);
    imageview.SetBackgroundDrawable(tab.Icon);

    ColorStateList colors2 = null;

    if ((int)Build.VERSION.SdkInt >= 23)
        colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
    else
        colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
    tv.SetTextColor(colors2);
}

Effect .