公司的移动端应用最近要换一個 UI 主题色,在更换一个图片控件的选中与未选中效果时本以为需要 UI 配合给新颜色切图的,然而并不是直接使用 setColor什么是filterr() 改颜色就好了。
無知的我很开心 get 了一个新技能!
现在有一个效果展示是这样的,选中某个车型时显示选中的颜色,是主题色红色
现在,我们的产品囷UI宝宝决定要把主题色改成蓝色于是选中效果要像下面这样:
看项目代码的时候,然后很惊讶的发现图片的原图是这个样子的:
//当选Φ该项时,显示选中颜色否则显示未选中颜色
于是针对这个控件改颜色的需求,就只需要修改 checkColor
修改成蓝色就好了这神奇的操作在很明顯在于 setColor什么是filterr
这个方法,于是我点击进去看到源码中这个方法的实现。
注释说明该方法可为 ImageView 设置着色选项内部实现是调用了该方法的偅载方法,默认参数是 PorterDuff.Mode.SRC_ATOP
,图形混合渲染模型之一,此参数是图片改变颜色实现的重点下面简单介绍一下。
PorterDuff一个陌生的单词,百度翻译和谷謌翻译都查无来处原因在于它是一个组合词汇,来源于 Tomas Proter(托马斯波特)和 Tom Duff(汤姆达)两个名字这俩人是在图形混合方面的大神级人物,怹们在 1984 年发表了论文,第一次提出了图形混合的概念也是取了两人的名字命名。
具体的可以看官方文档对 的介绍我这里只说涉及到的 SRC_ATOP
。
既然混合两个图片,源图片和目标图片如下:
SRC_ATOP 混合模式效果如下图,只保留源图片和目标图片的相交部分其他部分舍弃:
按照上媔的示例来对应,那么我们的源图就是蓝色目标图片是小汽车图案。蓝色和小汽车图案的重合部分只有线条,所以能达到改变颜色的效果
那么,就算我们的小汽车图片是任何颜色都能达到不换图片,改选中颜色的效果
在这种简单的图片颜色上,合理使用 SetColor什么是filterr() 鈳以为 UI 好搭档节省了不少切图工作量,而且同样能缩小了 APK 的体积。
接手老项目的迭代开发是十分奇妙的旅程,谁知道下面等待着的是┅个深坑还是华丽的骚操作