Wybieranie kolorów za pomocą interfejsu Palette API

Aby aplikacja odniosła sukces, niezbędny jest dobry projekt wizualny, a schematy kolorów jako główny element projektowania. Biblioteka palet to biblioteka Jetpacka, która wyodrębnia wyróżniające się kolory z obrazów, aby tworzyć atrakcyjne wizualnie aplikacje.

Biblioteki palety możesz używać do projektowania motywów układu i zastosowywania niestandardowych kolorów do elementów wizualnych w aplikacji. Możesz na przykład użyć palety do utworzenia kolorystycznie dopasowanej karty tytułowej utworu na podstawie okładki albumu lub dostosować kolor paska narzędzi aplikacji, gdy zmieni się obraz tła. Palette daje dostęp do kolorów w Bitmap obraz wraz z sześcioma głównymi profilami kolorów z bitmapy, możliwości wyboru układu.

Konfigurowanie biblioteki

Aby użyć biblioteki palet, dodaj następujące elementy do build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

Odlotowe

android {
    compileSdkVersion 33
    ...
}

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

Tworzenie palety

Obiekt Palette zapewnia dostęp do kolorów podstawowych na obrazie oraz do odpowiadających im kolorów na nałożonym tekście. Palety możesz używać do projektowania stylu aplikacji i dynamicznego zmieniania jej schematu kolorów na podstawie wybranego obrazu źródłowego.

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

Wygeneruj instancję palety

Wygeneruj wystąpienie Palette, używając do tego metody from(Bitmap bitmap), aby najpierw utworzyć obiekt Palette.Builder z obiektu Bitmap.

Generator może generować paletę synchronicznie lub asynchronicznie. Jeśli chcesz utworzyć paletę na tym samym wątku, na którym wywoływana jest metoda, użyj synchronicznego generowania palety. Jeśli paleta jest generowana asynchronicznie w innym wątku, użyj metody onGenerated(), aby uzyskać dostęp do palety zaraz po jej utworzeniu.

Poniższy fragment kodu zawiera przykładowe metody obu typów generowania 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 chcesz stale generować palety dla posortowanej listy obrazów lub obiektów, rozważ przechowywanie w pamięci podręcznej instancji Palette, aby uniknąć spowolnienia działania interfejsu. Nie twórz palet w głównym wątku.

Dostosuj paletę

Palette.Builder umożliwia dostosowanie palety przez wybranie ile kolorów jest w palecie kolorów, jaki obszar obrazu jest używane przez narzędzie do generowania palety oraz informacje dotyczące kolorów paletę kolorów. Możesz na przykład odfiltrować kolor czarny lub upewnić się, że kreator używa tylko górnej połowy obrazu do wygenerowania palety.

Dostosuj rozmiar i kolory palety, używając poniższych metod Zajęcia Palette.Builder:

addFilter()

Ta metoda dodaje filtr, który wskazuje, jakie kolory są dozwolone paletę kolorów. Weź udział we własnym imieniu Palette.Filter i zmodyfikować jego metodę isAllowed() w celu określenia, które kolory odfiltrowane z palety.

maximumColorCount()

Ta metoda ustawia maksymalną liczbę kolorów w palecie. Domyślny wynosi 16, a optymalna wartość zależy od obrazu źródłowego. W przypadku krajobrazów optymalne wartości wahają się od 8 do 16, a zdjęcia z twarzami zwykle mają wartości od 24 do 32. Palette.Builder zajmuje więcej czasu generować palety z większą liczbą kolorów.

setRegion()

Ta metoda wskazuje, której części bitmapy używa kreator podczas tworzenia palety. Tej metody możesz użyć tylko podczas generowania palety z bitmapy i nie ma wpływu na oryginalny obraz.

addTarget()

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

Wyodrębnij profile kolorów

Biblioteka Paleta na podstawie standardów Material Design wyodrębnia z obrazu najczęściej używane profile kolorów. Każdy profil jest zdefiniowany przez Target, a kolory wyodrębnione z obrazu bitmapy są oceniane na podstawie nasycenia, luminacji i liczby (liczby pikseli w bitmapie reprezentowanych przez kolor). W przypadku każdego profilu kolor o najlepszym wyniku definiuje profil kolorów dla 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ększy potencjał pasuje do każdego profilu kolorów, ale powoduje też Palette.Builder , aby trwało to dłużej podczas generowania palety.

Biblioteka palet próbuje wyodrębnić sześć następujących profili kolorów:

• Jasny żywy
• Barwny
• Jasne
• Lekko wyciszone
• Wyciszone
• Ciemny wyciszony

Każda z metod get<Profile>Color() w Palette zwraca kolor z paleta powiązanej z danym profilem, gdzie <Profile> jest zastąpione nazwą jednego z 6 profili kolorów. Na przykład metoda uzyskania profilu kolorów o wyrazistych ciemnych kolorach to getDarkVibrantColor(). Ponieważ nie wszystkie obrazy zawierają wszystkie profile kolorów, podaj domyślny kolor do zwrócenia.

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

Rysunek 1. Przykładowy obraz i jego wyodrębnione profile kolorów z uwzględnieniem domyślna maksymalna liczba kolorów (16) w palecie.

Używaj próbek do tworzenia schematów kolorów

Klasa Palette generuje też obiekty Palette.Swatch dla każdego profilu kolorów. Palette.Swatch obiekty zawierają powiązany kolor z danym profilem, jak również populację koloru pikseli.

Próbki mają dodatkowe metody dostępu do dodatkowych informacji o profilu kolorów, np. wartości HSL czy populacji pikseli. Możesz używać próbek, aby: mogą pomóc w tworzeniu bardziej kompleksowych schematów kolorów i motywów aplikacji za pomocą getBodyTextColor() oraz getTitleTextColor() . Te metody zwracają kolory odpowiednie do użycia w przypadku koloru próbki.

Każda get<Profile>Swatch() metoda z Palette zwraca próbkę powiązaną z konkretnym profilem, gdzie <Profile> należy zastąpić nazwą jednego z wraz z sześcioma profilami kolorów. Chociaż metody palety get<Profile>Swatch() nie wymagają domyślnych parametrów wartości, zwracają null, jeśli dany profil nie istnieje na obrazie. Dlatego przed użyciem swatcha sprawdź, czy nie jest on nullowy. Na przykład poniższy kod pobiera kolor tekstu tytułu z paletę, jeśli próbka koloru żywych 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 na palecie, metoda getSwatches() zwraca listę wszystkich próbek wygenerowanych z obrazu, w tym standardowych 6 profili kolorów.

Ten fragment kodu korzysta z metod z poprzednich fragmentów kodu, aby synchronicznie generować paletę, pobierać jej żywe próbki i zmieniać kolory paska narzędzi, tak aby pasowały do obrazu bitmapowego. Ilustracja 2 przedstawia obrazu i paska 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ład obrazu z paskiem narzędzi w żywych kolorach i odpowiednim kolorze tekstu tytułu.