Una buona veste grafica è essenziale per un'app di successo e le combinazioni di colori sono un componente principale del design. La libreria Palette è una libreria Jetpack che estrae colori importanti dalle immagini per creare app visivamente accattivanti.
Puoi utilizzare la libreria Palette per progettare temi di layout e applicare colori personalizzati agli elementi visivi nell'app. Ad esempio, puoi utilizzare una tavolozza per creare un intertitolo coordinato con i colori di un brano in base alla copertina dell'album o per regolare il colore della barra degli strumenti di un'app quando cambia l'immagine di sfondo. L'oggetto
Palette
consente di accedere ai colori di
un'immagine Bitmap
e fornisce anche sei profili di colore principali della bitmap per definire le
scelte di progettazione.
Configurare la raccolta
Per utilizzare la libreria Palette, aggiungi quanto segue a 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 consente di accedere ai colori primari di un'immagine e ai colori corrispondenti per il testo sovrapposto. Utilizza le tavolozze per
progettare lo stile dell'app e per modificarne in modo dinamico la combinazione di colori in base
a una determinata immagine di origine.
Per creare una tavolozza, crea prima un'istanza di un Palette.Builder
da un Bitmap
. Puoi quindi utilizzare Palette.Builder
per
personalizzare la tavolozza prima di generarla. Questa sezione descrive la generazione e la personalizzazione
della tavolozza da un'immagine bitmap.
Genera un'istanza Palette
Genera un'istanza Palette
utilizzando il metodo 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
la generazione della tavolozza sincrona se vuoi creare la tavolozza sullo stesso
thread del metodo chiamato. Se generi la tavolozza in modo asincrono,
su un thread diverso, utilizza il
metodo onGenerated()
per accedere alla tavolozza subito dopo averla creata.
Il seguente snippet di codice fornisce metodi di esempio per entrambi i tipi di generazione della 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 oggetti, valuta la possibilità di memorizzare nella cache le istanze Palette
per evitare prestazioni lente dell'interfaccia utente. Non creare le
tavolozze sul
thread principale.
Personalizza la tavolozza
L'elemento Palette.Builder
ti consente di personalizzare la tavolozza scegliendo
il numero di colori presenti nella tavolozza risultante, l'area dell'immagine
utilizzata dal generatore per generare la tavolozza e i colori inclusi
nella tavolozza. Ad esempio, puoi filtrare il colore nero o fare in modo che lo strumento di creazione
utilizzi solo la metà superiore di un'immagine per generare la tavolozza.
Perfeziona le dimensioni e i colori della tavolozza con i seguenti metodi della classe Palette.Builder
:
addFilter()
- Questo metodo aggiunge un filtro che indica i colori consentiti nella tavolozza risultante. Trasmetti il tuo
Palette.Filter
e modifica il relativo metodoisAllowed()
per determinare quali colori vengono 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 i paesaggi, i valori ottimali sono compresi tra 8 e 16, mentre le immagini con volti di solito hanno valori compresi tra 24 e 32. La
Palette.Builder
richiede più tempo per generare tavolozze con più colori. setRegion()
- Questo metodo indica quale area della bitmap viene utilizzata dal builder durante la creazione della tavolozza. Puoi utilizzare questo metodo solo quando generi la tavolozza da una bitmap e non influisce sull'immagine originale.
addTarget()
- Questo metodo ti consente di eseguire la tua corrispondenza dei colori aggiungendo un profilo colori
Target
allo strumento di creazione. Se il valoreTarget
predefinito non è sufficiente, gli sviluppatori avanzati possono creare il proprioTarget
utilizzando unTarget.Builder
.
Estrai profili di colore
Basata sugli standard di Material Design, la libreria Palette estrae i profili di colore comunemente utilizzati da un'immagine. Ogni profilo è definito da un valore Target
e i colori estratti
dall'immagine bitmap vengono valutati in base a ciascun profilo in base a saturazione,
luminanza e popolazione (numero di pixel nella bitmap rappresentati dal
colore). Per ogni profilo, il colore con il punteggio migliore definisce quel profilo di colore per l'immagine specificata.
Per impostazione predefinita, un oggetto Palette
contiene 16 colori primari di
una determinata immagine. Quando generi la tavolozza, puoi
personalizzarne il numero di colori con
Palette.Builder
. L'estrazione di più colori fornisce più potenziali corrispondenze per ogni profilo di colore, ma causa anche il prolungamento di Palette.Builder
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 metodi get<Profile>Color()
in Palette
restituisce il colore nella tavolozza associata al particolare profilo, dove <Profile>
è sostituito dal 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 da restituire.
La Figura 1 mostra una foto e i relativi profili di colore corrispondenti dai
metodi get<Profile>Color()
.
![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?authuser=19&hl=it)
Utilizzare i campioni per creare combinazioni di colori
La classe Palette
genera anche
Palette.Swatch
oggetti per ogni profilo di colore. Gli oggetti Palette.Swatch
contengono il colore associato al profilo e la popolazione del colore in pixel.
I campioni dispongono di metodi aggiuntivi per accedere a ulteriori informazioni sul profilo dei colori, come i valori HSL e la popolazione di pixel. Puoi utilizzare i campioni per
creare combinazioni di colori più complete e temi delle app utilizzando i metodi
getBodyTextColor()
e
getTitleTextColor()
. Questi metodi restituiscono i colori appropriati da usare sopra il colore del campione.
Ogni metodo get<Profile>Swatch()
da Palette
restituisce il campione associato al profilo in questione, dove <Profile>
è sostituito dal nome di uno dei sei profili di colore. Anche se i metodi get<Profile>Swatch()
della tavolozza non richiedono parametri valore predefiniti, restituiscono null
se quel particolare profilo non esiste nell'immagine. Pertanto, controlla che un campione non sia nullo prima di utilizzarlo. Ad esempio, il seguente codice ottiene il colore del testo del titolo da una
tavolozza 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, il metodo getSwatches()
restituisce un elenco di tutti i campioni generati da un'immagine, inclusi i sei profili di colore standard.
Il seguente snippet di codice utilizza i metodi degli snippet di codice precedenti per generare in modo sincrono una tavolozza, ottenere il relativo campione vivace e modificare i colori di una barra degli strumenti in modo che corrispondano all'immagine bitmap. La Figura 2 mostra l'immagine e la 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?authuser=19&hl=it)