Android：如何在一个矢量图形的XML中使用选择器更改android:fillcolor？

Question

选项卡图标：我的现有方法是创建两个文件（ic_list_selected_24dp.xml和ic_list_unselected_24dp.xml；它们基本相同，但只有android:fillColor='Color HEX CODE'不同），然后创建一个选择器（selector_tabitem_list.xml）在状态改变时更改可绘制颜色。

// @drawable/selector_tabitem_list.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:drawable="@drawable/ic_list_selected_24dp" 
        android:state_selected="true" />
    <item android:drawable="@drawable/ic_list_unselected_24dp" 
        android:state_selected="false" />
</selector>

由于两个可绘制对象相同，因此有点重复。

矢量可绘制对象中无法使用选择器。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="@drawable/selector"
        android:pathData="M19,3...."
</vector>

--

// @drawable/selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <color android:color="@color/itemSelected" />
    </item>
    <item android:state_selected="false">
        <color android:color="@color/itemUnselected" />
    </item>
</selector>

并且不要翻译android:fillColor="@color/state"。

// @color/state

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_selected="true" />
    <item android:color="@android:color/black" android:state_selected="false" />
</selector>

有没有办法使用一个Drawable并动态更改它的颜色？使用硬编码十六进制代码是否更好？谢谢。

- cmingmai

---

你可以尝试在视图中使用 android:drawableTint。 - VishnuSP

谢谢你的建议，但我在选项卡图标中使用了这种情况。仍然使用android:drawableTint吗？它似乎在更高版本（>=23）中可用。'android:drawableTint'和'android:Tint'之间有什么区别？ - cmingmai

我找到了解决方案。我在向量标签中添加了android:tint="@color/tab_state"。 - cmingmai

https://dev59.com/FFoV5IYBdhLWcg3wEbW-#36886237 - cmingmai

Answer 1

以下是使用矢量资源作为支持设计库中的TabItem（选项卡）中的色调图标的完整步骤列表。所有步骤都包含在原始问题和链接答案中，但很容易被忽略。

1. 创建选择器。请注意，它必须针对state_selected切换颜色（正如问题中所述，但不在@cmingmai提供的答案中。那里只说明了android：state_enabled，这与选项卡无关）：

res/color/selector_navigation.xml:

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

2. 通过向矢量图标签添加 android:tintMode 和 android:tint 来调整矢量可绘制对象的颜色。此外，为了使混合着色生效，路径的 fillColor 需要设置为 白色！

res/drawable/ic_tab_list:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="24dp"
        android:width="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0"
        android:tintMode="multiply"
        android:tint="@color/selector_navigation">
    <path
        android:fillColor="@android:color/white"
        android:pathData="..." />
</vector>

3. 可以在布局中使用矢量图形，或者像选项卡的开发人员指南所示，在代码中创建选项卡。请注意，我还修改了选项卡指示器的颜色，以匹配活动图标的颜色，遵循材料设计准则。

布局的相关部分：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@android:color/white">

    <android.support.design.widget.TabItem
        android:id="@+id/tabItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/ic_tab_list" />
    <!-- More Tabs -->
</android.support.design.widget.TabLayout>

4. 根据以下内容调整 build.gradle 来激活旧版 Android 设备的矢量图支持（如果之前没有添加）：

   android { defaultConfig { vectorDrawables.useSupportLibrary = true } }

- sunadorer

---

确保您的最终小部件中没有android:tint。这个解决方案对我在带有app:srcCompat的ImageButton上起作用。 - BlackCath

你实际上可以在tabLayout中看到图标，而无需通过编程将它们添加进去吗？我无法让这些XML TabItems显示图标。 - galaxigirl

@galaxigirl 是的，我不需要在其他地方添加图标。抱歉，我无法再从这个项目中获取访问权限了。但是我认为该活动仅添加了适配器/监听器来处理选项卡更改时的内容切换。我记不清楚布局预览是否有效，但当运行时肯定有效。如果你遇到问题最好自己提问。可能有很多不同的原因。例如，你的选项卡栏是否看起来像只有图标或文本？也许图标颜色设置为背景？或者再次检查如何设置可绘制的“选择器”，如果需要状态的话。 - sunadorer

这似乎与androidX appcompat:1.1.0很好地配合使用。只需将矢量可绘制对象中的fillcolor设置为白色，然后在imageview本身上应用android:tint选择器可绘制对象即可。使其非常灵活。 - Peterdk

Answer 2

升级到Support Library 28.0.0+（假设对于androidx也是一样的..没有测试）。

在Support Library 28.0.0上，使用选择器颜色xml资源作为矢量图的android:fillColor似乎现在可以正常工作。

事实上，以前的解决方案（使用矢量图的android:tintMode、android:tint和白色的android:fillColor）在我使用Support Library 28.0.0时不再起作用。

在API 21和27模拟器上进行了测试。

- Jimmy Alexander

---

我尝试使用androidX appcompat:1.1.0，但它不起作用。将fillcolor设置为白色，然后在imageview中添加android:tint可以解决问题。 - Peterdk

Answer 3

尝试在style.xml中将AppTheme替换为不同的父级，例如：

- Mitch