Wybieranie kolorów za pomocą interfejsu Palette API

Dobre zaprojektowanie wyglądu aplikacji ma kluczowe znaczenie dla jej sukcesu, a schematy kolorów są podstawowym elementem projektu. Biblioteka Palette to biblioteka Jetpack, która wyodrębnia z obrazów dominujące kolory, aby tworzyć atrakcyjne wizualnie aplikacje.

Za pomocą biblioteki Palette możesz projektować motywy układu i stosować spersonalizowane kolory do elementów wizualnych w aplikacji. Możesz na przykład użyć palety, aby utworzyć dopasowaną kolorystycznie kartę tytułową utworu na podstawie okładki albumu lub dostosować kolor paska narzędzi aplikacji po zmianie obrazu tła. Obiekt Palette daje dostęp do kolorów na obrazie Bitmap, a także udostępnia 6 głównych profili kolorów z bitmapy, które pomagają w podejmowaniu decyzji projektowych.

Konfigurowanie biblioteki

Aby używać biblioteki Palette, dodaj do pliku build.gradle ten kod:

Kotlin

android {
    compileSdkVersion(36)
    ...
}

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

Dynamiczny

android {
    compileSdkVersion 36
    ...
}

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

Tworzenie palety

Obiekt Palette daje dostęp do podstawowych kolorów obrazu oraz odpowiadających im kolorów tekstu nakładki. Używaj palet, aby zaprojektować styl aplikacji i dynamicznie zmieniać jej schemat kolorów na podstawie danego obrazu źródłowego.

Aby utworzyć paletę, najpierw utwórz instancję Palette.Builder z Bitmap. Możesz użyć Palette.Builder, aby dostosować paletę przed jej wygenerowaniem. W tej sekcji opisano generowanie i dostosowywanie palety na podstawie obrazu bitmapowego.

Generowanie instancji palety

Wygeneruj instancję Palette za pomocą metody from(Bitmap bitmap), aby najpierw utworzyć Palette.Builder z Bitmap.

Kreator może wygenerować paletę synchronicznie lub asynchronicznie. Jeśli chcesz utworzyć paletę w tym samym wątku co wywoływana metoda, użyj synchronicznego generowania palety. Jeśli generujesz paletę asynchronicznie w innym wątku, użyj metody onGenerated(), aby uzyskać dostęp do palety natychmiast po jej utworzeniu.

Poniższy fragment kodu zawiera przykładowe metody generowania obu typów palet:

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

Jeśli musisz stale generować palety dla posortowanej listy obrazów lub obiektów, rozważ zapisywanie w pamięci podręcznej instancji Palette, aby zapobiec spowolnieniu działania interfejsu. Nie twórz palet w głównym wątku.

Dostosowywanie palety

Palette.Builder umożliwia dostosowanie palety przez wybranie liczby kolorów w wynikowej palecie, obszaru obrazu, którego kreator używa do wygenerowania palety, oraz kolorów, które mają być uwzględnione w palecie. Możesz na przykład odfiltrować kolor czarny lub upewnić się, że kreator używa do wygenerowania palety tylko górnej połowy obrazu.

Dostosuj rozmiar i kolory palety za pomocą tych metod z klasy Palette.Builder:

addFilter()

Ta metoda dodaje filtr, który wskazuje, jakie kolory są dozwolone w wynikowej palecie. Przekaż własny obiekt Palette.Filter i zmodyfikuj jego metodę isAllowed(), aby określić, które kolory są odfiltrowywane z palety.

maximumColorCount()

Ta metoda ustawia maksymalną liczbę kolorów w palecie. Wartość domyślna to 16, a optymalna wartość zależy od obrazu źródłowego. W przypadku krajobrazów optymalne wartości mieszczą się w zakresie 8–16, a w przypadku zdjęć z twarzami – 24–32. Generowanie palet z większą liczbą kolorów przez Palette.Builder zajmuje więcej czasu.

setRegion()

Ta metoda wskazuje, którego obszaru bitmapy używa kreator podczas tworzenia palety. Tej metody można używać tylko podczas generowania palety z bitmapy. Nie ma ona wpływu na oryginalny obraz.

