以编程方式更改VectorDrawable中一个路径的颜色

时间:2017-07-12 14:23:33

标签: android

是否有可能以编程方式更改整个SVG / VectorDrawable对象中的一个路径?

我看到了一些针对小型VectorDrawables的解决方案,其中包括在路径上添加其他颜色的新xml文件(VectorDrawables)。

我想避免这种情况,因为我正在使用具有30条路径的大型VectorDrawable(带骨骼的骨架图像),并且我想要更改在点击时选择的精确路径(骨骼)的颜色(当然,我不会&#39 ; t想要添加30个不同的xml文件到drawable)。

在这种情况下,有没有可以帮助我的解决方案/库?

示例照片:

https://i.stack.imgur.com/Qj9CL.png

https://i.stack.imgur.com/YaHZU.png

1 个答案:

答案 0 :(得分:1)

我知道这个问题很旧,但是也许有人认为答案很有用。是的,您可以动态地为vectorDrawables着色特定的路径。但这不是那么简单。您将必须在vectorDrawables路径中使用主题属性,如下所示:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
    android:fillColor="?attr/colorIconPrimaryAlpha"
    android:pathData="M13.17,6l-0.59,-0.59L11.17,4L6,4v12h16L22,6h-8.83zM17.5,10.5L21,15L7,15l4.5,-6 3.5,4.51 2.5,-3.01z" />
<path
    android:fillColor="?attr/colorPrimary"
    android:pathData="M2,6L0,6v5h0.01L0,20c0,1.1 0.9,2 2,2h18v-2L2,20L2,6zM7,15h14l-3.5,-4.5 -2.5,3.01L11.5,9zM22,4h-8l-2,-2L6,2c-1.1,0 -1.99,0.9 -1.99,2L4,16c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L24,6c0,-1.1 -0.9,-2 -2,-2zM22,16L6,16L6,4h5.17l1.41,1.41 0.59,0.59L22,6v10z" />

注意我们如何为路径着色:

android:fillColor="?attr/colorPrimary"

在适当的位置上,您可以定义自己的应用程序主题并将它们仅应用于单个vectorDrable。在您的情况下,您可以定义要单独绘制的骨架部分的主题。假设您在styles.xml文件中定义了这个主题:

    <style name="IconHighlightedTheme" parent="MyAppTheme">
    <item name="colorPrimary">@color/green</item>
    <item name="colorIconPrimaryAlpha">@color/green_transparent</item>
</style>

然后从您的代码中,您可以轻松地将主题应用于vectorDrawable:

private fun changeSingleIconTheme(imageView: ImageView, @DrawableRes drawableId: Int) {
    val wrapper = ContextThemeWrapper(this, R.style.IconHighlightedTheme)
    val drawable = ResourcesCompat.getDrawable(resources, drawableId, wrapper.theme)
    imageView.setImageDrawable(drawable)

}

就是这样。现在,您可以无缝地为每个路径动态着色。只需为每种颜色组合定义一个新主题。

如果您想查看完整的示例代码,我有一个开源的github存储库:https://github.com/JorgeMucientes/assetsPlayground

还有一个中等的帖子,我会更深入地解释它: https://medium.com/makingtuenti/managing-your-android-app-iconography-a2f4aa9cb49d

希望它可以帮助某人! ;)