2016-01-02 184 views
39

我使用的TabLayoutViewPager,我想知道如何最有效地改变TabLayout中选定选项卡的图标的颜色。如何更改TabLayout选定选项卡的图标颜色?

这是如何实现的完美参考是谷歌的Youtube应用。在主页面上,有四个深灰色的图标。当选择特定的选项卡时,选项卡的图标变为白色。

没有任何第三方库,我该如何达到相同的效果?

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

EDIT

,我提到的正上方,需要为每个标签的图标使用两个可绘的溶液。我想知道是否有办法以ONE为每个标签的图标绘制。

+0

如果它是特定于IDE的,请仅使用'android-studio'标记。 – Sufian

+0

@WayWay是否为这个问题找到了解决方案?我也在寻找同样的东西。 – Raju

回答

1

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

+0

是的,但我们如何在选择标签时访问imageview – Erum

8

对于它你将不得不使用定制类选择为每个标签像标签图标:

<?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" /> 

+0

那么这种方法与问题中描述的方法相同吗?我必须为布局中每个选项卡的图标(每种颜色之一)找到两个可绘制的图标?准确地说是 – wayway

+0

。欲了解更多信息,请使用代码编辑您的问题。 –

3

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

<?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)--> 

3

你为什么不使用图标字体(如字体真棒)为您的图标?然后将标签文本的字体更改为您希望的字体图标.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); 
    } 

那么你应该更改标签的字体字体真棒:

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> 
+0

图标字体在某些设备上不起作用。请谨慎使用。 – shanks

57

我找到了一种方法,可以很容易。

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

可以告诉我试图按照相同的方式,但不幸的是,我的onTabSelected没有被调用,而它的调用viewpager.setOnPageChangeListener – Erum

+0

我不知道为什么onTabSelected没有被调用,但我可以推荐你做一个代码调试,以知道在哪里是问题。如果你一定没有发现这个错误,我想你可以用setOnPageChangeListener来实现,但是这可能比较困难。 –

+0

setOnTabSelectedListener is deprecated,Use addOnTabSelectedListener –

29
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) { 

     } 
    }); 
} 
+0

İt在开始bt时工作得很好,当您关闭并打开应用程序时,首先ona会以您提供的颜色开始。 – Sam

+0

为了防止这种情况,您可以在调用onBackButton()方法时调用viewPager实例上的'setCurrentItem(0)',并且当用户尝试从应用程序退出时总是返回第一个片段。 –

+0

你可以使用tab.getIcon()。clearColorFilter();删除过滤器 –

24

可以使用ColorStateList。

首先,创建一个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(支持库)也可以支持旧版本。

就是这样!

+4

这是迄今为止最好的解决方案,因为它并不意味着要手动更改图标颜色 – xleon

+0

图标变为空 – ashraful

+0

@Felix在Github中是否有任何工作代码? – Raju

1

关于第二个解答如何单独设置颜色的答案,很多人可能会想知道如何在切换到下一个图标时去除第一个图标的颜色。你可以做的是这样的:

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

    } 
});} 

我会在第二个答案评论,但并未有足够的声誉!抱歉。但请按照您的要求节省时间和头痛!快乐学习

相关问题