Wybieranie kolorów za pomocą interfejsu Palette API

Dobry projekt wizualny jest niezbędny do stworzenia udanej aplikacji, a schematy kolorów są jego podstawowym elementem. 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ć kartę tytułową utworu w skoordynowanych kolorach na podstawie okładki albumu lub dostosować kolor paska narzędzi aplikacji, gdy zmieni się jej obraz tła. Obiekt Palette umożliwia dostęp do kolorów na obrazie Bitmapa także udostępnia 6 głównych profili kolorów z mapy bitowej, które pomogą Ci w podejmowaniu decyzji projektowych.

Konfigurowanie biblioteki

Aby używać biblioteki Palette, dodaj do pliku build.gradle te wiersze:

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

Tworzenie palety

Obiekt Palette umożliwia dostęp do podstawowych kolorów na obrazie oraz do odpowiadających im kolorów tekstu nakładanego. Używaj palet, aby projektować 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 obiektu Bitmap. Następnie możesz użyć Palette.Builder, aby dostosować paletę przed jej wygenerowaniem. W tej sekcji opisujemy generowanie i dostosowywanie palety na podstawie obrazu bitmapowego.

Generowanie instancji palety

Wygeneruj instancję Palette, używając jej from(Bitmap bitmap) metody, aby najpierw utworzyć Palette.Builder z Bitmap.

Kreator może generować 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 obu typów generowania palety:

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

Jeśli musisz stale generować palety dla posortowanej listy obrazów lub obiektów, rozważ buforowanie instancji Palette aby zapobiec spowolnieniu interfejsu. Nie twórz palet w głównym wątku.

Dostosowywanie palety

Klasa Palette.Builder umożliwia dostosowanie palety przez wybranie liczby kolorów w palecie wynikowej, obszaru obrazu, którego kreator używa do wygenerowania palety, oraz kolorów uwzględnionych w palecie. Możesz na przykład odfiltrować kolor czarny lub sprawić, aby kreator używał tylko górnej połowy obrazu do wygenerowania palety.

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 palecie wynikowej. Przekaż własny Palette.Filter i zmodyfikuj jego metodę isAllowed(), aby określić, które kolory mają być odfiltrowane z palety.

maximumColorCount()

Ta metoda ustawia maksymalną liczbę kolorów w palecie. Wartość domyślna to 16, a optymalna zależy od obrazu źródłowego. W przypadku krajobrazów optymalne wartości wynoszą od 8 do 16, a w przypadku zdjęć z twarzami – zwykle od 24 do 32. Palette.Builder trwa dłużej, aby generować palety z większą liczbą kolorów.

setRegion()

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

addTarget()

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

Wyodrębnianie profili kolorów

Na podstawie standardów Material Design, biblioteka Palette wyodrębnia z obrazu najczęściej używane profile kolorów. Każdy profil jest zdefiniowany przez Target, a kolory wyodrębnione z obrazu bitmapowego są oceniane na podstawie nasycenia, luminancji i populacji (liczby pikseli w mapie bitowej reprezentowanych przez kolor). W przypadku każdego profilu kolor z najlepszym wynikiem określa ten profil koloru dla danego obrazu.

Domyślnie obiekt Palette zawiera 16 podstawowych kolorów z danego obrazu. Podczas generowania palety możesz dostosować liczbę kolorów za pomocą Palette.Builder. Wyodrębnianie większej liczby kolorów zapewnia więcej potencjalnych dopasowań do każdego profilu kolorów, ale wydłuża też czas generowania palety przez Palette.Builder.

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

• Jasny barwny
• Barwny
• Ciemny barwny
• Jasny stonowany
• Stonowany
• Ciemny stonowany

Każda z metod get<Profile>Color() w Palette zwraca kolor w palecie powiązany z danym profilem, gdzie <Profile> jest zastępowany nazwą jednego z 6 profili kolorów. Na przykład metoda pobierania profilu koloru ciemnego barwnego to getDarkVibrantColor(). Ponieważ nie wszystkie obrazy zawierają wszystkie profile kolorów, podaj domyślny kolor do zwrócenia.

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

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

Klasa Palette generuje też Palette.Swatch obiekty dla każdego profilu kolorów. Obiekty Palette.Swatch zawierają powiązany z danym profilem kolor oraz jego populację w pikselach.

Próbki mają dodatkowe metody umożliwiające dostęp do większej ilości informacji o profilu kolorów, takich jak wartości HSL i populacja pikseli. Za pomocą próbek możesz tworzyć bardziej kompleksowe schematy kolorów i motywy aplikacji, korzystając z metod getBodyTextColor() i getTitleTextColor(). Te metody zwracają kolory odpowiednie do użycia na kolorze próbki.

Każda z metod get<Profile>Swatch() w Palette zwraca próbkę powiązaną z danym profilem, gdzie <Profile> jest zastępowany nazwą jednego z 6 profili kolorów. Chociaż metody palety get<Profile>Swatch() nie wymagają parametrów wartości domyślnej , zwracają wartość null, jeśli dany profil nie występuje na 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 barwna nie jest pusta:

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

Aby uzyskać dostęp do wszystkich kolorów w palecie, użyj metody getSwatches(), która zwraca listę wszystkich próbek wygenerowanych na podstawie obrazu, w tym standardowych 6 profili kolorów.

Ten fragment kodu używa metod z poprzednich fragmentów kodu, aby synchronicznie wygenerować paletę, pobrać jej próbkę barwną i zmienić kolory paska narzędzi tak, aby pasowały do obrazu bitmapowego. Rysunek 2 przedstawia wynikowy obraz i pasek narzędzi.

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