Farben mit der Palette API auswählen

Ein gutes visuelles Design ist für eine erfolgreiche App unerlässlich und Farbschemata sind ein wichtiger Bestandteil des Designs. Die Palette library (Palettenbibliothek) ist ein Jetpack Bibliothek, die markante Farben aus Bildern extrahiert, um visuell ansprechende Apps.

Mit der Palettenbibliothek können Sie das Layout Designs erstellen und benutzerdefinierte Farben auf visuelle Elemente in Ihrer App. Mit einer Palette können Sie beispielsweise farbige Titelkarte für einen Song basierend auf seinem Albumcover oder zur Farbe der Symbolleiste der App ändern, wenn sich ihr Hintergrundbild ändert. Das Palette-Objekt bietet Zugriff auf die Farben in einem Bitmap-Bild und sechs Hauptfarbprofile aus der Bitmap, die Sie bei Ihren Designentscheidungen unterstützen.

Bibliothek einrichten

Um die Palettenbibliothek zu verwenden, fügen Sie Folgendes zu Ihrem build.gradle:

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

android {
    compileSdkVersion 33
    ...
}

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

Palette erstellen

Mit einem Palette-Objekt haben Sie Zugriff auf die Primärfarben in einem Bild sowie auf die entsprechenden Farben für eingeblendeten Text. Mit Paletten können Sie den Stil Ihrer App entwerfen und das Farbschema Ihrer App dynamisch anhand eines bestimmten Quellbilds ändern.

Instanziieren Sie zum Erstellen einer Palette zuerst eine Palette.Builder von einem Bitmap. Anschließend können Sie die Palette.Builder verwenden, um passen Sie die Palette an, bevor Sie sie generieren. In diesem Abschnitt wird die Palettenerstellung und -anpassung aus einem Bitmapbild beschrieben.

Paletten-Instanz generieren

Palette-Instanz generieren mit ihrer from(Bitmap bitmap) erstellen Sie zuerst eine Palette.Builder aus einem Bitmap.

Der Builder kann die Palette synchron oder asynchron generieren. Verwenden Sie die synchrone Palettenerstellung, wenn Sie die Palette im selben Thread wie die aufgerufene Methode erstellen möchten. Wenn Sie die Palette asynchron generieren, in einem anderen Thread sind, verwenden Sie onGenerated() um auf die Palette direkt nach ihrer Erstellung zuzugreifen.

Das folgende Code-Snippet enthält Beispielmethoden für beide Arten der Palettenerstellung:

// 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.
    }
}

// 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.
    }
  });
}

Wenn Sie kontinuierlich Paletten für eine sortierte Liste von Bildern generieren oder sollten Sie sich das Caching der Palette-Instanzen, um eine langsame UI-Leistung zu verhindern. Erstellen Sie nicht die Farbpaletten auf Ihren Hauptthread

Palette anpassen

Mit Palette.Builder können Sie Ihre Vorlage anpassen, indem Sie wie viele Farben die Palette hat, in welchem Bildbereich zum Generieren der Palette verwendet und welche Farben in der Farbpalette. Sie können beispielsweise die Farbe Schwarz herausfiltern oder festlegen, dass der Builder nur die obere Hälfte eines Bilds verwendet, um die Palette zu generieren.

Passen Sie Größe und Farben Ihrer Palette mithilfe der folgenden Methoden aus der Klasse Palette.Builder:

addFilter()

Bei dieser Methode wird ein Filter hinzugefügt, der angibt, welche Farben in der Palette erstellt. Geben Sie Ihre eigene Palette.Filter an und ändern Sie die isAllowed()-Methode, um festzulegen, welche Farben aus der Palette herausgefiltert werden.

maximumColorCount()

Mit dieser Methode wird die maximale Anzahl von Farben in Ihrer Palette festgelegt. Standardeinstellung Wert 16 und der optimale Wert hängt vom Quell-Image ab. Für Landschaften dargestellt werden, liegen die optimalen Werte zwischen 8 und 16, während Bilder mit Gesichtern normalerweise Werte von 24 bis 32 haben. Der Palette.Builder dauert länger, um um Vorlagen mit mehr Farben zu generieren.

setRegion()

