Funkcja Dynamic Color (wprowadzona w Androidzie 12) umożliwia użytkownikom personalizację aby dopasować tonację do schematu kolorów osobistej tapety. lub wybrać kolor z selektora tapet.
Aby skorzystać z tej funkcji, dodaj interfejs API DynamicColors, który
stosuje ten motyw do Twojej aplikacji lub aktywności, aby lepiej spersonalizować aplikację
po stronie użytkownika.
Na tej stronie znajdziesz instrukcje implementowania kolorów dynamicznych w aplikacji. Ta funkcja jest również dostępna oddzielnie dla widżetów i ikon adaptacyjnych, jak opisano później na tej stronie. Możesz też wypróbować ćwiczenie z programowania.
Jak Android tworzy schematy kolorów
Aby wygenerować motywy kolorów na podstawie tapety użytkownika, Android wykonuje te czynności:
System wykrywa główne kolory na wybranym obrazie tapety i wyodrębnia kolor źródłowy.
System wykorzystuje ten kolor źródłowy do dalszej ekstrapolacji pięciu kolorów kluczowych. znane jako Podstawowe, Dodatkowe, Tertiary, Neutralne i Neutralne wersji.
Rys. 2. Przykład wyodrębniania kolorów źródłowych z obrazu tapety i wyodrębniania 5 kluczowych kolorów System interpretuje każdy kolor klawiszy na paletę 13 tonów.
Rysunek 3. Przykład wygenerowania danej palety barw System używa tej jednej tapety do wygenerowania 5 różnych schematów kolorystycznych, które stanowią podstawę dla motywów ciemnych i jasnych.
Sposób wyświetlania wariantów kolorów na urządzeniu użytkownika
Od Androida 12 użytkownicy mogą wybierać warianty kolorów wyodrębnionych z tapety i różne motywy, a w Androidzie 13 dodano więcej wariantów. Dla: Na przykład użytkownik z telefonem Pixel z Androidem 13 wybierze wariant z menu Tapety i stylem, jak widać na rysunku 4.
W Androidzie 12 dodano wariant Tonal Spot, a w Androidzie 13 – warianty Neutralny, Jasny tonalny i Wyrazisty. Każda wersja ma unikalną recepturę, która przekształca kolory zastosowane w tapecie użytkownika za pomocą intensywności i obrotu odcienia. W tym przykładzie pokazano jedną paletę kolorów wyrażoną za pomocą 4 wariantów kolorystycznych.
Twoja aplikacja nadal używa tych samych tokenów do uzyskiwania dostępu do tych kolorów. Więcej informacji informacje o tokenach znajdziesz w sekcji Tworzenie motywu za pomocą tokenów na tej stronie.
Pierwsze kroki z Compose
Jeśli tworzysz swój UI za pomocą funkcji Utwórz, zapoznaj się z Wybór motywu Material Design – zawiera szczegółowe informacje na temat stosowania dynamicznych kolorów w .
Pierwsze kroki w Zdjęciach
Kolory dynamiczne można zastosować na poziomie aplikacji lub aktywności. Aby to zrobić, zadzwoń:
applyToActivitiesIfAvailable(), aby zarejestrować
ActivityLifeCycleCallbacks do aplikacji.
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
Java
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
Następnie dodaj motyw do aplikacji.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Utwórz motyw za pomocą tokenów
Kolory dynamiczne korzystają z tokenów projektowania, aby przypisywać kolory uproszczenie i spójność poszczególnych elementów interfejsu. Token projektu pozwala do semantycznego przypisywania ról kolorów zamiast ustalonej wartości, do różnych elementów interfejsu. Dzięki temu system tonalny aplikacji będzie bardziej elastyczny, skalowalny i spójny. Jest to szczególnie przydatne podczas projektowania jasnych i ciemnych motywów oraz kolorów dynamicznych.
Poniższe fragmenty kodu po zastosowaniu dynamicznych tokenów kolorów przedstawiają przykłady motywów jasnego i ciemnego oraz odpowiadający kod XML kolorów.
Jasny motyw
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
Ciemny motyw
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
Colors.xml
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
Więcej informacji:
Więcej informacji o dynamicznych kolorach, kolorach niestandardowych i generowaniu tokenów znajdziesz na stronie Dynamiczne kolory w Material 3.
Aby wygenerować podstawową paletę kolorów oraz kolory i motyw aplikacji, zaznacz znajdziesz w narzędziu Material Theme Builder, wtyczka Figma lub w przeglądarce).
Aby dowiedzieć się więcej o tym, jak korzystanie ze schematów kolorów może zwiększyć dostępność zapoznaj się ze stroną Material 3 na temat Ułatwienia dostępu w systemie kolorów
Zachowaj kolory niestandardowe lub marki
Jeśli aplikacja ma kolory niestandardowe lub marki, których nie chcesz zmieniać za pomocą atrybutu użytkownika, możesz dodawać je pojedynczo podczas tworzenia koloru oszustw. Na przykład:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Możesz też użyć kreatora motywów Material, aby zaimportować dodatkowe kolory, które rozszerzą Twój schemat kolorów, tworząc w ten sposób ujednolicony system kolorów.
W przypadku tej opcji użyj opcji HarmonizedColors, aby zmienić ton reklamy niestandardowej
kolorów. Pozwala to uzyskać wizualną równowagę i przystępny kontrast.
dzięki kolorom wygenerowanym przez użytkowników. Występuje w czasie wykonywania kodu:
applyToContextIfAvailable().
Zapoznaj się ze wskazówkami Material 3 dotyczącymi harmonizacji kolorów niestandardowych.
Stosowanie dynamicznych kolorów do ikon i widżetów adaptacyjnych
Oprócz włączenia dynamicznych motywów w aplikacji możesz też Dynamiczne motywy kolorystyczne dla widżety zaczynające się od Android 12 oraz Ikony adaptacyjne zaczynają się za Android 13.