Gutes visuelles Design ist für eine erfolgreiche App unerlässlich. Farbschemata sind ein wesentlicher Bestandteil des Designs. Die Palette-Bibliothek ist eine Jetpack-Bibliothek, die auffällige Farben aus Bildern extrahiert, um optisch ansprechende Apps zu erstellen.
Sie können die Palettenbibliothek verwenden, um Layoutdesigns zu entwerfen und benutzerdefinierte Farben auf visuelle Elemente in Ihrer App anzuwenden. So können Sie beispielsweise mit einer Palette eine farbkoordinierte Titelkarte für einen Titel basierend auf seinem Albumcover erstellen oder die Symbolleistenfarbe einer App anpassen, wenn sich ihr Hintergrundbild ändert. Mit dem Objekt
Palette
erhältst du Zugriff auf die Farben in einem
Bitmap
Bild
und es werden sechs Hauptfarbprofile aus der Bitmap für deine
Designentscheidungen bereitgestellt.
Bibliothek einrichten
Fügen Sie Ihrem build.gradle
Folgendes hinzu, um die Palette Library zu verwenden:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Groovig
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Palette erstellen
Mit einem Palette
-Objekt erhalten 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 Anwendung entwerfen und das Farbschema Ihrer Anwendung basierend auf einem bestimmten Quellbild dynamisch ändern.
Zum Erstellen einer Palette müssen Sie zuerst eine Palette.Builder
aus einer Bitmap
instanziieren. Sie können dann Palette.Builder
verwenden, um die Palette anzupassen, bevor Sie sie generieren. In diesem Abschnitt wird beschrieben, wie eine Palette anhand eines Bitmapbilds erstellt und angepasst wird.
Paletteninstanz generieren
Generieren Sie eine Palette
-Instanz mit ihrer from(Bitmap bitmap)
-Methode, um zuerst eine Palette.Builder
aus einer Bitmap
zu erstellen.
Der Builder kann die Palette synchron oder asynchron generieren. Verwenden Sie die synchrone Palettengenerierung, wenn Sie die Palette im selben Thread wie die aufgerufene Methode erstellen möchten. Wenn Sie die Palette asynchron in einem anderen Thread generieren, können Sie die Methode onGenerated()
verwenden, um direkt nach ihrer Erstellung auf die Palette zuzugreifen.
Das folgende Code-Snippet enthält Beispielmethoden für beide Arten der Palettengenerierung:
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. } }); }
Wenn Sie kontinuierlich Paletten für eine sortierte Liste von Bildern oder Objekten generieren müssen, sollten Sie die Palette
-Instanzen im Cache speichern, um eine langsame UI-Leistung zu vermeiden. Erstellen Sie die Paletten nicht im Hauptthread.
Palette anpassen
Mit Palette.Builder
können Sie die Palette anpassen. Dazu wählen Sie aus, wie viele Farben die resultierende Palette enthalten soll, welchen Bereich Ihres Bildes der Builder zum Generieren der Palette verwendet und welche Farben die Palette enthalten soll. Beispielsweise können Sie die Farbe Schwarz herausfiltern oder dafür sorgen, dass der Builder nur die obere Hälfte eines Bildes verwendet, um die Palette zu generieren.
Passen Sie die Größe und Farben der Palette mit den folgenden Methoden aus der Klasse Palette.Builder
an:
addFilter()
- Bei dieser Methode wird ein Filter hinzugefügt, der angibt, welche Farben in der resultierenden Palette zulässig sind. Übergeben Sie Ihre eigene
Palette.Filter
und ändern Sie ihreisAllowed()
-Methode, um zu bestimmen, welche Farben aus der Palette gefiltert werden. maximumColorCount()
- Mit dieser Methode wird die maximale Anzahl von Farben in einer Palette festgelegt. Der Standardwert ist 16 und der optimale Wert hängt vom Quell-Image ab. Bei Landschaften liegen die optimalen Werte zwischen 8 und 16, während Bilder mit Gesichtern in der Regel Werte zwischen 24 und 32 haben. Das Generieren von Paletten mit mehr Farben dauert mit
Palette.Builder
länger. setRegion()
- Diese Methode gibt an, welchen Bereich der Bitmap der Builder beim Erstellen der Palette verwendet. Sie können diese Methode nur verwenden, wenn Sie die Palette aus einer Bitmap generieren. Sie hat keinen Einfluss auf das Originalbild.
addTarget()
- Mit dieser Methode können Sie einen eigenen Farbabgleich durchführen, indem Sie dem Builder ein
Target
-Farbprofil hinzufügen. Wenn die standardmäßigeTarget
nicht ausreicht, können fortgeschrittene Entwickler mit einemTarget.Builder
eine eigeneTarget
erstellen.
Farbprofile extrahieren
Anhand der Material Design-Standards extrahiert die Palette-Bibliothek häufig verwendete Farbprofile aus einem Bild. Jedes Profil wird durch eine Target
definiert. Aus dem Bitmapbild extrahierte Farben werden anhand von Sättigung, Leuchtdichte und Population (Anzahl der Pixel in der Bitmap, dargestellt durch die Farbe) in jedem Profil bewertet. Für jedes Profil bestimmt die Farbe mit dem besten Wert das Farbprofil für das jeweilige Bild.
Standardmäßig enthält ein Palette
-Objekt 16 Primärfarben eines bestimmten Bildes. Beim Generieren der Palette können Sie die Anzahl der Farben mit Palette.Builder
anpassen. Wenn Sie mehr Farben extrahieren, ergeben sich mehr potenzielle Übereinstimmungen für jedes Farbprofil. Allerdings dauert das Generieren der Palette Palette.Builder
jedoch länger.
Die Palettenbibliothek versucht, die folgenden sechs Farbprofile zu extrahieren:
- Leicht leuchtend
- Leuchtend
- Dunkel und leuchtend
- Licht stummgeschaltet
- stummgeschaltet,
- Dunkel gedeckt
Jede der get<Profile>Color()
-Methoden in Palette
gibt die Farbe in der Palette zurück, die diesem bestimmten Profil zugeordnet ist, wobei <Profile>
durch den Namen eines der sechs Farbprofile ersetzt wird. Die Methode zum Abrufen des Farbprofils „Dunkel lebendig“ ist beispielsweise getDarkVibrantColor()
.
Da nicht alle Bilder alle Farbprofile enthalten, geben Sie eine Standardfarbe an, die zurückgegeben werden soll.
In Abbildung 1 sind ein Foto und die entsprechenden Farbprofile aus den get<Profile>Color()
-Methoden zu sehen.
Verwenden Sie Muster, um Farbschemata zu erstellen.
Die Klasse Palette
generiert außerdem Palette.Swatch
-Objekte für jedes Farbprofil. Palette.Swatch
-Objekte enthalten die zugehörige Farbe für dieses Profil sowie die Grundgesamtheit der Farbe in Pixeln.
Muster haben zusätzliche Methoden, um auf weitere Informationen zum Farbprofil zuzugreifen, z. B. HSL-Werte und Pixelpopulation. Sie können Muster verwenden, um mithilfe der Methoden getBodyTextColor()
und getTitleTextColor()
umfassendere Farbschemata und App-Designs zu erstellen. Diese Methoden geben Farben zurück, die für die Verwendung über der Farbe des Musters geeignet sind.
Jede get<Profile>Swatch()
-Methode von Palette
gibt das mit diesem Profil verknüpfte Muster zurück, wobei <Profile>
durch den Namen eines der sechs Farbprofile ersetzt wird. Für die get<Profile>Swatch()
-Methoden der Palette sind zwar keine Standardwertparameter erforderlich, aber sie geben null
zurück, wenn dieses Profil nicht im Bild vorhanden ist. Überprüfen Sie daher, ob ein Muster nicht null ist, bevor Sie es verwenden. Mit dem folgenden Code wird beispielsweise die Titeltextfarbe aus einer Palette abgerufen, wenn das Muster "Vibrant" nicht null ist:
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(); // ... }
Für den Zugriff auf alle Farben in einer Palette gibt die Methode getSwatches()
eine Liste aller Muster zurück, die aus einem Bild generiert wurden, einschließlich der sechs Standardfarbprofile.
Das folgende Code-Snippet verwendet die Methoden aus den vorherigen Code-Snippets, um synchron eine Palette zu generieren, ihr lebendiges Muster abzurufen und die Farben einer Symbolleiste an das Bitmapbild anzupassen. Abbildung 2 zeigt das resultierende Bild und die Symbolleiste.
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); }