Una buona veste grafica è essenziale per un'app di successo e le combinazioni di colori sono un componente principale della progettazione. La La libreria Palette è un jetpack libreria che estrae colori in evidenza dalle immagini per creare contenuti visivamente coinvolgenti app.
Puoi usare la libreria Palette per progettare il layout
temi e applicare colori personalizzati a
elementi visivi dell'app. Ad esempio, puoi utilizzare una tavolozza per creare
intertitolo coordinato con colori per un brano in base alla copertina dell'album o per modificare un
colore della barra degli strumenti dell'app quando cambia l'immagine di sfondo. La
Palette
consente di accedere ai colori in un
Immagine Bitmap
fornendo al contempo sei profili di colore principali della bitmap per
scelte di progettazione.
Configurare la raccolta
Per utilizzare la libreria Palette, aggiungi quanto segue al tuo
build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Alla moda
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Crea una tavolozza
Un oggetto Palette
ti dà accesso ai colori primari in un
dell'immagine e i colori corrispondenti per il testo sovrapposto. Utilizza le tavolozze per
progettare lo stile dell'app e modificarne in modo dinamico la combinazione di colori in base
su una determinata immagine di origine.
Per creare una tavolozza, crea innanzitutto un'istanza per
Palette.Builder
da un Bitmap
. Potrai quindi utilizzare Palette.Builder
per
personalizzare la tavolozza prima di generarla. Questa sezione descrive la tavolozza
la generazione e la personalizzazione da un'immagine bitmap.
Genera un'istanza Palette
Genera un'istanza Palette
utilizzando la relativa
from(Bitmap bitmap)
per creare prima un Palette.Builder
da un
Bitmap
.
Lo strumento di creazione può generare la tavolozza in modo sincrono o asincrono. Utilizza le funzionalità di
generazione della tavolozza sincrona se vuoi creare la tavolozza sullo stesso
il thread come metodo chiamato. Se generi la tavolozza in modo asincrono,
su un altro thread, utilizza
onGenerated()
per accedere alla tavolozza subito dopo la sua creazione.
Il seguente snippet di codice fornisce metodi di esempio per entrambi i tipi di tavolozza :
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. } }); }
Se devi generare continuamente tavolozze per un elenco ordinato di immagini o
di oggetti, considera
memorizzando nella cache
Palette
di istanze per evitare il rallentamento delle prestazioni dell'interfaccia utente. Non creare il
tavolozze sul tuo
thread principale.
Personalizza la tavolozza
L'Palette.Builder
ti consente di personalizzare la tavolozza scegliendo
quanti colori ci sono nella tavolozza risultante, quale area dell'immagine
Builder usa per generare la tavolozza e i colori inclusi nel
. Ad esempio, puoi filtrare il colore nero o fare in modo che lo strumento
utilizza solo la metà superiore di un'immagine per generare la tavolozza.
Ottimizza le dimensioni e i colori della tavolozza con i seguenti metodi dal
Palette.Builder
corso:
addFilter()
- Questo metodo aggiunge un filtro che indica i colori consentiti nel
tavolozza risultante. Supera la tua
Palette.Filter
e modificare il metodoisAllowed()
per determinare quali colori filtrati dalla tavolozza. maximumColorCount()
- Questo metodo imposta il numero massimo di colori nella tavolozza. Il valore predefinito
è 16 e il valore ottimale dipende dall'immagine di origine. Per
paesaggi, i valori ottimali sono compresi tra 8 e 16, mentre le foto con volti di solito
hanno valori compresi tra 24 e 32. L'
Palette.Builder
richiede più tempo generare tavolozze con più colori. setRegion()
- Questo metodo indica quale area della bitmap viene utilizzata dal builder quando creando la tavolozza. Puoi utilizzare questo metodo solo durante la generazione della tavolozza da una bitmap e non influenza l'immagine originale.
addTarget()
- Questo metodo ti consente di effettuare la tua corrispondenza dei colori aggiungendo un'opzione
Target
profilo colore allo strumento di creazione. Se il valore predefinito diTarget
è gli sviluppatori avanzati non sono sufficienti per creare i propriTarget
utilizzando unTarget.Builder
.
Estrai profili di colore
In base alla
standard dei materiali
Design, la libreria Palette estrae i profili di colore comunemente utilizzati da una
dell'immagine. Ogni profilo viene definito da un valore Target
e i colori vengono estratti
dall'immagine bitmap vengono valutati rispetto a ogni profilo in base alla saturazione,
luminanza e popolazione (il numero di pixel nella bitmap rappresentati
colore). Per ogni profilo, il colore con il punteggio migliore definisce tale colore.
profilo dell'immagine specificata.
Per impostazione predefinita, un oggetto Palette
contiene 16 colori primari da un
l'immagine data. Quando generi la tavolozza, puoi
personalizza il numero di colori utilizzando
Palette.Builder
. L'estrazione di più colori migliora il potenziale
corrisponde a ogni profilo di colore, ma causa anche Palette.Builder
potrebbe richiedere più tempo durante la generazione della tavolozza.
La libreria Palette tenta di estrarre i seguenti sei profili di colore:
- Intenso chiaro
- Intenso
- Scuro intenso
- Luce tenue
- Audio disattivato
- Attenuato scuro
Ciascuno dei get<Profile>Color()
metodi in
Palette
restituisce il colore nella tavolozza associata.
profilo specifico, dove <Profile>
è sostituito da
il nome di uno dei sei profili di colore. Ad esempio, il metodo per ottenere
Il profilo di colore vivace scuro è
getDarkVibrantColor()
.
Poiché non tutte le immagini contengono tutti i profili di colore, fornisci un colore predefinito per
per tornare indietro.
La Figura 1 mostra una foto e i relativi profili di colore dalla
get<Profile>Color()
metodi.
![Un'immagine che mostra un tramonto a sinistra e la tavolozza dei colori estratta a destra.](https://developer.android.com/static/training/material/images/palette-library-color-profiles_2-1_2x.png?hl=it)
Utilizzare i campioni per creare combinazioni di colori
Il corso Palette
genera anche
Palette.Swatch
per ogni profilo di colore. Palette.Swatch
oggetti contengono
colore associato per quel profilo nonché la popolazione del colore in
pixel.
I campioni dispongono di metodi aggiuntivi per accedere a ulteriori informazioni sulla
profilo di colore, come i valori HSL e la popolazione di pixel. Puoi usare i campioni per
aiutano a creare combinazioni di colori più complete e temi delle app utilizzando il
getBodyTextColor()
e
getTitleTextColor()
di machine learning. Questi metodi restituiscono i colori appropriati per l'uso sul campione
colore.
Ogni metodo get<Profile>Swatch()
da
Palette
restituisce il campione associato al profilo in questione,
dove <Profile>
è sostituito dal nome di uno di
i sei profili di colore. Sebbene la tavolozza
get<Profile>Swatch()
metodo non richiede il valore predefinito
parametro value, viene restituito null
se quel particolare profilo
non esiste nell'immagine. Pertanto, controlla che un campione non sia null prima.
utilizzandolo. Ad esempio, il seguente codice ottiene il colore del testo del titolo da una
Se il campione Vivace non è 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(); // ... }
Per accedere a tutti i colori di una tavolozza,
getSwatches()
restituisce un elenco di tutti i campioni generati da un'immagine, tra cui
standard a sei profili di colore.
Il seguente snippet di codice utilizza i metodi del codice precedente per generare in modo sincrono una tavolozza, ottenere il campione vivace e modificare i colori di una barra degli strumenti in modo che corrispondano all'immagine bitmap. La figura 2 mostra la immagine e barra degli strumenti risultanti.
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); }
![Un'immagine che mostra un tramonto e una barra degli strumenti con all'interno TitleTextColor](https://developer.android.com/static/training/material/images/palette-library-title-text-color_2-1_2x.png?hl=it)