Gutes visuelles Design ist für eine erfolgreiche App unerlässlich und Farbschemata sind ein Hauptkomponente 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 eines Titels basierend auf seinem Albumcover oder zur
Farbe der Symbolleiste der App ändern, wenn sich ihr Hintergrundbild ändert. Die
Palette
erhalten Sie Zugriff auf die Farben eines
Bitmap
Bild
während Sie sechs Hauptfarbprofile aus der Bitmap bereitstellen, um Ihre
Designentscheidungen.
Bibliothek einrichten
Um die Palettenbibliothek zu verwenden, fügen Sie Folgendes zu Ihrem
build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Cool
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 einer
und die entsprechenden Farben für eingeblendeten Text. Mit Vorlagen können Sie
den Stil Ihrer App entwerfen und das Farbschema dynamisch ändern, je nachdem,
für ein bestimmtes Quell-Image.
Instanziieren Sie zum Erstellen einer Palette zuerst eine
Palette.Builder
von einem Bitmap
. Anschließend können Sie Palette.Builder
verwenden, um
passen Sie die Palette an, bevor Sie sie generieren. In diesem Abschnitt wird die Palette beschrieben.
Erstellung und Anpassung aus einem Bitmapbild.
Palette-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
synchrone Erstellung von Vorlagen verwenden, wenn Sie die Palette auf derselben
als Methode verwendet wird. 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 von Paletten. Generation:
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 generieren oder
sollten Sie sich
das Caching
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
zur Generierung der Palette verwendet und welche Farben in der
Farbpalette. Sie können beispielsweise die Farbe Schwarz herausfiltern oder sicherstellen, dass der Builder
verwendet zum Generieren der Palette nur die obere Hälfte eines Bildes.
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. Eigene übergeben
Palette.Filter
und ändern Sie die MethodeisAllowed()
, um zu bestimmen, welche Farben aus der Palette gefiltert. maximumColorCount()
- Mit dieser Methode wird die maximale Anzahl von Farben in der 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 in der Regel
Werte von 24 bis 32 haben. Der
Palette.Builder
dauert länger, um um Vorlagen mit mehr Farben zu generieren. setRegion()
- Diese Methode gibt an, welchen Bereich der Bitmap der Builder verwendet, wenn der Palette. 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ürTarget
nicht ausreichend, fortgeschrittene Entwickler können ihre eigenenTarget
erstellen. mit einerTarget.Builder
.
Farbprofile extrahieren
Basierend auf den
Materialstandards
Design haben, extrahiert die Palette-Bibliothek häufig verwendete Farbprofile aus einem
Bild. Jedes Profil wird durch einen Target
definiert und Farben extrahiert
aus dem Bitmapbild werden anhand der Sättigung,
Luminanz und Population (Anzahl der Pixel in der Bitmap, dargestellt durch das
Farbe). 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 Primärfarben aus einer
eines bestimmten Bildes. 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:
- Hell und leuchtend
- Leuchtend
- Dunkel, leuchtend
- Licht stummgeschaltet
- 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, sollten Sie für
zurückgeben.
Abbildung 1 zeigt ein Foto mit den zugehörigen Farbprofilen aus der
get<Profile>Color()
-Methoden.
![Ein Bild, das links einen Sonnenuntergang und rechts die extrahierte Farbpalette zeigt.](https://developer.android.com/static/training/material/images/palette-library-color-profiles_2-1_2x.png?authuser=9&hl=de)
Farbschemata mithilfe von Mustern erstellen
Die Klasse Palette
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,
bei der Erstellung umfassenderer Farbschemata und App-Designs mithilfe der
getBodyTextColor()
und
getTitleTextColor()
. Diese Methoden geben Farben zurück, die statt der Farbmuster
Farbe.
Jede get<Profile>Swatch()
-Methode aus
Palette
gibt das mit diesem Profil verknüpfte Muster zurück.
Dabei wird <Profile>
durch den Namen eines der folgenden Elemente ersetzt:
sechs Farbprofile. Obwohl die Palette
get<Profile>Swatch()
-Methoden erfordern keine Standardeinstellung
Wertparameter, sie geben null
zurück, wenn das Profil
ist im Image nicht vorhanden. Stellen Sie daher vor dem Test sicher, dass ein Muster nicht null ist,
verwenden. Mit dem folgenden Code wird beispielsweise die Textfarbe des Titels aus einer
Farbpalette, 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(); // ... }
Um auf alle Farben in einer Palette zuzugreifen, verwenden Sie die
getSwatches()
gibt eine Liste aller aus einem Bild generierten Muster zurück, einschließlich des
mit sechs Standard-Farbprofilen.
Im folgenden Code-Snippet werden die Methoden aus dem vorherigen Code verwendet. Snippets synchron eine Palette generieren, ihr leuchtendes Muster erhalten und Farben einer Symbolleiste so, dass sie zum Bitmapbild passt. Abbildung 2 zeigt die das daraus 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); }
![Ein Bild, das einen Sonnenuntergang und eine Symbolleiste mit „TitleTextColor“ zeigt](https://developer.android.com/static/training/material/images/palette-library-title-text-color_2-1_2x.png?authuser=9&hl=de)