【转】谈谈Android Material Design 中的Tint(着色)

原文出处:http://segmentfault.com/a/1190000003038675

本文转自:谈谈Android Material Design 中的Tint(着色) - 泡在网上的日子

什么是Tint

当我开始接触Tint这个词的时候,其实是蛮不理解它的意思的,以及并不清楚Google发明它的目的,它一般搭配Background配合使用,但是现在已经有了Background,为什么还需要Tint呢?

Tint 翻译为着色。

着色,着什么色呢?和背景有关,当然是着背景的色。当我开发客户端,使用了appcompat-v7包的时候,为了实现Material Design的效果,我们会去设置主题里的几个颜色,重要的比如primaryColor,colorControlNormal,colorControlActived 等等,而我们使用的一些组件,比如EditText就会自动变成我们想要的背景颜色,在背景图只有一张的情况下,这样的做法极大的减少了我们apk包的大小。

实现的方式就是用一个颜色为我们的背景图片设置tint(着色)。

例子:

看看即将发布的SegmentFault for Android 2.7中,发布问题功能,这个EditText的颜色和我们的主要颜色相同。它利用了TintManager这个类,为自己的背景进行着色(绿色)。

那么这个原始图是什么样子呢?我们从appcompat-v7包中找到了这个图,是一个.9图,样子如下:

其实它只是一个黑色的条,通过绿色的着色,变成了一个绿色的条。 就是这样的设计方式,使得我们在Material Design中省了多少资源文件呀!

好了,既然理解了tint的含义,我们赶紧看下这一切是如何实现的吧。

其实底层特别简单,了解过渲染的同学应该知道PorterDuffColorFilter这个东西,我们使用SRC_IN的方式,对这个Drawable进行颜色方面的渲染,就是在这个Drawable中有像素点的地方,再用我们的过滤器着色一次。

实际上如果要我们自己实现,只用获取View的backgroundDrawable之后,设置下colorFilter即可。

看下最核心的代码就这么几行

if(filter ==null) {

// Cache miss, so create a color filter and add it to the cache

filter =newPorterDuffColorFilter(color, mode);

}

d.setColorFilter(filter);

通常情况下,我们的mode一般都是SRC_IN,如果想了解这个属性相关的资料,这里是传送门:http://blog.csdn.net/t12x3456/article/details/10432935(中文)

由于API Level 21以前不支持background tint在xml中设置,于是提供了ViewCompat.setBackgroundTintList方法和ViewCompat.setBackgroundTintMode用来手动更改需要着色的颜色,但要求相关的View继承TintableBackgroundView接口。

源码解析

看下源码是如何实现的吧,我们以AppCompatEditText为例:

看下构造函数(省略无关代码)

public AppCompatEditText(Context context, AttributeSet attrs, int defStyleAttr) {

super(TintContextWrapper.wrap(context), attrs, defStyleAttr);

...

ColorStateList tint = a.getTintManager().getTintList(a.getResourceId(0, -1));//根据背景的resource id获取内置的着色颜色。

if(tint !=null) {

setInternalBackgroundTint(tint);//设置着色

}

...

}

private void setInternalBackgroundTint(ColorStateList tint) {

if(tint !=null) {

if(mInternalBackgroundTint ==null) {

mInternalBackgroundTint =newTintInfo();

}

mInternalBackgroundTint.mTintList = tint;

mInternalBackgroundTint.mHasTintList =true;

}else{

mInternalBackgroundTint =null;

}

//上面的代码是记录tint相关的信息。

applySupportBackgroundTint();//对背景应用tint

}

private void applySupportBackgroundTint() {

if(getBackground() !=null) {

if(mBackgroundTint !=null) {

TintManager.tintViewBackground(this, mBackgroundTint);

}elseif(mInternalBackgroundTint !=null) {

TintManager.tintViewBackground(this, mInternalBackgroundTint);//最重要的,对tint进行应用

}

}

}

然后我们进入tintViewBackground看下TintManager里面的源码

public static void tintViewBackground(View view, TintInfo tint) {

final Drawable background = view.getBackground();

if(tint.mHasTintList) {

//如果设置了tint的话,对背景设置PorterDuffColorFilter

setPorterDuffColorFilter(

background,

tint.mTintList.getColorForState(view.getDrawableState(),

tint.mTintList.getDefaultColor()),

tint.mHasTintMode ? tint.mTintMode :null);

}else{

background.clearColorFilter();

}

if(Build.VERSION.SDK_INT <= 10) {

// On Gingerbread, GradientDrawable does not invalidate itself when it's ColorFilter

// has changed, so we need to force an invalidation

view.invalidate();

}

}

