更改所选选项卡中的文本颜色

Question

我的应用程序中的标签有问题。当我选择一个选项卡时，我想更改其图标和文本颜色。当我切换到另一个选项卡时，图标和文本颜色需要更改为中性色。

我尝试这样做，但是虽然图标确实发生了变化，但文本颜色保持不变。

final TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setIcon(R.mipmap.destacados_act).setText("Destacados"));
tabs.setSelectedTabIndicatorColor(Color.rgb(255,170,0));
tabs.addTab(tabs.newTab().setIcon(R.mipmap.secciones).setText("Secciones"));
tabs.addTab(tabs.newTab().setIcon(R.mipmap.descargas).setText("Descargas"));

final ViewPager view_pager = (ViewPager) findViewById(R.id.pager);
final ViewPagerAdapterPrincipal adapter = new ViewPagerAdapterPrincipal(getSupportFragmentManager(), tabs.getTabCount());
view_pager.setAdapter(adapter);
view_pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));

tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        view_pager.setCurrentItem(tab.getPosition());

        switch (tab.getPosition()) {
            case 0:
                tab.setIcon(R.mipmap.destacados_act);
                tabs.setSelectedTabIndicatorColor(Color.rgb(255,170,0));
                break;
            case 1:
                tab.setIcon(R.mipmap.secciones_act);
                tabs.setSelectedTabIndicatorColor(Color.rgb(0,255,255));
                break;
            case 2:
                tab.setIcon(R.mipmap.descargas_act);
                tabs.setSelectedTabIndicatorColor(Color.rgb(170,255,0));
                break;
        }
    }
    public void onTabUnselected(TabLayout.Tab tab) {

        switch (tab.getPosition()) {
            case 0:
                tab.setIcon(R.mipmap.destacados);
                break;
            case 1:
                tab.setIcon(R.mipmap.secciones);
                break;
            case 2:
                tab.setIcon(R.mipmap.descargas);
                break;
        }
    }
    public void onTabReselected(TabLayout.Tab tab) {
    }
});

这是我的适配器代码

public class ViewPagerAdapterPrincipal extends FragmentStatePagerAdapter {

    int numOfTabs;

    public ViewPagerAdapterPrincipal(FragmentManager fm, int numOfTabs) {

        super(fm);
        this.numOfTabs = numOfTabs;
    }

    public Fragment getItem(int position) {

        switch(position){
            case 0 :
                DestacadosPrincipal tab1 = new DestacadosPrincipal();
                return tab1;
            case 1 :
                Secciones tab2 = new Secciones();
                return tab2;
            case 2 :
                Descargas tab3 = new Descargas();
                return tab3;
            default:
                return null;
        }
    }

    public int getCount() {
        return numOfTabs;
    }
}

问题来了 OnTabUnselected 如果我擦除
tab.setIcon(); 文本颜色很好，但显然图标没有改变。

Answer 1

您可以使用选择器为选项卡上的 TextView 设置样式

这假设您使用了自定义选项卡布局，其中包含带有 style="@style/tabText" 的 TextView。

values/styles.xml

<style name="tabText">
    <item name="android:textColor">@drawable/text_selector_tab</item>
    <item name="android:textSize">@dimen/fontTab</item>
    <item name="android:textAllCaps">true</item>
</style>

然后使用选择器设置 textColor：

drawable/text_selector_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/colorSelected" />
    <item android:color="@color/colorDeselected" />
</selector>

然后为选中和未选中状态设置颜色属性（即此处显示为 colorSelected 和 colorDeselected。

您可以使用自定义布局自定义标签：

layoutTab = (LinearLayout)inflater.inflate(R.layout.layout_tab, null);
TabLayout.Tab tab = mTabLayout.newTab();
tab.setCustomView(layoutTab);
mTabLayout.addTab(tabHome);

layout/layout_tab.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clipToPadding="false">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/tabText" />

 </LinearLayout>

这就是选项卡中的 TextView 与样式相关联的方式。您可以深入了解平台 SDK 中的标准选项卡布局 XML，以了解图标和文本的工作方式并相应地调整此布局。