如何在按钮单击时更改矢量可绘制路径的颜色

With the new android support update, vector drawables get backward compatibility. I have a vector image with various paths. I want the color of the paths to change on click of a button or programmatically based on an input value. Is it possible to access the name parameter of the vector path? And then change the color.

随着新的Android支持更新,矢量drawables获得向后兼容性。我有一个带有各种路径的矢量图像。我希望路径的颜色在单击按钮时更改,或者根据输入值以编程方式更改。是否可以访问矢量路径的name参数?然后改变颜色。

7 个解决方案

#1

Use this to change a path color in your vector drawable

使用此选项可更改矢量drawable中的路径颜色

VectorChildFinder vector = new VectorChildFinder(this, R.drawable.my_vector, imageView);

VectorDrawableCompat.VFullPath path1 = vector.findPathByName("path1");
path1.setFillColor(Color.RED);

Library is here: https://github.com/devsideal/VectorChildFinder

图书馆在这里:https://github.com/devsideal/VectorChildFinder

#2

The color of the whole vector can be changed using setTint.

可以使用setTint更改整个矢量的颜色。

You have to set up your ImageView in your layout file as this:

您必须在布局文件中设置ImageView,如下所示:

<ImageView
    android:id="@+id/myImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@color/my_nice_color"
    android:src="@drawable/ic_my_drawable"
    android:scaleType="fitCenter" />

Then to change the color of your image:

然后更改图像的颜色:

DrawableCompat.setTint(myImageView.getDrawable(), ContextCompat.getColor(context, R.color.another_nice_color));

Note: myImageView.getDrawable() gives nullpointerexception if the vector drawable is set to the imageView as background.

注意:如果向量drawable设置为imageView作为背景,则myImageView.getDrawable()给出nullpointerexception。

#3

You can use this method to change color in lower API to change vector color in fragment

您可以使用此方法更改较低API中的颜色以更改片段中的矢量颜色

int myVectorColor = ContextCompat.getColor(getActivity(), R.color.colorBlack);
                    myButton.getIcon().setColorFilter(myVectorColor, PorterDuff.Mode.SRC_IN);

in place of getActivity you should use MainActivity.this for changing vector color in activity

代替getActivity,你应该使用MainActivity.this来改变活动中的矢量颜色

#4

Check my answer on this other question: https://*.com/a/38418049/1335438.

在另一个问题上查看我的答案:https://*.com/a/38418049/1335438。

It is a great idea on how to manage this by using Themes and parameterizing the paths in order to be able to set them dynamically.

如何通过使用主题和参数化路径来管理它是一个很好的主意,以便能够动态设置它们。

#5

You can change the color of individual path at runtime, without using reflection.

您可以在运行时更改单个路径的颜色,而无需使用反射。

VectorMaster introduces dynamic control over vector drawables. Each and every aspect of a vector drawable can be controlled dynamically (via Java instances), using this library.

VectorMaster引入了对矢量绘图的动态控制。可以使用此库动态地(通过Java实例)控制矢量drawable的每个方面。

Just add the following dependency in your app's build.gradle

只需在应用程序的build.gradle中添加以下依赖项

dependencies {
    compile 'com.sdsmdg.harjot:vectormaster:1.0.9'
}

In your case you need a simple color change:

在您的情况下,您需要一个简单的颜色变化:

Vector example: your_vector.xml

矢量示例:your_vector.xml

<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:name="outline"
    android:pathData="M20.84,4..."
    android:strokeColor="#5D5D5D"
    android:fillColor="#00000000"
    android:strokeWidth="2"/>

XML:

<com.sdsmdg.harjot.vectormaster.VectorMasterView
    android:id="@+id/your_vector"
    android:layout_width="150dp"
    android:layout_height="150dp"
    app:vector_src="@drawable/your_drawable" />

Java:

VectorMasterView heartVector = (VectorMasterView) 
findViewById(R.id.your_drawable);

// find the correct path using name
PathModel outline = heartVector.getPathModelByName("outline");

// set the stroke color
outline.setStrokeColor(Color.parseColor("#ED4337"));

// set the fill color (if fill color is not set or is TRANSPARENT, then no fill is drawn)
outline.setFillColor(Color.parseColor("#ED4337"));

From: https://github.com/harjot-oberai/VectorMaster, licensed under MIT.

来自:https://github.com/harjot-oberai/VectorMaster,在麻省理工学院获得许可。

You have now full control over vector drawables.

您现在可以完全控制矢量绘图。

#6

There are several ways of doing the same stuff, but this works for both Vector Drawables as well as SVG (Local/Network).

有几种方法可以做同样的事情,但这适用于Vector Drawables和SVG(Local / Network)。

imageView.setColorFilter(ContextCompat.getColor(context, 
R.color.headPink), android.graphics.PorterDuff.Mode.SRC_IN);

(change R.color.headPink with color of your choice)

(使用您选择的颜色更改R.color.headPink)

#7

As stated by @Eyal in this post https://*.com/a/32007436/4969047

正如@Eyal在本文中所述,https://*.com/a/32007436/4969047

You cannot change the color of individual path at runtime. Looking at the source code of VectorDrawableCompat, the only method to expose the inner element by name is getTargetByName which is present in inner private state class VectorDrawableCompatState of VectorDrawableCompat.

您无法在运行时更改单个路径的颜色。查看VectorDrawableCompat的源代码,通过名称公开内部元素的唯一方法是getTargetByName,它存在于VectorDrawableCompat的内部私有状态类VectorDrawableCompatState中。

Since it is a package private (default) - you can't use it (unless you use reflection).

由于它是一个包私有(默认) - 你不能使用它(除非你使用反射)。

#1