Aby aplikacja odniosła sukces, niezbędny jest dobry projekt wizualny, a schematy kolorów jako główny element projektowania. Biblioteka palet to Jetpack biblioteka, która wyodrębnia najważniejsze kolory z obrazów, aby tworzyć atrakcyjne wizualnie aplikacji.
Zaprojektować układ za pomocą biblioteki palet
motywy i zastosuj niestandardowe kolory do
elementów wizualnych w aplikacji. Można na przykład użyć palety do utworzenia
kolorowa karta tytułowa utworu związana z okładką albumu lub
koloru paska narzędzi aplikacji po zmianie obrazu 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' }
Utwórz paletę
Obiekt Palette
zapewnia dostęp do kolorów podstawowych w
oraz odpowiednich kolorów dla nakładanego tekstu. Użyj palet do:
Zaprojektuj styl aplikacji i dynamicznie zmieniaj schemat kolorów w zależności od tego,
dla danego obrazu źródłowego.
Aby utworzyć paletę, najpierw utwórz wystąpienie
Palette.Builder
z: Bitmap
. Następnie możesz użyć usługi Palette.Builder
do
dostosować paletę przed jej wygenerowaniem. Ta sekcja opisuje paletę
do generowania i dostosowywania obrazu bitmapowego.
Wygeneruj instancję palety
Wygeneruj instancję Palette
za pomocą
from(Bitmap bitmap)
aby najpierw utworzyć Palette.Builder
z
Bitmap
Kreator może generować paletę synchronicznie lub asynchronicznie. Używaj
synchronicznego generowania palety, jeśli ma zostać utworzona
jako wywoływanej metody. Jeśli asynchronicznie wygenerujesz paletę,
w innym wątku, użyj
onGenerated()
umożliwia dostęp do palety natychmiast po jej utworzeniu.
Następujący fragment kodu zawiera przykładowe metody dla obu typów palet generacja:
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. } }); }
Aby na bieżąco generować palety dla posortowanej listy obrazów lub
obiektów, rozważ
umieszczamy ją w pamięci podręcznej
Palette
instancji, aby zapobiec spowolnieniu działania interfejsu użytkownika. Nie twórz wartości
palet
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żna na przykład odfiltrować czarny kolor lub usunąć
do wygenerowania palety używana jest tylko górna połowa obrazu.
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 pozwala ustawić maksymalną liczbę kolorów w palecie. Domyślny
wynosi 16, a optymalna wartość zależy od obrazu źródłowego. Dla:
krajobrazów, optymalne wartości mieszczą się w przedziale od 8 do 16, a na zdjęciach przedstawiających twarze
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 obszar mapy bitowej, z której korzysta kreator, gdy aby utworzyć paletę. Tej metody możesz użyć tylko podczas generowania palety z bitmapy i nie ma wpływu na oryginalny obraz.
addTarget()
- Ta metoda pozwala na własne dopasowywanie kolorów poprzez dodanie
Target
z profilem kolorów. Jeśli domyślna wartośćTarget
to niewystarczające, zaawansowani programiści mogą tworzyć własneTarget
za pomocąTarget.Builder
Wyodrębnij profile kolorów
Na podstawie
standardy Material Design
Design, biblioteka Palette wyodrębnia powszechnie używane profile kolorów z
. Każdy profil jest definiowany przez Target
i wyodrębnione kolory
z obrazu bitmapy są oceniane względem każdego profilu na podstawie nasycenia,
luminancja i populacja (liczba pikseli na bitmapie reprezentowana przez
kolor). Dla każdego profilu kolor z najlepszym wynikiem określa ten kolor.
danego zdjęcia.
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
- Ciemny żywy
- Przygaszone światło
- Wyciszone
- Ciemny wyciszony
Każda z get<Profile>Color()
metod w
Palette
zwraca kolor z palety, z którą powiązane jest dane
w danym profilu, gdzie <Profile>
jest zastępowany przez
nazwa jednego z sześciu profili kolorów. Na przykład, aby uzyskać
Obecny profil kolorów: ciemny, żywy
getDarkVibrantColor()
Ponieważ nie wszystkie obrazy zawierają wszystkie profile kolorów, ustaw kolor domyślny
.
Ilustracja 1 przedstawia zdjęcie i odpowiadające mu profile kolorów z
get<Profile>Color()
metody.
![Obraz przedstawiający zachód słońca po lewej stronie i wyodrębnioną paletę kolorów po prawej.](https://developer.android.google.cn/static/training/material/images/palette-library-color-profiles_2-1_2x.png?authuser=8&hl=pl)
Używaj próbek do tworzenia schematów kolorów
Klasa Palette
generuje też
Palette.Swatch
obiekty z 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 zamiast barwy próbki
koloru.
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ż paleta
get<Profile>Swatch()
metody nie wymagają ustawienia domyślnego
wartości, zwracają wartość null
, jeśli dany profil
nie ma na obrazie. Dlatego najpierw sprawdź, czy próbka nie ma wartości null
za jego pomocą. 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 z palety, klawisz
getSwatches()
zwraca listę wszystkich próbek wygenerowanych z obrazu, łącznie z
standardowych 6 profili kolorów.
Ten fragment kodu używa metod z poprzedniego kodu aby synchronicznie wygenerować paletę, uzyskać barwną próbkę kolory paska narzędzi, aby pasowały do obrazu bitmapy. 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); }
![Obraz przedstawiający zachód słońca i pasek narzędzi z tekstem TitleTextColor w środku](https://developer.android.google.cn/static/training/material/images/palette-library-title-text-color_2-1_2x.png?authuser=8&hl=pl)