Mit dieser Methode wird angegeben, welchen Bereich der Bitmap der Builder beim Erstellen der Palette verwendet. Sie können diese Methode nur beim Generieren der Palette verwenden von einer Bitmap und wirkt sich nicht auf das Originalbild aus.

addTarget()

Mit dieser Methode können Sie einen eigenen Farbabgleich durchführen, indem Sie ein Target Farbprofil an den Builder zu senden. Wenn der Standardwert für Target nicht ausreichend, fortgeschrittene Entwickler können ihre eigenen Target erstellen. mit einer Target.Builder.

Farbprofile extrahieren

Basierend auf den Materialstandards Design haben, extrahiert die Palette-Bibliothek häufig verwendete Farbprofile aus einem Bild. Jedes Profil wird durch eine Target definiert. Die aus dem Bitmap-Bild extrahierten Farben werden anhand von Sättigung, Leuchtkraft und Population (Anzahl der Pixel in der Bitmap, die durch die Farbe dargestellt werden) mit jedem Profil verglichen. Die Farbe für jedes Profil wird durch die Farbe mit dem besten Wert definiert. für das jeweilige Bild.

Standardmäßig enthält ein Palette-Objekt 16 Hauptfarben aus einem bestimmten Bild. Beim Generieren der Palette können Sie Anpassung der Farben mithilfe des Palette.Builder Je mehr Farben extrahiert werden, desto mehr Potenzial hat sie. Übereinstimmungen für jedes Farbprofil, aber es führt auch dazu, dass Palette.Builder dass die Erstellung der Palette länger dauert.

Die Palettenbibliothek versucht, die folgenden sechs Farbprofile zu extrahieren:

• Leuchtend
• Leuchtend
• Dunkel – dynamisch
• Leuchtend, gedimmt
• stummgeschaltet,
• Dunkel stummgeschaltet

Jede der get<Profile>Color()-Methoden in Palette gibt die Farbe in der zugehörigen Palette zurück bestimmtes Profil, wobei <Profile> durch eines der sechs Farbprofile. Die Methode zum Abrufen der Das Farbprofil „Dunkler Farbraum“ ist getDarkVibrantColor() Da nicht alle Bilder alle Farbprofile enthalten, geben Sie eine Standardfarbe an, die zurückgegeben werden soll.

Abbildung 1 zeigt ein Foto und die zugehörigen Farbprofile aus den get<Profile>Color()-Methoden.

Farbmuster verwenden, um Farbschemas zu erstellen

Die Palette-Klasse generiert außerdem Palette.Swatch-Objekte für jedes Farbprofil. Palette.Swatch-Objekte enthalten den Parameter zugehöriger Farbe für dieses Profil sowie der Farbpopulation in Pixel.

Muster bieten zusätzliche Methoden, um auf weitere Informationen Farbprofil wie HSL-Werte und Pixelpopulation. Muster können Sie verwenden, beim Erstellen umfassender Farbschemata und App-Designs mithilfe der getBodyTextColor() und getTitleTextColor() . Diese Methoden geben Farben zurück, die sich für die Verwendung über der Farbe des Farbmusters eignen.

Jede get<Profile>Swatch()-Methode aus Palette gibt das mit dem jeweiligen Profil verknüpfte Farbmuster zurück. Dabei wird <Profile> durch den Namen eines der sechs Farbprofile ersetzt. Für die get<Profile>Swatch()-Methoden der Palette sind zwar keine Standardwertparameter erforderlich, sie geben aber null zurück, wenn das betreffende Profil im Bild nicht vorhanden ist. Stellen Sie daher vor dem Test sicher, dass ein Muster nicht null ist, verwenden. Im folgenden Code wird beispielsweise die Textfarbe des Titels aus einer Palette abgerufen, wenn das Swatch für „Lebhaft“ nicht null ist:

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

Um auf alle Farben in einer Palette zuzugreifen, gibt die Methode getSwatches() eine Liste aller aus einem Bild generierten Farbmuster zurück, einschließlich der sechs Standardfarbprofile.

Im folgenden Code-Snippet werden die Methoden aus den vorherigen Code-Snippets verwendet, um synchron eine Palette zu generieren, das lebendige Farbmuster abzurufen und die Farben einer Symbolleiste an das Bitmap-Bild anzupassen. Abbildung 2 zeigt das resultierende Bild und die Symbolleiste.

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

// 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);
}