private static void setPorterDuffColorFilter(Drawable d, int color, PorterDuff.Mode mode) {

if(mode ==null) {

// If we don't have a blending mode specified, use our default

mode = DEFAULT_MODE;

}

// First, lets see if the cache already contains the color filter

PorterDuffColorFilter filter = COLOR_FILTER_CACHE.get(color, mode);

if(filter ==null) {

// Cache miss, so create a color filter and add it to the cache

filter =newPorterDuffColorFilter(color, mode);

COLOR_FILTER_CACHE.put(color, mode, filter);

}

// 最最重要,原来是对background drawable设置了colorFilter 完成了我们要的功能。

d.setColorFilter(filter);

}

以上是对API21以下的兼容。

如果我们要实现自己的AppCompat组件实现tint的一些特性的话,我们就可以指定好ColorStateList,利用TintManager对自己的背景进行着色,当然需要对外开放设置的接口的话,我们还要实现TintableBackgroundView接口,然后用ViewCompat.setBackgroundTintList进行设置,这样能完成对v7以上所有版本的兼容。

实例

比如我现在要对一个自定义组件实现对Tint的支持,其实只用继承下,加一些代码就好了,代码如下(几乎通用):

public class AppCompatFlowLayout extends FlowLayout implements TintableBackgroundView {

private static final int[] TINT_ATTRS = {

android.R.attr.background

};

private TintInfo mInternalBackgroundTint;

private TintInfo mBackgroundTint;

private TintManager mTintManager;

public AppCompatFlowLayout(Context context) {

this(context,null);

}

public AppCompatFlowLayout(Context context, AttributeSet attributeSet) {

this(context, attributeSet, 0);

}

public AppCompatFlowLayout(Context context, AttributeSet attributeSet, int defStyle) {

super(context, attributeSet, defStyle);

if(TintManager.SHOULD_BE_USED) {

TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attributeSet,

TINT_ATTRS, defStyle, 0);

if(a.hasValue(0)) {

ColorStateList tint = a.getTintManager().getTintList(a.getResourceId(0, -1));

if(tint !=null) {

setInternalBackgroundTint(tint);

}

}

mTintManager = a.getTintManager();

a.recycle();

}

}

private void applySupportBackgroundTint() {

if(getBackground() !=null) {

if(mBackgroundTint !=null) {

TintManager.tintViewBackground(this, mBackgroundTint);

}elseif(mInternalBackgroundTint !=null) {

TintManager.tintViewBackground(this, mInternalBackgroundTint);

}

}

}

@Override

protected void drawableStateChanged() {

super.drawableStateChanged();

applySupportBackgroundTint();

}

private void setInternalBackgroundTint(ColorStateList tint) {

if(tint !=null) {

if(mInternalBackgroundTint ==null) {

mInternalBackgroundTint =newTintInfo();

}

mInternalBackgroundTint.mTintList = tint;

mInternalBackgroundTint.mHasTintList =true;

}else{

mInternalBackgroundTint =null;

}

applySupportBackgroundTint();

}

@Override

public void setSupportBackgroundTintList(ColorStateList tint) {

if(mBackgroundTint ==null) {

mBackgroundTint =newTintInfo();

}

mBackgroundTint.mTintList = tint;

mBackgroundTint.mHasTintList =true;

applySupportBackgroundTint();

}

@Nullable

@Override

public ColorStateList getSupportBackgroundTintList() {

returnmBackgroundTint !=null? mBackgroundTint.mTintList :null;

}

@Override

public void setSupportBackgroundTintMode(PorterDuff.Mode tintMode) {

if(mBackgroundTint ==null) {

mBackgroundTint =newTintInfo();

}

mBackgroundTint.mTintMode = tintMode;

mBackgroundTint.mHasTintMode =true;

applySupportBackgroundTint();

}

@Nullable

@Override

public PorterDuff.Mode getSupportBackgroundTintMode() {

returnmBackgroundTint !=null? mBackgroundTint.mTintMode :null;

}

}

赶快去试试吧~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容