【问题标题】:How do I change the color of icon of the selected tab of TabLayout?如何更改 TabLayout 选定选项卡的图标颜色?
【发布时间】:2016-04-06 08:26:45
【问题描述】:

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

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

没有任何第三方库,如何才能达到同样的效果?

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

编辑

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

【问题讨论】:

  • 如果android-studio标签特定于IDE,请只使用它。
  • 你能找到一种方法来解决这个问题吗?只使用一个drawable?我也遇到了同样的问题。

标签: java android material-design android-tablayout


【解决方案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);
                }
            }
    );

【讨论】:

  • 你能告诉我我试图遵循同样的方式,但不幸的是我的 onTabSelected 在调用 viewpager.setOnPageChangeListener 时没有被调用
  • 我不知道为什么没有调用 onTabSelected,但我可以建议您进行代码调试以了解问题所在。如果您绝对没有发现错误,我猜您可以使用 setOnPageChangeListener 实现相同的效果,但它可能更难做到。
  • setOnTabSelectedListener 已弃用,使用 addOnTabSelectedListener
  • 嗨,我正在使用 customView 进行选项卡布局,但无法更改图标的颜色和使用 customView 选择选项卡时查看背景颜色?知道我会怎么做吗?
【解决方案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>

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

【讨论】:

  • if (Build.VERSION.SDK_INT >= 23) { 它可以工作 } else { stackoverflow.com/a/36161252/8072092 }
  • @joonsoo 它适用于低于 23 的版本。我正在使用低至 API 19 的项目。
  • 您在哪里/如何设置将改变颜色的图标?我使用“app:tabBackground="@drawable/tab_selector"”,这不适用于颜色变化。
  • 对我来说 state_enabled 有效,但 state_selected 没有
【解决方案3】:
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) {

        }
    });
}

【讨论】:

  • 当您关闭并首先打开应用程序时,它在开始时工作正常,并且以您提供的颜色开始。
  • 为了防止这种情况,您可以在调用onBackButton() 方法时从活动中调用viewPager 实例上的setCurrentItem(0),并且当用户尝试退出应用程序时,将始终在第一个片段上返​​回。跨度>
  • 你可以使用 tab.getIcon().clearColorFilter();删除过滤器
  • setOnTabSelectedListener 已弃用。请改用 addOnTabSelectedListener。 developer.android.com/reference/android/support/design/widget/…
【解决方案4】:

您可以使用 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(不推荐使用没有主题的方法,但对于 Marshmallow 之前的设备是必需的)。然后为每个选项卡的图标将 TintList 设置为 ColorStateList;使用 DrawableCompat(支持库)来支持旧版本。

就是这样!

【讨论】:

  • 这是迄今为止最好的解决方案,因为它并不意味着手动更改图标颜色
  • 我没有,但你只需要在初始化 TabLayout(名为tabLayout)之后在你的活动的 onCreate(..) 方法中插入后面的代码。
  • 我们可以将它应用到 svg 图标文件吗?
  • 您根本不能在 Android 中使用 svg(没有额外的库),但我的解决方案也适用于 Android Vector Drawables(具有类似 svg 的优点)。
  • 您的解决方案有效,但不适用于 android 23 以下,所有选项卡最终都具有相同的颜色,并且它是非活动颜色。有什么想法或解决方法吗??
【解决方案5】:

为此,您必须使用每个选项卡的选择器类自定义选项卡图标,例如:

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

【讨论】:

  • 那么用这个方法,和问题中描述的一样吗?我必须为布局中的每个选项卡图标找到两个可绘制对象(每种颜色之一)?
  • 完全正确。如需更多说明,请使用代码编辑您的问题。
【解决方案6】:

res &gt; colors目录下添加:

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

在xml标签视图中添加代码:

app:tabIconTint="@color/selector_tab"

【讨论】:

【解决方案7】:

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

那你应该把 Tab 标题的字体改成 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.TabLayout>

在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>

【讨论】:

  • 图标字体在某些设备上不起作用。请谨慎使用。
【解决方案8】:

检查以下代码。自定义您的图标,一个是彩色的,另一个是无色的。

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

