良好的視覺設計是成功應用程式的關鍵,而色彩配置是設計的主要元素。 Palette 程式庫是 Jetpack 從圖片中擷取醒目顏色的程式庫 應用程式。
您可以使用調色盤程式庫設計版面配置主題,並將自訂顏色套用至應用程式中的視覺元素。舉例來說,您可以使用調色盤為歌曲建立色彩協調的標題卡,或在背景圖片變更時調整應用程式的工具列顏色。Palette
物件可讓您存取 Bitmap
圖片中的顏色,同時也提供點陣圖中的六個主要色彩設定檔,以供您進行設計選擇。
設定程式庫
如要使用區塊面板,請將以下內容新增到您的
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
物件可讓您存取圖片中的主色,以及重疊文字的對應顏色。使用調色盤
設計應用程式樣式,並根據 動態變更應用程式的色彩配置
並套用該字詞的物件
如要建立調色盤,請先將
Palette.Builder
來自 Bitmap
。您可以使用 Palette.Builder
自訂色版,然後再產生色版。本節說明如何從點陣圖圖片產生及自訂色版。
產生 Palette 執行個體
使用 Palette
的 from(Bitmap bitmap)
方法產生例項,先從 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
。
擷取色彩設定檔
根據
材質標準
設計,Palette 程式庫會從
圖片。每個設定檔都由 Target
定義,從點陣圖圖片中擷取的顏色會根據飽和度、亮度和人口 (由顏色代表的點陣圖像素數量) 為每個設定檔評分。針對每個設定檔,分數最高的顏色會定義該顏色
圖表說明文字
根據預設,Palette
物件會包含指定圖片的 16 種主要顏色。產生調色盤時
自訂元素數量
Palette.Builder
。擷取更多顏色可為每個色彩設定檔提供更多可能的配對結果,但也會導致 Palette.Builder
在產生調色盤時耗費更多時間。
調色盤程式庫會嘗試擷取下列六個色彩設定檔:
- 淺色鮮明
- 繽紛
- 深色鮮明
- 已設為靜音
- 已忽略
- 深色調調色
以下程式碼中的每個 get<Profile>Color()
方法
Palette
會在與該區塊相關的調色盤中傳回顏色
特定設定檔,其中 <Profile>
會由
六個色彩設定檔的名稱舉例來說,取得
深色鮮明色彩設定檔為
getDarkVibrantColor()
。
由於並非所有圖片都包含所有色彩設定檔,請提供要傳回的預設顏色。
圖 1 顯示相片和其對應的色彩設定檔
get<Profile>Color()
方法。
使用色票建立色彩配置
Palette
類別也會產生
Palette.Swatch
物件。Palette.Swatch
物件包含該設定檔的關聯顏色,以及顏色在像素中的分布。
色票有其他方法可取得有關色彩設定檔的更多資訊,例如 HSL 值和像素填充。您可以使用色塊
可幫助您建立更全面的色彩配置和應用程式主題
getBodyTextColor()
和
getTitleTextColor()
方法。這些方法會傳回適合在色票顏色上使用的顏色。
Palette
中的每個 get<Profile>Swatch()
方法都會傳回與該特定設定檔相關聯的色塊,其中 <Profile>
會替換為六個色彩設定檔之一的名稱。雖然色盤的 get<Profile>Swatch()
方法不需要預設值參數,但如果圖片中沒有該特定設定檔,則會傳回 null
。因此,請先檢查色票並非 null
利用 Vertex AI Workbench 使用者舉例來說,如果鮮豔色塊不為空值,下列程式碼會從色板取得標題文字顏色:
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); }