良好的視覺設計對成功的應用程式至關重要,色彩配置是設計的主要元件。Palette 程式庫是 Jetpack 程式庫,可從圖片中擷取醒目色彩,進而建立引人入勝的應用程式。
您可以使用 Palette 程式庫設計版面配置的主題,以及為應用程式中的視覺元素套用自訂顏色。舉例來說,您可以使用調色盤,根據專輯封面為歌曲建立顏色協調的片名資訊卡,或在背景圖片變更時調整應用程式的工具列顏色。Palette
物件可讓您存取 Bitmap
圖片中的顏色,同時提供點陣圖中的六個主要色彩設定檔,協助您做出設計選擇。
設定程式庫
如要使用 Palette 程式庫,請將以下內容新增至 build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Groovy
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
建立調色盤
Palette
物件可讓您存取圖片中的主要顏色,以及疊加文字的對應顏色。使用調色盤設計應用程式的樣式,並根據指定的來源圖片動態變更應用程式的色彩配置。
如要建立調色盤,請先從 Bitmap
將 Palette.Builder
執行個體化。接著,您可以使用 Palette.Builder
自訂調色盤,然後再產生調色盤。本節說明如何從點陣圖圖片產生及自訂調色盤。
產生 Palette 執行個體
使用其 from(Bitmap bitmap)
方法產生 Palette
例項,先從 Bitmap
建立 Palette.Builder
。
建構工具可以同步或非同步產生調色盤。如要在與呼叫方法相同的執行緒上建立調色盤,請使用同步調色盤產生功能。如果您以非同步方式產生區塊面板,請在其他執行緒上,使用 onGenerated()
方法在建立調色盤後立即存取調色盤。
以下程式碼片段提供這兩種調色盤產生方式的範例方法:
Kotlin
// Generate palette synchronously and return it. fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate() // Generate palette asynchronously and use it on a different thread using onGenerated(). fun createPaletteAsync(bitmap: Bitmap) { Palette.from(bitmap).generate { palette -> // Use generated instance. } }
Java
// Generate palette synchronously and return it. public Palette createPaletteSync(Bitmap bitmap) { Palette p = Palette.from(bitmap).generate(); return p; } // Generate palette asynchronously and use it on a different thread using onGenerated(). public void createPaletteAsync(Bitmap bitmap) { Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { // Use generated instance. } }); }
如果您需要持續為經過排序的圖片或物件清單產生區塊面板,請考慮快取 Palette
執行個體,避免 UI 效能緩慢。請勿在主執行緒中建立調色盤。
自訂調色盤
Palette.Builder
可讓您自訂調色盤,包括選擇結果調色盤中的顏色數量、建構工具用來產生調色盤的圖片區域,以及調色盤中包含哪些顏色。例如,您可以過濾掉黑色,或確保建構工具只使用圖片的上半部產生調色盤。
使用下列 Palette.Builder
類別的方法調整調色盤的大小和顏色:
addFilter()
- 這個方法會新增篩選器,指出結果區塊中允許的色彩。傳入自己的
Palette.Filter
並修改isAllowed()
方法,即可從調色盤中篩選哪些顏色。 maximumColorCount()
- 這個方法可設定調色盤的顏色上限。預設值為 16,最佳值則視來源映像檔而定。以橫向來說,最佳值的範圍介於 8 至 16 之間,而有臉孔的圖片通常值介於 24 至 32 之間。
Palette.Builder
需要較長的時間才能產生顏色較多的調色盤。 setRegion()
- 這個方法可指出建構工具在建立調色盤時,使用的點陣圖區域。只有在從點陣圖產生調色盤時,才能使用這個方法,且不會影響原始圖片。
addTarget()
- 這個方法可讓您在建構工具中新增
Target
顏色設定檔,自行執行顏色比對。如果預設的Target
不足,進階開發人員可以使用Target.Builder
建立自己的Target
。
擷取顏色剖析檔
根據 Material Design 標準,Palette 程式庫會從圖片中擷取常用的色彩設定檔。每個設定檔都是由 Target
定義,而從點陣圖圖片中擷取的顏色會根據飽和度、亮度和母體 (在點陣圖中以色彩表示的像素數) 為每個設定檔評分。針對每個設定檔,分數最高的顏色定義了指定圖片的色彩設定檔。
根據預設,Palette
物件包含指定圖片的 16 種主要顏色。產生調色盤時,您可以使用 Palette.Builder
自訂其顏色數量。擷取更多顏色可為每個色彩設定檔提供更多可能相符的結果,但也會導致 Palette.Builder
在產生調色盤時花費較長的時間。
調色盤程式庫會嘗試擷取以下六種色彩設定檔:
- 淺色鮮明
- 繽紛
- 深色鮮明
- 已設為靜音
- 已靜音
- 已設為靜音
Palette
中的每個 get<Profile>Color()
方法都會在與該設定檔相關聯的調色盤中傳回顏色,其中 <Profile>
會替換成六個色彩設定檔的其中一個名稱。舉例來說,取得深色鮮明色彩設定檔的方法為 getDarkVibrantColor()
。所有圖片中並未包含所有顏色設定檔,因此請提供要傳回的預設顏色。
圖 1 顯示了來自 get<Profile>Color()
方法的相片及其對應的色彩設定檔。
使用色票建立色彩配置
Palette
類別也會為每個顏色設定檔產生 Palette.Swatch
物件。Palette.Swatch
物件包含該設定檔的相關顏色,以及顏色的母體 (以像素為單位)。
色票還提供其他方法,以便存取更多有關顏色設定檔的資訊,例如 HSL 值和像素人口。您可以利用 getBodyTextColor()
和 getTitleTextColor()
方法,透過色票建立更全面的色彩配置和應用程式主題。這些方法會傳回適合用於色票顏色的顏色。
Palette
中的每個 get<Profile>Swatch()
方法都會傳回與該特定設定檔相關聯的色票,其中 <Profile>
會替換成六個色彩設定檔的其中一個名稱。雖然調色盤的 get<Profile>Swatch()
方法不需要預設值參數,但如果圖片中沒有該特定設定檔,這些方法就會傳回 null
。因此,請在使用色票前,確認不是空值。舉例來說,以下程式碼會從調色盤取得標題文字顏色 (當 Vibrant Swatch 不是空值時):
Kotlin
val vibrant = myPalette.vibrantSwatch // In Kotlin, check for null before accessing properties on the vibrant swatch. val titleColor = vibrant?.titleTextColor
Java
Palette.Swatch vibrant = myPalette.getVibrantSwatch(); if(vibrant != null){ int titleColor = vibrant.getTitleTextColor(); // ... }
如要存取調色盤中的所有顏色,getSwatches()
方法會傳回從圖片產生的所有樣本清單,包括標準的六種色彩設定檔。
下列程式碼片段使用上述程式碼片段的方法,以同步方式產生區塊面板、取得其鮮豔的樣本,並配合點陣圖圖片變更工具列顏色。圖 2 顯示產生的圖片和工具列。
Kotlin
// Set the background and text colors of a toolbar given a bitmap image to // match. fun setToolbarColor(bitmap: Bitmap) { // Generate the palette and get the vibrant swatch. val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch // Set the toolbar background and text colors. // Fall back to default colors if the vibrant swatch isn't available. with(findViewById<Toolbar>(R.id.toolbar)) { setBackgroundColor(vibrantSwatch?.rgb ?: ContextCompat.getColor(context, R.color.default_title_background)) setTitleTextColor(vibrantSwatch?.titleTextColor ?: ContextCompat.getColor(context, R.color.default_title_color)) } }
Java
// Set the background and text colors of a toolbar given a bitmap image to // match. public void setToolbarColor(Bitmap bitmap) { // Generate the palette and get the vibrant swatch. // See the createPaletteSync() method from the preceding code snippet. Palette p = createPaletteSync(bitmap); Palette.Swatch vibrantSwatch = p.getVibrantSwatch(); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // Load default colors. int backgroundColor = ContextCompat.getColor(getContext(), R.color.default_title_background); int textColor = ContextCompat.getColor(getContext(), R.color.default_title_color); // Check that the Vibrant swatch is available. if(vibrantSwatch != null){ backgroundColor = vibrantSwatch.getRgb(); textColor = vibrantSwatch.getTitleTextColor(); } // Set the toolbar background and text colors. toolbar.setBackgroundColor(backgroundColor); toolbar.setTitleTextColor(textColor); }