このページは Cloud Translation API によって翻訳されました。

Palette API を使用して色を選択する

優れたビジュアルデザインはアプリの成功に不可欠です。カラーパターンは設計の主要な構成要素です「 Palette ライブラリ: Jetpack 画像から目立つ色を抽出して視覚的な魅力を高めるライブラリ。

Palette ライブラリを使用すると、テーマを設定し、アプリの視覚要素を調整できますたとえば、パレットを使用して、アルバムカバーに基づいた色調整のタイトルカードや、アプリの背景画像が変わったときのツールバーの色を変更できます。「 Palette オブジェクトを使用すると、 Bitmap 個の画像また、ビットマップから 6 つの主要なカラープロファイルを使用して、設計上の選択肢。

ライブラリを設定する

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 オブジェクトを使用すると、オーバーレイテキストの色も指定できます。パレットを使ってアプリのスタイルをデザインしたり、アプリのカラーパターンを特定のソースイメージに対してのみです。

パレットを作成するには、まず Palette.Builder Bitmap から。その後、Palette.Builder を使用して、パレットを生成する前にカスタマイズします。このセクションでは、パレットについて説明します。画像を生成したりカスタマイズしたりできます

Palette インスタンスを生成する

次を使用して Palette インスタンスを生成します。 from(Bitmap bitmap) メソッドを使用して、まず Palette.Builder を作成します。 Bitmap。

ビルダーでは、パレットを同期または非同期で生成できます。使用同期パレット生成を使用します。呼び出します。パレットを非同期で生成すると、別のスレッドに送信する場合は、 onGenerated() メソッドを使用して、パレットが作成された直後にそのパレットにアクセスできるようにします。

次のコードスニペットは、両方のタイプのパレットに対するサンプルメソッドを示しています。 generation:

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

並べ替えた画像リスト用のパレットを継続的に生成したり、使用する場合は、キャッシュ UI パフォーマンスの低下を防ぐ Palette インスタンス。作成しないでください。パレットにメインスレッド。

パレットをカスタマイズする

Palette.Builder を使用すると、生成されるパレットの色数、画像のどの領域にビルダーでパレットを生成する際に使用する色と、使用できます。たとえば、黒の部分を除外したり、ビルダーがパレットを生成するために画像の上半分のみを使用します。

パレットのサイズと色を調整するには、 Palette.Builder クラス:

addFilter(): このメソッドは、パレットに作成します。自分で渡す Palette.Filter isAllowed() メソッドを変更して、表示する色を指定します。フィルタできます。
maximumColorCount(): このメソッドは、パレットに含まれる色の最大数を設定します。デフォルト 16 であり、最適な値はソースイメージによって異なります。対象最適な値の範囲は 8 ～ 16 ですが、顔が写っている写真の場合は、値の範囲は 24 ～ 32 です。Palette.Builder の処理に時間がかかります。より多くの色のパレットを生成できます
setRegion(): このメソッドは、ビルダーが実行時に使用するビットマップの領域を示しますパレットを作成しますこのメソッドは、パレットを生成する場合にのみ使用できます。また、元の画像には影響しません。
addTarget(): この方法では、 Target カラープロファイルをビルダーに渡します。デフォルトの Target が高度なデベロッパーが独自の Target を作成できない使用 Target.Builder。

カラープロファイルを抽出する

基づいて、素材の標準規格 Design など、Palette ライブラリは、説明します。各プロファイルは Target で定義され、色が抽出されます。彩度に基づいて各プロファイルに照らしてスコアリングされ、輝度、母集団（色）。プロファイルごとに、スコアが最も高い色によって、その色が決まりますプロファイルを指定します。

デフォルトでは、Palette オブジェクトには、デフォルトカラーの 16 個のプライマリカラーが表示されます。パレットを生成する際は、 Palette.Builder。抽出する色が多いほど、一致しますが、Palette.Builder も発生します。パレットの生成に時間がかかります

Palette ライブラリは、次の 6 つのカラープロファイルの抽出を試みます。

明るいビブラント
ビブラント
暗いビブラント
明るいミュート
ミュート
暗いミュート

各 get<Profile>Color() メソッドは、 Palette は、関連付けられているパレットの色を返します。ここで、<Profile> は、 6 つのカラープロファイルのいずれかの名前が付けられます。たとえば、ダークビブラントカラープロファイル: getDarkVibrantColor()。すべての画像にすべてのカラープロファイルが含まれているわけではないため、戻ります。

図 1 は、 get<Profile>Color() メソッド。

左側に夕日、右側に抽出したカラーパレットを示す画像。 — **図 1.** サンプル画像とその抽出されたカラープロファイルパレットのデフォルトの最大色数（16）です。

見本を使用してカラーパターンを作成する

Palette クラスはまた、 Palette.Swatch オブジェクトが作成されます。Palette.Swatch オブジェクトには、プロファイルの関連する色とそのプロファイルの色の母集団がピクセルです。

見本には、詳細な情報にアクセスするための追加のメソッドがあります。カラープロファイル（HSL 値やピクセル母集団など）が含まれます。見本を使用するとを使用して、より包括的なカラーパターンとアプリテーマを作成できます。 getBodyTextColor() および getTitleTextColor() あります。これらのメソッドは、見本の上で使うのに適した色を返します。指定します。

各 get<Profile>Swatch() メソッドの Palette は、特定のプロファイルに関連付けられている見本を返します。ここで、<Profile> は任意の名前で 6 つのカラープロファイルがありますパレットの get<Profile>Swatch() メソッドはデフォルトを必要としない特定のプロファイルが指定された場合に null を返します。イメージに存在しません。そのため、事前に見本が null でないことをできます。たとえば次のコードは、 Vibrant 見本が null でない場合:

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() メソッドは、画像から生成されたすべての見本のリストを返します。リストには 6 色プロファイルで作成しました。

次のコードスニペットでは、上記のコードのメソッドを使用しています。同期的にパレットを生成し、その色見本を取得して、ビットマップ画像に合わせてツールバーの色を調整します。図 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.** 鮮やかな色のツールバーと、対応するタイトルのテキストの色。

Palette API を使用して色を選択する

ライブラリを設定する

Kotlin

Groovy

パレットを作成する

Palette インスタンスを生成する

Kotlin

Java

パレットをカスタマイズする

カラー プロファイルを抽出する

見本を使用してカラーパターンを作成する

Kotlin

Java

Kotlin

Java

カラープロファイルを抽出する