选择 TabLayout 时更改每个 Tab 文本颜色的正确方法是什么？

Question

我想知道，我有一个用于 TabLayout 中的选项卡的 custom_tab_layout，它只有一个带有 id 的 TextView，但是我想要做的是，当它被单击/选择时，所述 TextView 的文本会改变它的颜色，这个下一个代码有效，但是我不确定这是否是实现此功能的正确方法，因为我是 android 新手，感觉必须有更好的方法。这是一些 cmets 的代码！我只是使用 ViewPager 并创建了一个扩展 FragmentPagerAdapter 的自定义适配器类。

public class MainActivity extends AppCompatActivity{

public static class CategoryPagerAdapter extends FragmentPagerAdapter{

    private static int NUM_PAGES = 4;

    public CategoryPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {

        switch (position){

            case 0:{
                return new NumbersFragment();
            }

            case 1:{
                return new FamilyFragment();
            }

            case 2:{
                return new ColorsFragment();
            }

            case 3:{
                return new PhrasesFragment();
            }

            default:{
                return null;
            }

        }


    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_pager);

    TabLayout tlCategoryTab = this.findViewById(R.id.tlCategoryTab);
    final ViewPager vpPager = this.findViewById(R.id.vpPager);

    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));
    tlCategoryTab.addTab(tlCategoryTab.newTab().setCustomView(R.layout.custom_tab_layout));

    String [] categories = {"Numbers", "Family", "Colors", "Phrases"};

    for (int i = 0; i < categories.length; i++) {
        TabLayout.Tab tab = tlCategoryTab.getTabAt(i);

        //Here I get the custom tab layout
        View v = tab.getCustomView();

        //Assign the TextView and the Tab name
        TextView tvTabItem = v.findViewById(R.id.tvTabItem);
        tvTabItem.setText(categories[i]);

        //I was having issues when the app first started because it wasn't 
        //getting assigned the first color, so I came up with this kinda lame solution
        if(i == 0){
            tvTabItem.setTextColor(getResources().getColor(R.color.category_numbers));
            tab.setCustomView(v);
        }
    }

    CategoryPagerAdapter myAdapter = new CategoryPagerAdapter(this.getSupportFragmentManager());
    vpPager.setAdapter(myAdapter);
    vpPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tlCategoryTab));


    //And here is the actual functionality that changes the TextColor when it gets clicked/selected
    tlCategoryTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            int colorToUse = 0;

            View v = tab.getCustomView();
            TextView tvTabItem = v.findViewById(R.id.tvTabItem);

            if(tvTabItem.getText().toString().equalsIgnoreCase("Numbers")){
                colorToUse = R.color.category_numbers;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Family")){
                colorToUse = R.color.category_family;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Colors")){
                colorToUse = R.color.category_colors;
            }
            else if(tvTabItem.getText().toString().equalsIgnoreCase("Phrases")){
                colorToUse = R.color.category_phrases;
            }

            tvTabItem.setTextColor(getResources().getColor(colorToUse));
            tab.setCustomView(v);
            vpPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            View v = tab.getCustomView();
            TextView tvTabItem = v.findViewById(R.id.tvTabItem);
            tvTabItem.setTextColor(getResources().getColor(R.color.white));
            tab.setCustomView(v);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

}

有没有办法以更有效的方式实现相同的目标？提前感谢您花时间阅读本文！

Answer 1

您可以通过 xml 或 java 代码两种方式来实现。

在 XML 中：

使用app:tabTextColor 表示未选择的标签颜色，使用app:tabSelectedTextColor 表示选定的标签颜色

<android.support.design.widget.TabLayout
    app:tabIndicatorColor="@color/yourColor"
    app:tabTextColor="@color/yourColor"
    app:tabSelectedTextColor="@color/yourColor">

在 Java 代码中：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {

        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            super.onTabSelected(tab);
            tabLayout.setTabTextColors(

            // Unselected Tab Text Color

                    ContextCompat.getColor(MainActivity.this, R.color.unselectedTabColor),

            // Selected Tab Text Color

                    ContextCompat.getColor(MainActivity.this, R.color.selectedTabColor)
            );

      // Selected Tab Indicator Color

            tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.yourColor));
            tabLayout.setSelectedTabIndicatorHeight(5);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            super.onTabUnselected(tab);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            super.onTabReselected(tab);
        }
    });

Answer 2

添加一个选项卡选择侦听器，然后根据位置更改那里的颜色：

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            int position = tab.getPosition();
            View v = tab.getCustomView();
            //Change the color of the tab's layout here
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

            int position = tab.getPosition();
            View v = tab.getCustomView();
            //Change the color of the tab's layout here
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

Answer 3

在布局 xml 文件中将其添加到您的 TabLayout：

app:tabSelectedTextColor="your color"

或以编程方式执行此操作：

tabLayout.setTabTextColors(int normal_color, int selected_color);