Selezionare i colori con l'API Palette

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. L'oggetto Palette ti consente di accedere ai colori di un'immagine Bitmap e fornisce anche sei profili di colore principali dalla bitmap per supportare le tue scelte di design.

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")
}

Groovy

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

Creare 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 designare lo stile dell'app e per modificare dinamicamente la combinazione di colori in base a una determinata immagine di origine.

Per creare una tavolozza, devi prima creare un'istanza di Palette.Builder da 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 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 la generazione di palette sincrona se vuoi creare la tavolozza nello stesso thread del 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 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 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

Palette.Builder ti consente di personalizzare la tavolozza scegliendo il numero di colori della 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 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 quali colori sono consentiti nella tavolozza risultante. Supera la tua Palette.Filter e modificare il metodo isAllowed() 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 i paesaggi, i valori ottimali vanno da 8 a 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 l'area della bitmap utilizzata dal generatore per creare la tavolozza. Puoi utilizzare questo metodo solo per generare 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 Target profilo di colore al generatore. Se il valore predefinito di Target è gli sviluppatori avanzati non sono sufficienti per creare i propri Target utilizzando un Target.Builder.

Estrai profili di colore

In base agli standard di Material Design, la raccolta Palette estrae da un'immagine i profili di colore di uso comune. 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 vivace
• Luce attenuata
• Audio disattivato
• Attenuato scuro

Ciascuno dei metodi get<Profile>Color() in Palette restituisce il colore nella tavolozza associata a quel profilo specifico, dove <Profile> viene sostituito da il nome di uno dei sei profili di colore. Ad esempio, il metodo per ottenere il profilo di colore scuro e vivace è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 dei metodi get<Profile>Color().

Figura 1. Un'immagine di esempio e i relativi profili di colore estratti considerati numero massimo predefinito di colori (16) per la tavolozza.

Utilizzare i campioni per creare combinazioni di colori

La classe Palette genera anche oggetti 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 utilizzare i campioni per contribuire a creare combinazioni di colori e temi dell'app più completi utilizzando i metodi getBodyTextColor() e getTitleTextColor(). 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 i metodi get<Profile>Swatch() della tavolozza non richiedano parametri di valore predefinito, restituiscono null se quel determinato profilo non esiste nell'immagine. Pertanto, controlla che un campione non sia nullo prima di usarlo. 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, il metodogetSwatches() 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 del codice precedente per generare in modo sincrono una tavolozza, ottenere il campione vibrante 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);
}

Figura 2. Un'immagine di esempio con la barra degli strumenti dai colori vivaci e colore del testo del titolo corrispondente.