版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。
本文純個人學習筆記，由于水準有限，難免有所出錯，有發現的可以交流一下。
一、概述
Palette 是一個類似調色闆的工具類，根據傳入的 Bitmap，提取出主體顔色，使得圖檔和顔色更加搭配，界面更協調。
Palette 可以從一張圖檔中提取顔色，我們可以把提取的顔色融入到 App UI 中，可以使 UI 風格更加美觀融洽。比如，我們可以從圖檔中提取顔色設定給 ActionBar 做背景顔色，這樣 ActionBar 的顔色就會随着顯示圖檔的變化而變化。
二、Demo
這個比較簡單，直接上 demo 看使用和效果。
MainActivity：
public class MainActivity extends AppCompatActivity {
TextView t1;
TextView t2;
TextView t3;
TextView t4;
TextView t5;
TextView t6;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
t1 = (TextView) findViewById(R.id.t1);
t2 = (TextView) findViewById(R.id.t2);
t3 = (TextView) findViewById(R.id.t3);
t4 = (TextView) findViewById(R.id.t4);
t5 = (TextView) findViewById(R.id.t5);
t6 = (TextView) findViewById(R.id.t6);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.f);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
//發生主線程 Palette調色闆 總共六種顔色
@Override
public void onGenerated(Palette palette) {
//柔和而暗的顔色
int darkMutedColor = palette.getDarkMutedColor(Color.BLUE);
//鮮豔和暗的顔色
int darkVibrantColor = palette.getDarkVibrantColor(Color.BLUE);
//亮和鮮豔的顔色
int lightVibrantColor = palette.getLightVibrantColor(Color.BLUE);
//亮和柔和的顔色
int lightMutedColor = palette.getLightMutedColor(Color.BLUE);
//柔和顔色
int mutedColor = palette.getMutedColor(Color.BLUE);
//鮮豔顔色
int vibrantColor = palette.getVibrantColor(Color.BLUE);
t1.setBackgroundColor(darkMutedColor);
t2.setBackgroundColor(darkVibrantColor);
t3.setBackgroundColor(lightVibrantColor);
t4.setBackgroundColor(lightMutedColor);
t5.setBackgroundColor(mutedColor);
t6.setBackgroundColor(vibrantColor);
}
});
}
}
擷取 Palette 的六種顔色，分别給不同 TextView 設定背景顔色。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="darkMutedColor"
android:minHeight="40dp"
android:gravity="center"
android:layout_marginTop="10dp"
android:layout_alignParentTop="true"
/>
<TextView
android:id="@+id/t2"
android:layout_below="@+id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="darkVibrantColor"
android:minHeight="40dp"
android:gravity="center"
android:layout_marginTop="10dp"
/>
<TextView
android:id="@+id/t3"
android:layout_below="@+id/t2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="lightVibrantColor"
android:minHeight="40dp"
android:gravity="center"
android:layout_marginTop="10dp"
/>
<TextView
android:layout_below="@+id/t3"
android:id="@+id/t4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="lightMutedColor"
android:minHeight="40dp"
android:gravity="center"
android:layout_marginTop="10dp"
/>
<TextView
android:layout_below="@+id/t4"
android:id="@+id/t5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mutedColor"
android:minHeight="40dp"
android:gravity="center"
android:layout_marginTop="10dp"
/>
<TextView
android:layout_below="@+id/t5"
android:id="@+id/t6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="vibrantColor"
android:minHeight="40dp"
android:gravity="center"
android:layout_marginTop="10dp"
/>
</RelativeLayout>
</ScrollView>
效果：
原圖 f（即提取顔色的來源）：
三、詳解
1.構造方法
我們需要通過一個 Bitmap 對象來生成一個對應的 Palette 對象。 Palette 提供了四個靜态方法用來生成對象。
Palette generate(Bitmap bitmap)
Palette generate(Bitmap bitmap, int numColors)
generateAsync(Bitmap bitmap, PaletteAsyncListener listener)
generateAsync(Bitmap bitmap, int numColors, final PaletteAsyncListener listener)
不難看出，生成方法分為 generate (同步)和 generateAsync (異步)兩種，如果圖檔過大使用 generate 方法，可能會阻塞主線程，我們更傾向于使用 generateAsync 的方法，其實内部就是建立了一個AsyncTask。generateAsync 方法需要一個 PaletteAsyncListener 對象用于監聽生成完畢的回調。除了必須的 Bitmap 參數外，還可以傳入一個 numColors 參數指定顔色數，預設是 16。
2.擷取顔色
得到Palette對象後，就可以拿到提取到的顔色值
Palette.getVibrantSwatch()
Palette.getDarkVibrantSwatch()
Palette.getLightVibrantSwatch()
Palette.getMutedSwatch()
Palette.getDarkMutedSwatch()
Palette.getLightMutedSwatch()
3.使用顔色
上面get方法中傳回的是一個 Swatch 樣本對象，這個樣本對象是 Palette 的一個内部類，它提供了一些擷取最終顔色的方法。
getPopulation(): 樣本中的像素數量
getRgb(): 顔色的RBG值
getHsl(): 顔色的HSL值
getBodyTextColor(): 主體文字的顔色值
getTitleTextColor(): 标題文字的顔色值
通過 getRgb() 可以得到最終的顔色值并應用到 UI 中。getBodyTextColor() 和 getTitleTextColor() 可以得到此顔色下文字适合的顔色，這樣很友善我們設定文字的顔色，使文字看起來更加舒服。
四、MaterialDesign
到這邊 MaterialDesign 的幾個控件都學完了，把前面内容整合起來就可以開發一下比較炫酷的界面了。
效果：
代碼連結：
代碼連結：http://download.csdn.net/download/qq_18983205/10132915