Android-使用 SetColorFilter 神奇地改变图片的颜色

川长思鸟来 2022-05-27 02:41 542阅读 0赞

# 无意中 Get 一个新技能 #

公司的移动端应用，最近要换一个 UI 主题色，在更换一个图片控件的选中与未选中效果时，本以为需要 UI 配合给新颜色切图的，然而并不是，直接使用 setColorFilter() 改颜色就好了。

无知的我很开心 get 了一个新技能！

# 这件小事的详情 #

现在，有一个效果展示是这样的，选中某个车型时，显示选中的颜色，是主题色红色。

![aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvNjQ2RDQ4NzY4Q0M1QkFCMjY2MkM5RTI5NUZFOTJDMkUuanBn][]

现在，我们的产品和UI宝宝决定要把主题色改成蓝色，于是选中效果要像下面这样：

![aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvMkQyOTc0RTNCRkM4MDNDOTM5MkVBRjA0MTVBNjY1MzguanBn][]

看项目代码的时候，然后很惊讶的发现图片的原图，是这个样子的：

![aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvZTUzZGZlNjJmNDlhMGVjOWMwYjcxMjQwM2I5MWMzYjEucG5n][]

样式布局：

//UI布局
    <ImageView
        android:id="@+id/icon"
        android:layout_width="85dp"
        android:layout_height="38dp"
        android:layout_marginTop="5dp"
        tools:src="@drawable/icon_carlevel_race"
        android:scaleType="fitCenter" />

代码控制颜色显示：

//定义选中的颜色
    int checkColor = context.getResources().getColor(R.color.theme_red);
    
    //当选中该项时，显示选中颜色，否则显示未选中颜色
    viewHolder.icon.setColorFilter(selectPosition==position? checkColor :Color.TRANSPARENT);

于是针对这个控件改颜色的需求，就只需要修改 `checkColor` 修改成蓝色就好了，这神奇的操作在很明显在于 `setColorFilter` 这个方法，于是我点击进去，看到源码中这个方法的实现。

/**
     * Set a tinting option for the image. Assumes
     * {@link PorterDuff.Mode#SRC_ATOP} blending mode.
     *
     * @param color Color tint to apply.
     * @attr ref android.R.styleable#ImageView_tint
     */
    @RemotableViewMethod
    public final void setColorFilter(int color) {
        setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
    }

注释说明该方法可为 ImageView 设置着色选项。内部实现是调用了该方法的重载方法，默认参数是 `PorterDuff.Mode.SRC_ATOP`,图形混合渲染模型之一,此参数是图片改变颜色实现的重点，下面简单介绍一下。

# PorterDuff.Mode #

PorterDuff，一个陌生的单词，百度翻译和谷歌翻译都查无来处，原因在于它是一个组合词汇，来源于 Tomas Proter（托马斯波特）和 Tom Duff（汤姆达）两个名字。这俩人是在图形混合方面的大神级人物,他们在 1984 年发表了论文，第一次提出了图形混合的概念，也是取了两人的名字命名。

Android PorterDuff.Mode 便是提供了图片的各种混合模式，可以分为两类：

*  Alpha compositing modes（由俩大神的定义，包含 alpha 通道因素）
 *  Blending modes（不是俩大神的作品，不包含 alpha 通道因素）

具体的可以看官方文档对 [PorterDuff.Mode  
][PorterDuff.Mode]的介绍，我这里只说涉及到的 `SRC_ATOP`。

既然混合，两个图片，源图片和目标图片，如下：

![aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvNGM3MWM3ZjhiNjA3YWYyMDY5MDM3MWU2YzEyY2MwZjcucG5n][]

SRC\_ATOP 混合模式效果如下图，只保留源图片和目标图片的相交部分，其他部分舍弃：

![aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvYzVmNmMxNTM4Njk0YWMxMDU3ZWFjOGRhYTRkMjEwOWQucG5n][]

按照上面的示例来对应，那么我们的源图就是蓝色，目标图片是小汽车图案。蓝色和小汽车图案的重合部分，只有线条，所以能达到改变颜色的效果。

那么，就算我们的小汽车图片是任何颜色，都能达到不换图片，改选中颜色的效果。

在这种简单的图片颜色上，合理使用 SetColorFilter() ，可以为 UI 好搭档节省了不少切图工作量，而且，同样能缩小了 APK 的体积。

# 最后 #

接手老项目的迭代开发，是十分奇妙的旅程，谁知道下面等待着的是一个深坑还是华丽的骚操作。

see you next blog ~

--------------------

欢迎关注个人微信公众号「浅浅同学的开发笔记」，最新的博客，好玩的事情，都会在上面分享，期待与你共同成长。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70_pic_center]

[aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvNjQ2RDQ4NzY4Q0M1QkFCMjY2MkM5RTI5NUZFOTJDMkUuanBn]: /images/20220527/6c5736c129634d24b1c74025876bdc34.png
[aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvMkQyOTc0RTNCRkM4MDNDOTM5MkVBRjA0MTVBNjY1MzguanBn]: /images/20220527/c4d9985307094bd89288689803d960ed.png
[aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvZTUzZGZlNjJmNDlhMGVjOWMwYjcxMjQwM2I5MWMzYjEucG5n]: /images/20220527/2866a4b52f19488698cf0bffc154bc8d.png
[PorterDuff.Mode]: https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html
[aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvNGM3MWM3ZjhiNjA3YWYyMDY5MDM3MWU2YzEyY2MwZjcucG5n]: /images/20220527/f9ebd3d88fa142c89193770bf6fc3e17.png
[aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL0RSUHJpbmNlc3MvQmxvZ0ltYWdlcy9tYXN0ZXIvcWluaXUvYzVmNmMxNTM4Njk0YWMxMDU3ZWFjOGRhYTRkMjEwOWQucG5n]: /images/20220527/0e3a3ec012f440f2b29468b225be183a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDUyNjIz_size_16_color_FFFFFF_t_70_pic_center]: /images/20220527/d373e4f5613c4c5a8c126d3d28b7e108.png