天天看點

Google Palette 1 -介紹以及使用

  1. Palette 簡介

    Google Palette 是一個用來提取圖檔平均顔色的工具

    最常用的做法就是根據封面來設定詳情頁面的title 顔色

    例如:

    Google Palette 1 -介紹以及使用

在這個例子裡,可以看到,使用了視訊圖檔的主要的兩個顔色作為title 背景和簡介文字的背景

2. Palette 使用

首先先添加依賴

如果你用的是support-v7 的

implementation 'com.android.support:palette-v7:24.2.1'
           

如果是androidX 的

implementation "androidx.palette:palette:1.0.0"
           

Palette 使用,有同步和異步兩種模式,因為會涉及解析圖檔的問題,是以遇到大圖檔或者低性能機,有可能會用更多時間去處理。是以建議使用異步方式去解析

eg:其中resource 是一個Bidmap 對象,是以如果是網絡圖檔的話,需要自己去用Glide 等工具下載下傳後使用

異步:

Palette.from(resource).generate { palette ->
                   //do SomeThing
                }
           

同步:

val palette = Palette.from(resource).generate()
                //do someThing
           

通過以上兩種方式都可以擷取到的Palette 對象

通過getXX 方法可以擷取到以下各種模式的 Palette.Swatch 對象

*     Vibrant //豔麗
 *     Vibrant Dark //豔麗暗色
 *     Vibrant Light //豔麗亮色
 *     Muted //柔和
 *     Muted Dark // 柔和暗色
 *     Muted Light //柔和亮色
           

然後getRGB 就可以擷取到我們一般使用的顔色值

eg: 示例圖,我所使用的是,title > darkVibrantSwatch ,text > darkMutedSwatch 參考比較一下

  1. 注意問題

    在擷取Swatch 時有一定幾率會擷取到null ,是以防止空指針時注意要判空處理

  2. 完整代碼
Palette.from(resource).generate { palette ->
    //擷取到合适顔色Swatch
    var vibrantTitle = palette?.darkVibrantSwatch
    var vibrantbody = palette?.darkMutedSwatch

    //當為空時,擷取解析到的第一位作為備選
    if (vibrantTitle == null && palette?.swatches?.size != 0) {
        vibrantTitle = palette?.swatches?.get(0)
    }
    if (vibrantbody == null && palette?.swatches?.size != 0) {
        vibrantbody = palette?.swatches?.get(0)
    }
    //設定顔色
    vibrantTitle?.let {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.statusBarColor = vibrantTitle.rgb
            app_bar.setBackgroundColor(vibrantTitle.rgb)
        }
    }
    vibrantbody?.let {
        ll_root.setBackgroundColor(vibrantbody.rgb)
    }
}