Android如何为PNG图片设置setColorFilter实现折线下方区域填充色

方案1：修改原始drawable（推荐） #

你当前使用的R.drawable.btc_spike仅包含折线图层，直接修改该drawable资源，在折线下方新增半透明填充层，原始填充色设置为浅中性色即可。你原有setColorFilter的逻辑无需修改，PorterDuff.Mode.MULTIPLY模式会自动将你设置的红色/绿色同时叠加到折线和填充区域，自动生成对应颜色的半透明填充效果，和你预期的效果完全匹配，性能最优也不需要额外修改业务代码。

方案2：双图层叠加实现（无需修改原有drawable） #

在布局中嵌套FrameLayout，放置两层ImageFilterView分别控制折线和填充：

<FrameLayout
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:layout_marginRight="2dp">
    <!-- 填充层 -->
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/sparkline_fill"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/btc_spike_fill"
        app:saturation="80"
        app:brightness="0.85"
        app:warmth="10"/>
    <!-- 原有折线层 -->
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/sparkline"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/btc_spike"
        app:saturation="80"
        app:brightness="0.85"
        app:warmth="10"/>
</FrameLayout>

你需要额外准备一个仅包含折线下方填充区域的drawable资源btc_spike_fill，代码侧同步调整：

// 填充层设置半透明对应颜色，红色示例用透明度40的红色值
sparkline_fill.setColorFilter(Color.parseColor("#40FF0000"), PorterDuff.Mode.SRC_IN);
// 折线层保持原有逻辑不变
sparkline.setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
sparkline.setImageResource(R.drawable.btc_spike);

方案3：矢量图动态分区着色 #

如果你的btc_spike是vector矢量资源，直接在矢量文件中为折线和填充区域分别定义不同的tint属性别名，代码中可以直接分别控制两个区域的颜色，不需要叠加图层，性能表现也很好。

内容的提问来源于stack exchange，提问作者Maduro