優れたビジュアル デザインはアプリの成功に不可欠です。カラーパターンは 設計の主要な構成要素です「 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.FilterisAllowed()メソッドを変更して、表示する色を指定します。 フィルタできます。 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() メソッド。
見本を使用してカラーパターンを作成する
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);
}
