如何更改选项卡布局中所选选项卡的图标颜色？

android java material-design android-tablayout

2022-08-31 10:29:57

我正在使用带有a的，我想知道如何最有效地更改TabLayout中所选选项卡的图标颜色。TabLayoutViewPager

如何实现这一点的完美参考是谷歌的Youtube应用程序。在主页上，有四个深灰色的图标。选择特定选项卡后，该选项卡的图标将变为白色。

没有任何第三方库，我怎样才能达到同样的效果？

一种可能的解决方案显然是使用选择器。但是在这种情况下，我必须找到图标的白色和灰色版本，然后在选项卡被选中或取消选择时切换图标。我想知道是否有更有效的方法，我可以突出显示图标颜色或其他颜色。我无法在任何教程中找到它。

编辑

我上面直接提到的解决方案需要为每个选项卡的图标使用两个可绘制对象。我想知道是否有一种方法可以以编程方式为每个选项卡的图标绘制一个可绘制。

答案 1

我找到了一种很容易的方法。

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {

                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    super.onTabSelected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

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

答案 2

这可以非常简单地完成，完全在xml中。

在 xml 中的 TabLayout 中添加一行，如下所示：app:tabIconTint="@color/your_color_selector"

 <android.support.design.widget.TabLayout
     android:id="@+id/tab_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:tabIconTint="@color/your_color_selector"
     app:tabIndicatorColor="@color/selected_color"/>

然后，在 res/color 目录中创建一个颜色选择器文件（上面名为“your_color_selector.xml”）：

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

这假设您的颜色文件中有 2 种颜色，“selected_color”和“unselected_color.xml”。