Farben mit der Palette API auswählen

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:

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 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 die 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:

// 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 den 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 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 Methode isAllowed(), 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ür Target nicht ausreichend, können fortgeschrittene Entwickler eigene 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 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.

</ph> <ph type="x-smartling-placeholder">

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:

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, 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.

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

</ph> <ph type="x-smartling-placeholder">