簡(jiǎn)介
Palette 即調(diào)色板。從圖片中提取顏色故源,然后賦給相應(yīng)的視圖污抬,使界面看起來(lái)更加協(xié)調(diào)好看。
簡(jiǎn)單使用
首先添加相應(yīng)的依賴
implementation 'com.android.support:palette-v7:26.0.0'
Android Studio 3.0 開(kāi)始新建項(xiàng)目默認(rèn)使用 implementation 了心软,當(dāng)然 compile 也能用壕吹。
我們給 Layout 文件添加一個(gè) ImageView 和 6 個(gè) View。ImageView 是用來(lái)放圖片來(lái)提取顏色的删铃,提取的顏色分別放到準(zhǔn)備的 6 個(gè) View 中耳贬。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/colorPrimary"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.teletian.palette.MainActivity">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/naruto" />
<View
android:id="@+id/color1"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="5dp" />
<View
android:id="@+id/color2"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="5dp" />
<View
android:id="@+id/color3"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="5dp" />
<View
android:id="@+id/color4"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="5dp" />
<View
android:id="@+id/color5"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="5dp" />
<View
android:id="@+id/color6"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_marginTop="5dp" />
</LinearLayout>
接下來(lái)就是在 Activity 中提取,先上代碼如下:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView image = findViewById(R.id.image);
Bitmap bitmap = ((BitmapDrawable)image.getDrawable()).getBitmap();
Palette.Builder builder = Palette.from(bitmap);
builder.generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//充滿活力的樣本
Palette.Swatch swath1 = palette.getVibrantSwatch();
if (swath1 != null) {
findViewById(R.id.color1).setBackgroundColor(swath1.getRgb());
}
//充滿活力的暗色樣本
Palette.Swatch swath2 = palette.getDarkVibrantSwatch();
if (swath2 != null) {
findViewById(R.id.color2).setBackgroundColor(swath2.getRgb());
}
//充滿活力的亮色樣本
Palette.Swatch swath3 = palette.getLightVibrantSwatch();
if (swath3 != null) {
findViewById(R.id.color3).setBackgroundColor(swath3.getRgb());
}
//柔和的樣本
Palette.Swatch swath4 = palette.getMutedSwatch();
if (swath4 != null) {
findViewById(R.id.color4).setBackgroundColor(swath4.getRgb());
}
//柔和的暗色樣本
Palette.Swatch swath5 = palette.getDarkMutedSwatch();
if (swath5 != null) {
findViewById(R.id.color5).setBackgroundColor(swath5.getRgb());
}
//柔和的亮色樣本
Palette.Swatch swath6 = palette.getLightMutedSwatch();
if (swath6 != null) {
findViewById(R.id.color6).setBackgroundColor(swath6.getRgb());
}
}
});
}
}
Palette 對(duì)象的生成有兩種方法猎唁,例子中的是異步生成咒劲,還可以同步生成,代碼如下:
Palette.Builder bulider = Palette.from(bitmap);
Palette palette = bulider.generate();
推薦使用異步诫隅,尤其是圖片大小比較大的時(shí)候腐魂。
提取顏色提供了 6 中不同的顏色,詳見(jiàn)代碼注釋逐纬。
除了提取 rgb 顏色蛔屹,還可以提取其他信息:
getTitleTextColor():返回適合標(biāo)題的顏色
getBodyTextColor():返回適合文本內(nèi)容的顏色
getTitleTextColor():返回float[],可以進(jìn)行修改豁生,后使用ColorUtils工具類進(jìn)行轉(zhuǎn)換
getPopulation():返回像素的總數(shù)
運(yùn)行效果如下:
可以發(fā)現(xiàn)下面 6 中顏色只有 5 中顏色顯示出來(lái)了兔毒,其中 "充滿活力的暗色樣本" 沒(méi)有顯示。也就是說(shuō) Palette 獲取的樣本是可能沒(méi)有值的甸箱。但是 "充滿活力的樣本" 和其他不一樣育叁,始終有值。
使用場(chǎng)景
Palette 到底實(shí)際應(yīng)用中有什么用呢芍殖,下面通過(guò)一個(gè)例子來(lái)展示一下其中一種使用場(chǎng)景豪嗽。
先來(lái)看下效果:
ViewPager 滑動(dòng)的時(shí)候,根據(jù)圖片的顏色,改變 StatusBar龟梦,Toolbar隐锭,TabLayout,NavigationBar 的顏色变秦。
Palette 的基本使用既然已經(jīng)在上文中講解過(guò)了成榜,這邊就不再啰嗦了。
例子中使用到了 Toolbar 和 TabLayout蹦玫,如果不熟悉的話,可以參照我之前寫(xiě)的文章↓
Android Material Design 之 Toolbar
Android Material Design 之 TabLayout
所以直接看源碼吧刘绣!
源碼
基本使用
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/Palette
ViewPager 滑動(dòng)改變顏色
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/PaletteWithViewPager