優れた視覚デザインはアプリの成功に不可欠であり、カラーパターンはデザインの重要な要素です。「 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 インスタンスを生成する
from(Bitmap bitmap) メソッドを使用して Palette インスタンスを生成し、最初に Bitmap から Palette.Builder を作成します。
ビルダーは、パレットを同期または非同期で生成できます。呼び出されるメソッドと同じスレッドでパレットを作成する場合は、同期的に作成します。パレットを別のスレッドで非同期的に生成する場合は、onGenerated() メソッドを使用して、パレットが作成された直後にパレットにアクセスします。
次のコード スニペットは、これら 2 種類の方法でパレットを生成するメソッドの例を示しています。
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.FilterisAllowed()メソッドを変更して、表示する色を指定します。 フィルタできます。 maximumColorCount()- このメソッドは、パレットに含まれる色の最大数を設定します。デフォルト
16 であり、最適な値はソースイメージによって異なります。風景画像の場合、最適な値の範囲は 8～16 です。一方、顔を含む画像の場合、通常は 24～32 です。色の数が増えると、
Palette.Builderがパレットを作成するのにかかる時間が長くなります。 setRegion()- このメソッドは、ビルダーが実行時に使用するビットマップの領域を示します パレットを作成しますこのメソッドは、パレットを生成する場合にのみ使用できます。 また、元の画像には影響しません。
addTarget()- この方法では、
Targetカラー プロファイルをビルダーに渡します。デフォルトのTargetでは不十分な場合、熟練したデベロッパーであれば、Target.Builderを使用して独自のTargetを作成できます。
カラー プロファイルを抽出する
パレット ライブラリは、マテリアル デザインの標準に基づいて、一般的に使用されるカラー プロファイルを画像から抽出します。各プロファイルは Target によって定義されます。また、ビットマップ画像から抽出された色の各プロファイルに対するスコアが、彩度、輝度、母集団（色で表されたビットマップ内のピクセルの数）に基づいて決定されます。各プロファイルで、スコアが最も高い色によって特定の画像のカラー プロファイルが定義されます。
Palette オブジェクトにはデフォルトで、任意の画像の 16 のメインカラーが含まれています。パレットを生成する際は、
色数をカスタマイズする
Palette.Builder。抽出する色の数を増やすと、各カラー プロファイルが一致する可能性が高くなりますが、パレットを作成する際の Palette.Builder の処理時間が長くなります。
Palette ライブラリは、次の 6 つのカラー プロファイルの抽出を試みます。
- 明るいビブラント
- ビブラント
- 暗いビブラント
- 明るいミュート
- ミュート
- 暗いミュート
各 get<Profile>Color() メソッドは、
Palette は、関連付けられているパレットの色を返します。
ここで、<Profile> は、
いずれかのカラー プロファイルの名前が表示されます。たとえば、「暗いビブラント」カラー プロファイルを取得するメソッドは 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); }