addTarget()

Ta metoda umożliwia samodzielne dopasowanie kolorów przez dodanie do kreatora profilu kolorów Target. Jeśli domyślny Target jest niewystarczający, zaawansowani deweloperzy mogą utworzyć własny Target za pomocą Target.Builder.

Wyodrębnianie profili kolorów

Zgodnie ze standardami Material Design biblioteka Palette wyodrębnia z obrazu często używane profile kolorów. Każdy profil jest definiowany przez Target, a kolory wyodrębnione z obrazu bitmapowego są oceniane pod kątem każdego profilu na podstawie nasycenia, luminancji i populacji (liczby pikseli w bitmapie reprezentowanych przez dany kolor). W przypadku każdego profilu kolor z najlepszym wynikiem definiuje profil kolorów danego obrazu.

Domyślnie obiekt Palette zawiera 16 kolorów podstawowych z danego obrazu. Podczas generowania palety możesz dostosować liczbę kolorów za pomocą Palette.Builder. Wyodrębnienie większej liczby kolorów zapewnia więcej potencjalnych dopasowań dla każdego profilu kolorów, ale powoduje też, że Palette.Builder dłużej generuje paletę.

Biblioteka Palette próbuje wyodrębnić te 6 profili kolorów:

• Jasny barwny
• Barwny
• Ciemny barwny
• Jasny wyciszony
• wyciszony,
• Ciemny wyciszony

Każda z metod get<Profile>Color() w Palette zwraca kolor z palety powiązanej z danym profilem, gdzie <Profile> jest zastępowane nazwą jednego z 6 profili kolorów. Na przykład metoda uzyskiwania profilu kolorów Dark Vibrant to getDarkVibrantColor(). Nie wszystkie obrazy zawierają wszystkie profile kolorów, dlatego podaj domyślny kolor, który ma zostać zwrócony.

Rysunek 1 przedstawia zdjęcie i odpowiadające mu profile kolorów z metod get<Profile>Color().

Rysunek 1. Przykładowy obraz i wyodrębnione z niego profile kolorów przy domyślnej maksymalnej liczbie kolorów (16) w palecie.

Tworzenie schematów kolorów za pomocą próbek

Klasa Palette generuje też obiekty Palette.Swatch dla każdego profilu kolorów. Obiekty Palette.Swatch zawierają powiązany kolor dla tego profilu oraz liczbę pikseli w tym kolorze.

Próbki mają dodatkowe metody uzyskiwania dostępu do dodatkowych informacji o profilu kolorów, takich jak wartości HSL i populacja pikseli. Możesz używać próbek, aby tworzyć bardziej kompleksowe schematy kolorów i motywy aplikacji za pomocą metod getBodyTextColor() i getTitleTextColor(). Te metody zwracają kolory odpowiednie do użycia na kolorze próbki.

Każda metoda get<Profile>Swatch() z Palette zwraca próbkę powiązaną z danym profilem, gdzie <Profile> jest zastępowane nazwą jednego z 6 profili kolorów. Chociaż metody get<Profile>Swatch() palety nie wymagają parametrów wartości domyślnej, zwracają null, jeśli dany profil nie istnieje w obrazie. Dlatego przed użyciem próbki sprawdź, czy nie jest ona pusta. Na przykład ten kod pobiera kolor tekstu tytułu z palety, jeśli próbka Vibrant nie ma wartości 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();
    // ...
}

Aby uzyskać dostęp do wszystkich kolorów w palecie, metoda getSwatches() zwraca listę wszystkich próbek wygenerowanych z obrazu, w tym 6 standardowych profili kolorów.

Poniższy fragment kodu używa metod z poprzednich fragmentów kodu, aby synchronicznie wygenerować paletę, pobrać jej żywy wzornik i zmienić kolory paska narzędzi, aby pasowały do obrazu bitmapowego. Rysunek 2 przedstawia wynikowy obraz i pasek narzędzi.

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

Rysunek 2. Przykładowy obraz z paskiem narzędzi w żywych kolorach i odpowiednim kolorem tekstu tytułu.