Android ColorFilter and Tint

概述

關於Android ColorFilter 和 Tint之間的關系一直混淆不清。兩者均是對顯示的圖片進行著色或者過濾。

ColorFilter: 色彩過濾
Tint: 著色

從英文原意上來講，似乎有些相似，而從實際的效果來講也是一致的。Android 向導文檔似乎對此也是一筆帶過，不願深入，讓人有些摸不著頭腦：

With Android 5.0 (API level 21) and above, you can tint bitmaps and nine-patches defined as alpha masks. You can tint them with color resources or theme attributes that resolve to color sources (for example, ?android:attr/colorPrimary). Usually, you create these assets only once and color them automatically to match your theme.

You can apply a tint to BitmapDrawable or NinePatchDrawable objects with the setTint() method. You can also set the tint color and mode in your layouts with the android:tint and android:tintMode attributes.

這段文字講述的大意是：Tint 是 API 21之後才添加的功能，可以對BitmapDrawable和 NinePatchDrawable 應用Tint 效果。使用tint效果可以省去我們為不同theme創建同一張圖片的多個版本的麻煩。緊接著第二段講道如何使用tint, 有兩種方法：

1 調用函數：

 class Drawable {
     ...
     public void setTint (int tint);                       //Added in API 21
     public void setTintMode (PorterDuff.Mode tintMode);   //Added in API 21
     ...
}

2 XML Layout:

drawable file location: res/drawable/tintedrawable.xml

layout file location: res/layout/layout_main.xml

ImageView and Tint

class ImageView {

    public final void setColorFilter (int color, PorterDuff.Mode mode); //Added in API 1
    public void setImageTintList (ColorStateList tint);                 //Added in API 21
    public void setImageTintMode (PorterDuff.Mode tintMode);            //Added in API 21

}

除了 ImageView 可以繼續使用setColorFilter(int, PorterDuff.Mode), API 21 也給ImageView　添加了setImageTintList(), setImageTintMode(), android:tint, android:tintMode 等特性！

首先我們看一個Sample, 給一個ImageView　使用這三種不同方法來著色。

    @Override
    public View onCreateView(LayoutInflater inflater,
         ViewGroup container, Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.tinting_fragment, null);

        mImage1 = (ImageView) v.findViewById(R.id.image1);

        mImage2 = (ImageView) v.findViewById(R.id.image2);

        updateTint( Color.argb(0xFF, 0x67, 0x3A, 0xB7),
            PorterDuff.Mode.MULTIPLY );
    }

    public void updateTint(int color, PorterDuff.Mode mode) {
        mImage1.setColorFilter(color, mode);
        mImage2.setImageTintList(ColorStateList.valueOf(color));
        mImage2.setImageTintMode(mode);
    }

從上圖可以看到，　其實對於ImageView　不管采用何種方法，其最終的結果都是一樣的。

我們看到ImageView.setImageTintList(ColorStateList) 實際上是接受一個ColorStateList參數，上面我們android:tint=#673AB7的tint值是一個單一的顏色，如果改成ColorStateList那效果如何呢？<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoNCBpZD0="1-rescolorcustomtintxml">1 res/color/custom_tint.xml

2 res/layout/layout_main.xml

當點擊最下面的ImageView　的時候，　顏色並沒有隨著狀態的改變而改變。接著我們再把ImageView　改成ImageButton:

Drawable and Tint

文檔裡面明確講明了tint的引入是為了對Drawable 進行著色支持。至少對於BitmapDrawable和 NinePatchDrawable 文檔明確指明了支持 android:tint 和 android:tintMode 屬性。這樣的話我們對於android:tint的屬性的支持就很容易從ImageView擴展到任何View, 只要將View的android:background指向我們自定義的drawable:

1 res/drawable/tintedrawable.xml

2 res/layout/layout_main.xml

但是和上面的問題一樣，使用這種方法不支持多狀態的情形。而如果我們將xml layout 中的View 改成ImageButton並且將android:background 改成android:src問題就解決了：　

系統原生的支持當然更好，期待讀者能夠提供更好的方法。