<七>Drawables的使用(一)

以下從三個方面進行介紹Drawables：

* Drawable tinting （着色）
* Prominent color extraction（顔色提取）
* Vector drawables（矢量圖檔）
           

Tint Drawable Resources

以下部分介紹轉自：http://segmentfault.com/a/1190000003038675?utm_source=tuicool&utm_medium=referral

什麼是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 = new PorterDuffColorFilter(color, mode);

}

d.setColorFilter(filter); d.setColorFilter(filter); 由于API Level 21以前不支援background
           

tint在xml中設定（android:tint和android:tintMod），于是提供了ViewCompat.setBackgroundTintList方法和ViewCompat.setBackgroundTintMode用來手動更改需要着色的顔色，但要求相關的View繼承TintableBackgroundView接口。

TintMode的類型有以下16種：

1.PorterDuff.Mode.CLEAR 所繪制不會送出到畫布上。

2.PorterDuff.Mode.SRC 顯示上層繪制圖檔

3.PorterDuff.Mode.DST 顯示下層繪制圖檔

4.PorterDuff.Mode.SRC_OVER 正常繪制顯示，上下層繪制疊蓋。

5.PorterDuff.Mode.DST_OVER 上下層都顯示。下層居上顯示。

6.PorterDuff.Mode.SRC_IN 取兩層繪制交集。顯示上層。

7.PorterDuff.Mode.DST_IN 取兩層繪制交集。顯示下層。

8.PorterDuff.Mode.SRC_OUT 取上層繪制非交集部分。

9.PorterDuff.Mode.DST_OUT 取下層繪制非交集部分。

10.PorterDuff.Mode.SRC_ATOP 取下層非交集部分與上層交集部分

11.PorterDuff.Mode.DST_ATOP 取上層非交集部分與下層交集部分

12.PorterDuff.Mode.XOR 異或：去除兩圖層交集部分

13.PorterDuff.Mode.DARKEN 取兩圖層全部區域，交集部分顔色加深

14.PorterDuff.Mode.LIGHTEN 取兩圖層全部，點亮交集部分顔色

15.PorterDuff.Mode.MULTIPLY 取兩圖層交集部分疊加後顔色

16.PorterDuff.Mode.SCREEN 取兩圖層全部區域，交集部分變為透明色

從圖像中提取顔色（Palette）

Android Support Library r21 r21 及更高版本提供了Palette 類，以便我們從圖像提取顔色，主要的顔色類型有以下六種：

* vibrant(鮮豔色)
* dark vibrant(鮮豔色中的暗色)
* light vibrant(鮮豔色中的亮色)
* muted(柔和色)
* dark muted(柔和色中的暗色)
* light muted(柔和色中的亮色)    
           

###使用：

1.首先需要添加依賴：

dependencies {
    ...
    compile 'com.android.support:palette-v7:21.0.0'
}
           

2.建立示例

• 同步方法（盡量避免在主線程中使用）：

• 異步方法（在異步線程中執行完之後通過監聽器回調）

// Asynchronous
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 });
           

3.擷取顔色

• 通過提供的getter函數直接擷取以上提及的六種類型顔色：

Palette palette = Palette.from(bitmap).generate();
      int vibrant = palette.getVibrantColor();
      int vibrantLight = palette.getLightVibrantColor();
      //提取失敗則傳回指定的顔色：0x000000
      ......
           

• 通過Swatch對象提取（Swatch裡面含有很多關于對應顔色的有用資訊）

Palette palette = Palette.from(bitmap).generate();
   Palette.Swatch swatch = palette.getVibrantSwatch();
   //rgb顔色值
   int rgbColor = swatch.getRgb();
   //hsl顔色向量
   float[] hslValues = swatch.getHsl();
   //該顔色在圖像中所占的像素數
   int pixelCount = swatch.getPopulation();
   //對應的标題字型顔色
   int titleTextColor = swatch.getTitleTextColor();
   //對應的正文字型顔色
   int bodyTextColor = swatch.getBodyTextColor();
           

4：來自網上的一張demo示例圖：

矢量圖檔（Vector Drawables）

見下一章