本頁面由 Cloud Translation API 翻譯而成。

使用 Palette API 選取顏色

良好的視覺設計是成功應用程式的關鍵，而色彩配置是設計的主要元素。 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() 方法。

圖片顯示左側的日落和右側的擷取色彩調色盤。 — **圖 1**：範例圖片和其擷取的色彩設定檔，其中包含調色盤的預設顏色上限 (16 個)。

使用色票建立色彩配置

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);
}

顯示日落畫面的圖片，以及內含 TitleTextColor 的工具列 — **圖 2** 範例圖片：色彩鮮豔的工具列和對應的標題文字顏色。