【讨论】:

    【解决方案9】:

    在参考显示如何单独设置颜色的第二个答案时,许多人可能想知道如何在切换到下一个图标时删除第一个图标的颜色。你可以这样做:

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

    我会评论第二个答案,但没有足够的声誉!对不起。但请遵循,你会节省你的时间和你的头痛!快乐学习

    【讨论】:

      【解决方案10】:

      你可以使用addOnTabSelectedListener,它对我有用。

      tablayout = findViewById(R.id.viewall_tablayout);
      pager = findViewById(R.id.viewall_pager);
      adapter = new ViewPagerAdapter(getSupportFragmentManager());
      adapter.addFragments(new RestFragment(),"Restaurant");
      adapter.addFragments(new BarFragment(),"Bar");
      adapter.addFragments(new HotelFragment(),"Hotel");
      adapter.addFragments(new CoffeeFragment(),"Coffee Shop");
      pager.setAdapter(adapter);
      tablayout.setupWithViewPager(pager);
      
      tablayout.getTabAt(0).setIcon(R.drawable.ic_restaurant);
      tablayout.getTabAt(1).setIcon(R.drawable.ic_glass_and_bottle_of_wine);
      tablayout.getTabAt(2).setIcon(R.drawable.ic_hotel_black_24dp);
      tablayout.getTabAt(3).setIcon(R.drawable.ic_hot_coffee);
      
      tablayout.getTabAt(0).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
      tablayout.getTabAt(1).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
      tablayout.getTabAt(2).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
      tablayout.getTabAt(3).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
      tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
          @Override
          public void onTabSelected(TabLayout.Tab tab) {
              tab.getIcon().setTint(getResources().getColor(R.color.colorPrimary,getTheme()));
          }
      
          @Override
          public void onTabUnselected(TabLayout.Tab tab) {
              tab.getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
          }
      
          @Override
          public void onTabReselected(TabLayout.Tab tab) {
      
          }
      });
      

      【讨论】:

        【解决方案11】:

        为了改变色调,即使你可以设置与你的可绘制标签图标相同的颜色

           <com.google.android.material.tabs.TabLayout
                        android:id="@+id/tabs"
                        android:background="@color/bgFrag"
                        android:layout_width="match_parent"
                        android:layout_height="?actionBarSize"
                        android:layout_gravity="bottom"
                        app:tabGravity="fill"
                        app:tabTextColor="@drawable/tab_search_text_clr"
                        app:tabIconTintMode="multiply"
                        app:tabIconTint="#ffffff"
                        app:tabIndicator="@null"
                        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                        app:tabInlineLabel="true"
                        app:tabMode="fixed" >
        
                    </com.google.android.material.tabs.TabLayout>
        

        tab_search_text_clr.xml

        <?xml version="1.0" encoding="utf-8" ?>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_checked="true" android:color="#ffffff"/>  <!-- checked -->
            <item android:state_selected="true" android:color="#ffffff"/>  <!-- checked -->
            <item android:color="#acacac"/><!-- anything else -->
        </selector>
        

        【讨论】:

          【解决方案12】:

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

          【讨论】:

          • 是的,但是我们如何在选择选项卡时访问 imageview
          【解决方案13】:

          tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {...} 已被弃用。宁可使用

          tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
                  @Override
                  public void onTabSelected(TabLayout.Tab tab) {
                      int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                      tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                  }
          
                  @Override
                  public void onTabUnselected(TabLayout.Tab tab) {
                      int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                      tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                  }
          
                  @Override
                  public void onTabReselected(TabLayout.Tab tab) {
          
                  }
              });
          

          【讨论】:

            【解决方案14】:

            ColorStateList 只有两个条目:android.R.attr.state_selected 和默认通配符。这些可以定义,例如。 src/main/res/xml/tab_layout_color_state.xml:

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

            那么R.xml.tab_layout_color_state可以作为ColorStateList应用:

            private void applyColorStateList(@NonNull TabLayout tabLayout, int resId) {
                tabLayout.setTabIconTint(requireContext().getColorStateList(resId));
            }
            

            【讨论】:

              【解决方案15】:

              我知道这有点老了,但我只是面临同样的问题,而且这里的答案似乎已经过时了。

              使用颜色状态列表并将其直接添加到 TabLayout XML 元素中

              鉴于下面的 tab_icon.xml 文件:-

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

              还有 TabLayout XML 元素(注意 tabIconTint 属性)

              <com.google.android.material.tabs.TabLayout
                      android:id="@+id/favourites_selectionTL"
                      android:layout_width="0dp"
                      android:layout_height="wrap_content"
                      app:layout_constraintEnd_toEndOf="parent"
                      app:layout_constraintStart_toStartOf="parent"
                      app:layout_constraintTop_toTopOf="parent"
                      app:tabIconTint="@color/tab_icon"
                      app:tabIndicatorColor="@color/colorPrimary"
                      app:tabInlineLabel="true"
                      app:tabSelectedTextColor="@color/colorPrimary" />
              

              就是这样。

              【讨论】:

                【解决方案16】:

                使用 here 中的 ColorStateList 扩展我的首选答案,如果您使用自定义选项卡,则可以使用以下解决方案。

                在活动的 xml 中设置标签

                 ...
                
                <android.support.design.widget.TabLayout
                    android:id="@+id/main_tablayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                
                    <android.support.design.widget.TabItem
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout="@layout/nav_bar_tab_item"/>
                
                    <android.support.design.widget.TabItem
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout="@layout/nav_bar_tab_item"/>
                </android.support.design.widget.TabLayout>
                
                ...
                

                以及自定义标签布局nav_bar_item.xml

                <?xml version="1.0" encoding="utf-8"?>
                <android.support.constraint.ConstraintLayout
                android:id="@+id/nav_bar_item_layout"
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingEnd="@dimen/_5sdp"
                android:paddingStart="@dimen/_5sdp">
                
                <ImageView
                    android:id="@+id/item_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>
                
                <TextView
                    android:id="@+id/item_description"
                    android:layout_width="wrap_content"
                    android:gravity="center"
                
                <!-- Use selector here to change the text color when selected/unselected -->
                    android:textColor="@color/nav_bar_icons_color"
                
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/item_img"/>
                
                </android.support.constraint.ConstraintLayout>
                

                在你的活动中

                    tabLayout = findViewById(R.id.main_tablayout);
                
                    ConstraintLayout navMyHotelLayout = (ConstraintLayout) tabLayout.getTabAt(0)
                            .getCustomView();
                    tab1Icon = navMyHotelLayout.findViewById(R.id.item_img);
                    tab1TextView = navMyHotelLayout.findViewById(R.id.item_description);
                
                    tab1Icon.setImageResource(R.drawable.ic_tab1);
                
                    // Use the selector here to change the color when selected/unselected
                    tintImageViewSelector(tab1Icon, R.color.nav_bar_icons_color);
                
                    tab1TextView.setText("tab 1");
                
                    ConstraintLayout navTtdLayout = (ConstraintLayout) tabLayout.getTabAt(1)
                            .getCustomView();
                    tab2Icon = navTtdLayout.findViewById(R.id.item_img);
                    tab2View = navTtdLayout.findViewById(R.id.item_description);
                
                    tab2Icon.setImageResource(R.drawable.ic_tab2);
                    tintImageViewSelector(tab2Icon, R.color.nav_bar_icons_color);
                    tab2TextView.setText("tab 2");
                

                并添加这些帮助函数来改变颜色

                public static void tintDrawableSelector(Drawable vd, final @ColorRes int clrRes, Context context) {
                
                    DrawableCompat.setTintList(vd, ContextCompat.getColorStateList(context, clrRes));
                }
                
                public static void tintImageViewSelector(ImageView imgView, final @ColorRes int clrRes, Context context) {
                
                    tintDrawableSelector(imgView.getDrawable(), clrRes);
                }
                

                最后是选择器 nav_bar_icons_color.xml

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

                【讨论】:

                  【解决方案17】:

                  检查以下代码:

                  tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                      @Override
                      public void onTabSelected(TabLayout.Tab tab) {
                          if(tab.getPosition() == 0){
                              tabLayout.getTabAt(0).setIcon(tabIcons1[0]);
                          }
                          if(tab.getPosition() == 1){
                              tabLayout.getTabAt(1).setIcon(tabIcons1[1]);
                          }
                          if(tab.getPosition() == 2){
                              tabLayout.getTabAt(2).setIcon(tabIcons1[2]);
                          }
                      }
                      @Override
                      public void onTabUnselected(TabLayout.Tab tab) {
                          tabLayout.getTabAt(0).setIcon(tabIcons[0]);
                          tabLayout.getTabAt(1).setIcon(tabIcons[1]);
                          tabLayout.getTabAt(2).setIcon(tabIcons[2]);
                      }
                      @Override
                      public void onTabReselected(TabLayout.Tab tab) {
                      }
                  });
                  

                  【讨论】:

                  • 这不适用于 Theme.MaterialComponents.DayNight 等 Material 主题
                  【解决方案18】:

                  您可以使用以下选项卡布局的 xml 属性更改所选选项卡的文本颜色:

                  app:tabSelectedTextColor="your desired color"
                  

                  要自定义所选标签的图标颜色,您需要使用选择器 在drawable文件夹下创建一个xml文件:

                  <?xml version="1.0" encoding="utf-8"?>
                  <selector xmlns:android="http://schemas.android.com/apk/res/android">
                     <item android:color="selected_item_color" android:state_activated="true" />
                     <item android:color="unselected_item_color" />
                  </selector> 
                  

                  并将此选择器添加到选项卡布局 xml 属性中,如下所示:

                  app:tabIconTint="@drawable/name_of_file"
                  

                  【讨论】:

                  • 不起作用。除了不工作,如果你的 name_of_file 是 drawable/name_of_file.xml,你应该把它标记为这样,否则你会让读者猜你的意思。
                  • name_of_file 是向读者指示他们自己的可绘制文件的名称。
                  【解决方案19】:

                  分别执行以下步骤。

                  app/src/main/res/values/colors.xml(添加到colors.xml)

                  <color name="icon_enabled">#F3D65F</color>
                  <color name="icon_disabled">#FFFFFF</color>
                  

                  app/src/main/res/color/custom_tab_icon.xml(在res中创建一个名为color的文件夹。在该文件夹中创建一个自定义选项卡icon.xml。)

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

                  app/src/main/res/drawable/ic_action_settings.png(创建)

                  双击action_settings进行添加

                  <vector xmlns:android="http://schemas.android.com/apk/res/android"
                  android:width="24dp"
                  android:height="24dp"
                  android:viewportWidth="21.6"
                  android:viewportHeight="21.6"
                  android:tint="@color/custom_tab_icon">
                  <group android:translateX="-1.2"
                    android:translateY="-1.2">
                    <path
                        android:fillColor="#FF000000"
                   android:pathData="M19.1,12.9a2.8,2.8 0,0 0,0.1 -0.9,2.8 2.8,0 0,0 -0.1,-0.9l2.1,-1.6a0.7,0.7 0,0 0,0.1 -0.6L19.4,5.5a0.7,0.7 0,0 0,-0.6 -0.2l-2.4,1a6.5,6.5 0,0 0,-1.6 -0.9l-0.4,-2.6a0.5,0.5 0,0 0,-0.5 -0.4H10.1a0.5,0.5 0,0 0,-0.5 0.4L9.3,5.4a5.6,5.6 0,0 0,-1.7 0.9l-2.4,-1a0.4,0.4 0,0 0,-0.5 0.2l-2,3.4c-0.1,0.2 0,0.4 0.2,0.6l2,1.6a2.8,2.8 0,0 0,-0.1 0.9,2.8 2.8,0 0,0 0.1,0.9L2.8,14.5a0.7,0.7 0,0 0,-0.1 0.6l1.9,3.4a0.7,0.7 0,0 0,0.6 0.2l2.4,-1a6.5,6.5 0,0 0,1.6 0.9l0.4,2.6a0.5,0.5 0,0 0,0.5 0.4h3.8a0.5,0.5 0,0 0,0.5 -0.4l0.3,-2.6a5.6,5.6 0,0 0,1.7 -0.9l2.4,1a0.4,0.4 0,0 0,0.5 -0.2l2,-3.4c0.1,-0.2 0,-0.4 -0.2,-0.6ZM12,15.6A3.6,3.6 0,1 1,15.6 12,3.6 3.6,0 0,1 12,15.6Z"/>
                  </group>
                  </vector>
                  

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-06-04
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2013-09-25
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多