Android Tint

如果要实现下图效果,第一时间想到的是让 UI 切图,第二时间想到的是自己会被 UI 打死,第三时间想到的是自己会被命名累死。

那么,这该如何快速高效的实现呢? 其实 Android 已经替我们想好了,那就是 Android Tint。Tint 意为着色器,即给图片上色。这样做的好处就是,你不需要再做一张图片,在 APK 包中最占大小的就是图片了,使用 Tint 可以大大减小包大小。

上图只是在 GridView 中展示 ImageView ,随机生成颜色给原始图片 ic_android_black_24dp 着色而已,资源图片下载自 Android Meterial Icons

这里我们使用 support-v4 包中的 DrawableCompat 来实现着色,核心代码如下:

/**
* 给 drawable 着色
*
* @param drawable 需要着色的 drawable 对象
* @param colors ColorStateList 对象,代表需要着色的颜色
* @return
*/
public static Drawable tintDrawable(Drawable drawable, ColorStateList colors) {
//这里需要对 drawable 对象执行 mutate() 操作
//该操作能防止一个屏幕里多次使用同一个图片,对其中一个图片操作时影响其他图片
//当然,你也可以在getResource().getDrawable()的时候就执行
final Drawable wrappedDrawable = DrawableCompat.wrap(drawable.mutate());
DrawableCompat.setTintList(wrappedDrawable, colors);
return wrappedDrawable;
}

注1:如果使用项目中自带的 ic_launcher.png 使用着色器会使部分细节消失,具体原因不明,留待研究。

注2:ImageView 的 adjustBounds 属性的应用场景有待研究。

如果要实现图片的按压,或者选中效果,同样可以使用 tint 来实现。只需要定义一个 selector.xml 即可

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorAccent" android:state_pressed="true" />
<item android:drawable="@color/colorPrimary" />
</selector>
ImageView image = (ImageView) findViewById(R.id.iv);
Drawable drawable = getResource().getDrawable(R.mipmap.ic_android_black_24dp);
ColorStateList colors = ColorStateList.valueOf(R.drawable.selector);
image.setBackgroundDrawable(tintDrawable(drawable,colors));

具体的点击效果这里就不展示了,大家可以去尝试一下。

Android Tint的更多相关文章

  1. Android Tint着色与帧动画结合

    需求 最近遇到一个需求: 要求根据后台接口给的色值 显示不同色值的帧动画(UI给了三张透明色的图) 正常的帧动画 是配置在xml里三张静态图片 然后加载一下就完事了现有的静态图片是透明的 还没有填充颜 ...

  2. Android 图片着色 Tint 详解

    问题描述 在app中可能存在一张图片只是因为颜色的不同而引入了多张图片资源的情况.比如 一张右箭头的图片,有白色.灰色和黑色三种图片资源存在.所以我们可不可以只保留一张基础图片,在此图片基础上只是颜色 ...

  3. Android 中常见控件的介绍和使用

    1 TextView文本框 1.1 TextView类的结构 TextView 是用于显示字符串的组件,对于用户来说就是屏幕中一块用于显示文本的区域.TextView类的层次关系如下: java.la ...

  4. Android开发之Shape详细解读

    日常开发中,我们会遇到一些Button.Textview...等控件的背景是圆角矩形.圆形...等,和android默认的控件背景矩形不一致,此时shape的作用就体现出来了,我们可以根据shape属 ...

  5. Android动画的理解

    基础知识 在我们开始讲Android动画这个知识点之前,我们了解下相应的基础知识点. Shape篇 一般用Shape定义的XML文件是存放在Drawable目录下,广泛应用于在Button.TextV ...

  6. Android中EditText样式修改 聚焦光标、背景

    在Android开发中,根据项目的需求,需要定制一些特殊的样式,例如:使用EditText时,聚焦时的背景及光标图片使用自定义而非android系统默认的.这两天,在项目中涉及此需求,现记录如下: 首 ...

  7. Android 5.x特性概览五

    上节,介绍Material Design 对阴影效果的实现,这节,我们来介绍Android 5.x的着色与裁剪的特性. Android 5.X 在对图像的操作上增加更多的功能,下面来看看 Androi ...

  8. Android样式的开发:drawable汇总篇

    Android有很多种drawable类型,除了前几篇详细讲解的shape.selector.layer-list,还有上一篇提到的color.bitmap.clip.scale.inset.tran ...

  9. Android ImageView图片自适应 (转)

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

随机推荐

  1. 百度推出新技术 MIP,网页加载更快,广告呢?

    我们在2016年年初推出了MIP,帮助移动页面加速(原理).内测数据表明,MIP页面在1s内加载完成.现在已经有十多家网站加入MIP项目,有更多的网站正在加入中.在我们收到的反馈中,大部分都提到了广告 ...

  2. SQL Server on Linux 理由浅析

    SQL Server on Linux 理由浅析 今天的爆炸性新闻<SQL Server on Linux>基本上在各大科技媒体上刷屏了 大家看到这个新闻都觉得非常震精,而美股,今天微软开 ...

  3. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  4. java基础_集合List与Set接口

    List接口继承了Collection的方法  当然也有自己特有的方法向指定位置添加元素   add(索引,添加的元素); 移除指定索引的元素   remove(索引) 修改指定索引的元素   set ...

  5. Redis链表实现

    链表在 Redis 中的应用非常广泛, 比如列表键的底层实现之一就是链表: 当一个列表键包含了数量比较多的元素, 又或者列表中包含的元素都是比较长的字符串时, Redis 就会使用链表作为列表键的底层 ...

  6. C#数组,List,Dictionary的相互转换

    本篇文章会向大家实例讲述以下内容: 将数组转换为List 将List转换为数组 将数组转换为Dictionary 将Dictionary 转换为数组 将List转换为Dictionary 将Dicti ...

  7. [原] KVM 环境下MySQL性能对比

    KVM 环境下MySQL性能对比 标签(空格分隔): Cloud2.0 [TOC] 测试目的 对比MySQL在物理机和KVM环境下性能情况 压测标准 压测遵循单一变量原则,所有的对比都是只改变一个变量 ...

  8. pandas基础-Python3

    未完 for examples: example 1: # Code based on Python 3.x # _*_ coding: utf-8 _*_ # __Author: "LEM ...

  9. ObserverPattern(观察者模式)

    import java.util.ArrayList; import java.util.List; /** * 观察者模式 * @author TMAC-J * 牵一发而动全身来形容观察者模式在合适 ...

  10. css样式之border-radius

    border-radius 属性设置边框的园角 可能的值:像素,百分比 扩展延伸 html代码 <div></div> css代码 div { height: 200px; w ...