单击时以编程方式更改矢量资产的颜色

Question

我创建了以下向量资产并将其插入到Imagebutton中。

我曾经希望心脏在单击时将其颜色更改为红色，而在再次单击时将变为透明。

我找不到任何描述如何改变整个心脏颜色的地方。我找到的最接近的解决方案是：

    ibWhishlist.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ibWhishlist.setColorFilter(getResources().getColor(R.color.colorRed));
        }
    });

但是，它仅改变心脏的边界，而不改变整个形状。

谢谢

SOLUTION：

最终，我用来解决此问题的方法如下：

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

以及我的代码内：

ibWhishlist.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ibWhishlist.setSelected(!ibWhishlist.isSelected());
        if (ibWhishlist.isSelected()) {
            //Handle selected state change
        } else {
            //Handle de-select state change
        }
    }
});

Answer 1

解决此问题的最简单方法，如果要在运行时更改填充/描边颜色或描边宽度之类的小事，就是两个具有相同矢量图像的两个版本，但存在这种差异，例如，其中一个仅具有描边颜色，另一个填充：

ic_heart_stroked.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:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"
            android:strokeWidth="1"
            android:strokeColor="#000" />
</vector>

ic_heart_filled.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:fillColor="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

然后在您的代码中，当用户单击时在两个文件之间切换：

  ibWhishlist.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               ibWhishlist.setImageResource(R.drawable.ic_heart_filled);
            }
        });

另一种方法是使用一个现成的库。RichPathAnimator最好的库之一，它支持在运行时更改矢量的颜色，笔触宽度，甚至为矢量图形制作动画。

如何使用？首先，将库依赖项添加到您的应用程序build.gradle中。然后在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="heartPath1"
            android:fillColor="#00000000"
            android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"
            android:strokeWidth="1"
            android:strokeColor="#000" />
</vector>

在您的布局中，将Imagebutton替换为com.richpath.RichPathView，并且在vector属性内将您的向量资源传递到该标记中：

<com.richpath.RichPathView
        android:id="@+id/heartView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:vector="@drawable/ic_heart" />

在您的Activity中获得对richpathview的引用，然后调用findRichPathByName(YOUR_PATH_NAME)

RichPathView heartView = findViewById(R.id.heartView);
//Providing the path name that you add to your vector,
//in our example it's 'heartPath1'.
RichPath path= heartView.findRichPathByName("heartPath1");
//Set on heart path click listener.
path.setOnPathClickListener(new RichPath.OnPathClickListener() {
       @Override
       public void onClick(RichPath richPath) {
       //Change the path color.
       richPath.setFillColor(Color.RED);
       //Change stroke width to zero.
       richPath.setStrokeWidth(0);
    }
});

如果不想使用RichPathView而不是ImageView或ImageButton，并且想要更改矢量路径中的某些内容，请考虑使用VectorChildFinder。

Answer 2

通过编程，您可以更改矢量图标的颜色，但只能使用一种颜色。因为在您的情况下，心脏图标填充了背景色，所以这就是您的代码更改图标边框的原因。

您可以采用2个可绘制的向量来解决问题（只是一种可能性）

您也可以检查此链接，How to change color of vector drawable path on button click