如何更改TabLayout选定选项卡的图标颜色？

我使用TabLayout与ViewPager ，我想知道如何能够最有效地改变TabLayout中选定选项卡的图标的颜色。

谷歌的Youtube应用是如何实现这一点的完美参考。 在主页上，有四个深灰色的图标。 当select特定标签时，标签的图标变成白色。

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

一个可能的解决scheme显然是select器。 但是在这种情况下，我必须find图标的白色和灰色两种版本，然后在选项卡被选中或取消select时切换图标。 我想知道是否有一个更有效的方法，我可以突出图标颜色或什么的。 我在任何教程中都找不到这个。

编辑

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

Answer 1

我find了一个可以轻松的方法。

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

Answer 2

 private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); tabLayout.getTabAt(3).setIcon(tabIcons[3]); tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN); tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN); tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN); tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN); tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN); } @Override public void onTabUnselected(TabLayout.Tab tab) { tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN); } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } 

Answer 3

您可以使用ColorStateList。

首先，创build一个如下所示的xml文件（例如/color/tab_icon.xml ），并为不同的状态定义不同的色调：

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

然后将其添加到您的代码中：

 ColorStateList colors; if (Build.VERSION.SDK_INT >= 23) { colors = getResources().getColorStateList(R.color.tab_icon, getTheme()); } else { colors = getResources().getColorStateList(R.color.tab_icon); } for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); Drawable icon = tab.getIcon(); if (icon != null) { icon = DrawableCompat.wrap(icon); DrawableCompat.setTintList(icon, colors); } } 

首先，从XML中获取ColorStateList（不使用主题的方法已被弃用，但是对于棉花糖前的设备是必需的）。 然后你为每个标签的图标设置TintList到ColorStateList; 使用DrawableCompat（支持库）来支持旧版本。

而已！

Answer 4

对于它你必须使用每个选项卡的select器类自定义选项卡图标，如：

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/advisory_selected" android:state_selected="true" /> <item android:drawable="@drawable/advisory_normal" android:state_selected="false" /> 

Answer 5

你为什么不使用图标字体（如字体真棒）为您的图标？ 然后将标签文本的字体更改为您想要的字体图标.ttf，并享受更改选定的文本颜色到您的标签图标！

我，我自己，使用这种方法，它真的很好，干净:)

首先，从你想要的图标字体中设置标题：

在string.xml中：

  <string name="ic_calculator">&#xf1ec;</string> <string name="ic_bank">&#xf19c;</string> 

然后在MainActivity.Java中：

  private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new FragmentBank(), getString(R.string.ic_bank)); adapter.addFragment(new FragmentCalculate(), getString(R.string.ic_calculator)); viewPager.setAdapter(adapter); } 

那么你应该改变制表字体的字体为font-awesome：

  Typeface typeFaceFont = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf"); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(viewPager); ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0); int tabsCount = vg.getChildCount(); for (int j = 0; j < tabsCount; j++) { ViewGroup vgTab = (ViewGroup) vg.getChildAt(j); int tabChildsCount = vgTab.getChildCount(); for (int i = 0; i < tabChildsCount; i++) { View tabViewChild = vgTab.getChildAt(i); if (tabViewChild instanceof TextView) { ((TextView) tabViewChild).setTypeface(typeFaceFont); } } } 

最后但并非最不重要的是，在您的相关.xml文件中，为您的tabTextColor和tabSelectedTextColor设置颜色：

 <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="horizontal" android:background="@color/colorPrimaryDark" app:tabSelectedTextColor="@color/colorAccent" app:tabTextColor="@color/textColorPrimary" app:tabIndicatorColor="@color/colorAccent" app:tabMode="fixed" app:tabGravity="fill"/> </android.support.design.widget.AppBarLayout> 

并在colors.xml中：

 <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="colorHighlight">#FFFFFF</color> <color name="textColorPrimary">#E1E3F3</color> </resources> 

Answer 6

检查下面的代码。 自定义您的图标一个是彩色的，另一个是没有颜色的。

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/mybookings_select" android:state_selected="true"/><!-- tab is selected(colored icon)--> <item android:drawable="@drawable/mybookings" /><!-- tab is not selected(normal no color icon)--> 

Answer 7

“突出显示”图标的一种可能的方式是访问图像视图并设置颜色filter。 尝试使用setColorFilter（int color）ImageView方法并应用白色。

Answer 8

关于第二个解答如何分开设置颜色的答案，很多人可能会想知道如何在切换到下一个图标的时候去掉第一个图标的颜色。 你可以做的是这样的：

 private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); tabLayout.getTabAt(3).setIcon(tabIcons[3]); tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN); tabLayout.getTabAt(1).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN); tabLayout.getTabAt(2).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN); tabLayout.getTabAt(3).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN); tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { tab.getIcon().setColorFilter(Color.GREEN,PorterDuff.Mode.SRC_IN); } @Override public void onTabUnselected(TabLayout.Tab tab) { //for removing the color of first icon when switched to next tab tablayout.getTabAt(0).getIcon().clearColorFilter(); //for other tabs tab.getIcon().clearColorFilter(); } @Override public void onTabReselected(TabLayout.Tab tab) { } });} 

我会评论第二个答案，但没有足够的声誉！ 抱歉。 但请遵循，你会节省你的时间和头痛！ 快乐的学习