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