Android Studio：在 TabItem 内的图标上设置色调

Question

我在带有图标按钮的菜单中使用 TabLayout。是否可以通过 XML 在可绘制对象中为图标着色？

android:tint 不适用于 TabItem 元素。

Answer 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.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 2

如果您想通过 XML 设置色调，有一种方法。是 TabItem 的自定义布局，通过属性 android:layout:

设置

<android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_drawable"
        android:layout="@layout/custom_tab" />

其中 custom_tab 布局为：

<?xml version="1.0" encoding="utf-8"?>
<com.view.TintableImageView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:tint_color="@color/red" />

您可以找到 TintableImageView 的来源 here。

如果您想为不同的选择器状态使用不同的图标颜色，这种方法为您提供了灵活性，只需创建颜色选择器文件并将其设置为色调颜色即可

app:tint_color="@color/selector_tab"

Answer 3

我找到了一个更简单的解决方案，在布局文件中将此属性添加到 TabLayout:

app:tabIconTint="@color/desired_color_or_selector"

如果你想保留颜色状态（enable/disable/selected）给它一个像这样的颜色选择器：

<?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="@color/colorPrimary" android:state_focused="true" />
    <item android:color="@color/enabled_color" android:state_enabled="true" />
    <item android:color="@color/disabled_color" />
</selector>

Android Studio：在 TabItem 内的图标上设置色调

Android Studio: Set Color Tint on Icon within a TabItem

android

menu

tint

menuitem

imageicon