原文出處：http://segmentfault.com/a/1190000003038675
本文轉(zhuǎn)自:談?wù)凙ndroid Material Design 中的Tint（著色） - 泡在網(wǎng)上的日子
什么是Tint
當(dāng)我開始接觸Tint這個詞的時候，其實是蠻不理解它的意思的，以及并不清楚Google發(fā)明它的目的，它一般搭配Background配合使用，但是現(xiàn)在已經(jīng)有了Background，為什么還需要Tint呢？
Tint 翻譯為著色。
著色，著什么色呢？和背景有關(guān)，當(dāng)然是著背景的色。當(dāng)我開發(fā)客戶端，使用了appcompat-v7包的時候，為了實現(xiàn)Material Design的效果，我們會去設(shè)置主題里的幾個顏色，重要的比如primaryColor，colorControlNormal，colorControlActived?等等，而我們使用的一些組件，比如EditText就會自動變成我們想要的背景顏色，在背景圖只有一張的情況下，這樣的做法極大的減少了我們apk包的大小。
實現(xiàn)的方式就是用一個顏色為我們的背景圖片設(shè)置tint（著色）。
例子：
看看即將發(fā)布的SegmentFault for Android 2.7中，發(fā)布問題功能，這個EditText的顏色和我們的主要顏色相同。它利用了TintManager這個類，為自己的背景進行著色（綠色）。
那么這個原始圖是什么樣子呢？我們從appcompat-v7包中找到了這個圖，是一個.9圖，樣子如下：
其實它只是一個黑色的條，通過綠色的著色，變成了一個綠色的條。 就是這樣的設(shè)計方式，使得我們在Material Design中省了多少資源文件呀！
好了，既然理解了tint的含義，我們趕緊看下這一切是如何實現(xiàn)的吧。
其實底層特別簡單，了解過渲染的同學(xué)應(yīng)該知道PorterDuffColorFilter這個東西，我們使用SRC_IN的方式，對這個Drawable進行顏色方面的渲染，就是在這個Drawable中有像素點的地方，再用我們的過濾器著色一次。
實際上如果要我們自己實現(xiàn)，只用獲取View的backgroundDrawable之后，設(shè)置下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，如果想了解這個屬性相關(guān)的資料，這里是傳送門：http://blog.csdn.net/t12x3456/article/details/10432935（中文）
由于API Level 21以前不支持background tint在xml中設(shè)置，于是提供了ViewCompat.setBackgroundTintList方法和ViewCompat.setBackgroundTintMode用來手動更改需要著色的顏色，但要求相關(guān)的View繼承TintableBackgroundView接口。
源碼解析
看下源碼是如何實現(xiàn)的吧，我們以AppCompatEditText為例：
看下構(gòu)造函數(shù)（省略無關(guān)代碼）
public?AppCompatEditText(Context?context,?AttributeSet?attrs,?int?defStyleAttr)?{
super(TintContextWrapper.wrap(context),?attrs,?defStyleAttr);
...
ColorStateList?tint?=?a.getTintManager().getTintList(a.getResourceId(0,?-1));//根據(jù)背景的resource?id獲取內(nèi)置的著色顏色。
if(tint?!=null)?{
setInternalBackgroundTint(tint);//設(shè)置著色
}
...
}
private?void?setInternalBackgroundTint(ColorStateList?tint)?{
if(tint?!=null)?{
if(mInternalBackgroundTint?==null)?{
mInternalBackgroundTint?=newTintInfo();
}
mInternalBackgroundTint.mTintList?=?tint;
mInternalBackgroundTint.mHasTintList?=true;
}else{
mInternalBackgroundTint?=null;
}
//上面的代碼是記錄tint相關(guān)的信息。
applySupportBackgroundTint();//對背景應(yīng)用tint
}
private?void?applySupportBackgroundTint()?{
if(getBackground()?!=null)?{
if(mBackgroundTint?!=null)?{
TintManager.tintViewBackground(this,?mBackgroundTint);
}elseif(mInternalBackgroundTint?!=null)?{
TintManager.tintViewBackground(this,?mInternalBackgroundTint);//最重要的，對tint進行應(yīng)用
}
}
}
然后我們進入tintViewBackground看下TintManager里面的源碼
public?static?void?tintViewBackground(View?view,?TintInfo?tint)?{
final?Drawable?background?=?view.getBackground();
if(tint.mHasTintList)?{
//如果設(shè)置了tint的話，對背景設(shè)置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設(shè)置了colorFilter?完成了我們要的功能。
d.setColorFilter(filter);
}
以上是對API21以下的兼容。
如果我們要實現(xiàn)自己的AppCompat組件實現(xiàn)tint的一些特性的話，我們就可以指定好ColorStateList，利用TintManager對自己的背景進行著色，當(dāng)然需要對外開放設(shè)置的接口的話，我們還要實現(xiàn)TintableBackgroundView接口，然后用ViewCompat.setBackgroundTintList進行設(shè)置，這樣能完成對v7以上所有版本的兼容。
實例
比如我現(xiàn)在要對一個自定義組件實現(xiàn)對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;
}
}
趕快去試試吧~
