[android]更改文本 color 中选定的选项卡

发布时间: 2017/3/19 19:35:53
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个问题与选项卡在我的应用程序。当我选择一个选项卡时,我想要更改其图标和文字 color 。当我更改到另一个选项卡、 图标和文本 color 需要更改为中性 color

我试着这样做,但同时改变图标,文本 color 保持不变。

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) {
    }
});

这里是我的代码adapter

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();文本 color 是很好但很明显的图标不会改变。

解决方法 1:

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

这假定您使用自定义选项卡 layoutTextView 与 style="@style/tabText"。

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>

然后,设置文本颜色,使用选择器︰

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>

然后设置你 color 选定和未选定状态的属性 (如图所示为 colorSelected 和 colorDeselected 在这里。

您可以自定义通过自定义选项卡 layout :

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 在选项卡中获取绑的风格。 你可以挖到标准选项卡 layout XML 在平台 SDK,看到图标和文本如何工作和调整这 layout 相应。

赞助商