優れたビジュアル デザインはアプリの成功に不可欠であり、カラーパターンはデザインの主要なコンポーネントです。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
オブジェクトを使用すると、画像のメインカラーと、オーバーレイ テキストに対応する色にアクセスできます。パレットを使用すると、アプリのスタイルをデザインしたり、特定のソース画像に基づいてアプリのカラーパターンを動的に変更したりできます。
パレットを作成するには、まず 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. } }); }
画像またはオブジェクトの並べ替え済みリストのパレットを継続的に生成する必要がある場合は、UI パフォーマンスの低下を防ぐために Palette
インスタンスをキャッシュすることを検討してください。メインスレッドではパレットを作成しないでください。
パレットをカスタマイズする
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
の処理時間が長くなります。
Palette ライブラリは、次の 6 つのカラー プロファイルの抽出を試みます。
- 明るいビブラント
- ビブラント
- 暗いビブラント
- 明るいミュート
- ミュート
- 暗いミュート
Palette
の各 get<Profile>Color()
メソッドは、特定のプロファイルに関連付けられたパレットの色を返します。<Profile>
は、6 つのカラー プロファイルのいずれかの名前に置き換えられます。たとえば、Dark Vibrant カラー プロファイルを取得するメソッドは getDarkVibrantColor()
です。すべての画像にすべてのカラー プロファイルが含まれているわけではないため、返されるデフォルトの色を指定します。
図 1 は、写真と、get<Profile>Color()
メソッドからの対応するカラー プロファイルを示しています。
見本を使用してカラーパターンを作成する
また、Palette
クラスはカラー プロファイルごとに Palette.Swatch
オブジェクトを生成します。Palette.Swatch
オブジェクトには、このプロフィールに関連付けられている色と、色の母集団のピクセル単位が格納されます。
見本には、HSL 値やピクセル母集団など、カラー プロファイルに関する詳細情報にアクセスするための追加のメソッドが用意されています。見本で getBodyTextColor()
メソッドと getTitleTextColor()
メソッドを使用すると、より包括的なカラーパターンとアプリテーマを作成できます。これらのメソッドは、見本の色に対して使用するのに適した色を返します。
Palette
の各 get<Profile>Swatch()
メソッドは、特定のプロファイルに関連付けられている見本を返します。ここで、<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); }