Motyw to zestaw stylów lub atrybutów, takich jak kolor, typ i kształt, które mogą wpływać na wygląd i sposób działania urządzenia mobilnego lub urządzenia z dużym ekranem, w aplikacji.
Wnioski
- Aby zapewnić użytkownikom bardziej spersonalizowane i łatwo dostępne działanie, upewnij się, że Twoja aplikacja korzysta z preferencji systemowych, takich jak jasny lub ciemny motyw, dynamiczny kontrast.
- Utwórz motyw niestandardowy, który będzie używany jako motyw zastępczy, gdy opcja dynamiczny będzie niedostępna.
- Podczas korzystania z różnych motywów weź pod uwagę ustawienia wpisywania tekstu.
- Zawsze sprawdzaj kontrast tekstu i powierzchni, aby zapewnić czytelność.
Rodzaje motywów
Motywy są oparte na systemie lub aplikacji. Motywy systemowe mogą mieć wpływ na całą witrynę użytkownika interfejsu urządzenia i udostępniać odpowiednie opcje w ustawieniach urządzenia, wpływa tylko na aplikację, w której został zaimplementowany.
Aby aplikacja mogła się wyświetlać, musi wdrożyć dowolny z tych motywów, ale muszą mieć zastosowanie motywy aplikacji. tylko w aplikacji, a nie w innym miejscu na urządzeniu. Możesz też zastąpić niektóre w ustawieniach motywu systemowego.
Motywy systemowe
Motywy systemowe obowiązują na całym urządzeniu z Androidem, w tym w poszczególnych aplikacjach w zależności od ustawień użytkownika. Motywy systemowe obejmują jasne i ciemne motywy, przez użytkowników, jak i od producenta.
Jasne i ciemne motywy
Jasny motyw (tryb dzienny) składa się z jasnego trybu wyświetlacza o wyższym luminancja i powierzchnie oparte na wysokich tonach. Natomiast ciemny motyw lub trybie nocnym, przesuwa elementy interfejsu w celu zmniejszenia luminancji. Powierzchnie są utworzone w ciemnym kolorze szarości lub niskich wartości tonalnych.
Ciemny motyw ma wiele zalet: zwiększa czytelność ekranu w słonecznie lub przy słabym świetle w warunkach oświetleniowych, zmniejszając zmęczenie oczu przez niższą jasność baterii. Ta funkcja jest często najczęściej pojawiającą się wśród użytkowników funkcja aplikacji.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-1-light-and-dark-icons.png?authuser=8&hl=pl)
Stosując jasne i ciemne motywy, weź pod uwagę te kwestie:
- Możesz dostosować schemat kolorów, aby zwiększyć wyrazistość. Jeśli używasz Material Theme Builder tworzy schemat, automatycznie tworzy ciemny motyw oszustw. Więcej informacji o dostosowywaniu materiału i systemie kolorów do tworzenia motyw marki.
- Użytkownicy mogą ustawić jasny lub ciemny motyw w ustawieniach wyświetlacza na poziomie systemu „Zawsze włączone”, „Zawsze wyłączone” lub automatyczne zależnie od pory dnia. Zalecamy zgodnie z preferencjami użytkownika w systemie, ale warto też tworzyć w aplikacji elementy sterujące, aby zapewnić użytkownikom bardziej szczegółowe modyfikacje
- Treści internetowe w komponentach WebView mogą też mieć styl jasny, ciemny lub domyślny. Przeczytane jak ciemny motyw jest obsługiwany w komponentach WebView.
- Jeśli użytkownicy ją włączyli, Android może wymusić włączenie ciemnego motywu. Możesz też utworzyć niestandardowy ciemny motyw zapewniający większą kontrolę.
- Jeśli użytkownik nie włączył innych motywów lub ustawień, możesz: „blokowanie” do jasnego motywu. Nie zalecamy jednak tego, co może być niezgodne z potrzebami użytkownika w zakresie ułatwień dostępu i personalizacji.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-2-light-and-dark-content.png?authuser=8&hl=pl)
Motywy wygenerowane przez użytkowników
Motywy użytkowników są obsługiwane przez dynamiczny kolor, są dostępne w Material You od Androida 12. Po włączeniu dynamiczne Kolor pobiera niestandardowe kolory z tapety użytkownika, które mają zostać zastosowane do jego aplikacji i interfejsie systemu. Ta paleta kolorów jest używana jako punkt początkowy do generowania jasnych i ciemnych schematów kolorów.
Ustawienia czcionki można też zmienić w ustawieniach urządzenia, aby dostosować preferencji i potrzeb związanych z ułatwieniami dostępu. Te ustawienia mogą powinny trafiać do aplikacji, więc używaj skalowalnych wartości pikseli dla czcionek.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-3-scheme-derived-from-wallpaper.png?authuser=8&hl=pl)
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-4-app-ui-color-scheme-wallpaper.png?authuser=8&hl=pl)
Motywy producenta
Producenci urządzeń mogą udostępniać dodatkowe zastrzeżone możliwości tworzenia motywów co może mieć wpływ na interfejs systemowy i ustawienia wyświetlania.
Motywy aplikacji
Wartość bazowa
Komponenty Material w bibliotece Material Design stanowią motyw podstawowy, korzysta ze schematu kolorów fioletowych i czcionki Roboto. Każda aplikacja, która nie ma zdefiniowanego motywu przywraca te atrybuty bazowe.
Niestandardowy (marka)
Motywy niestandardowe pozwalają lepiej dopasować wygląd aplikacji do jej wyglądu i stylu lub na działanie kreacji zastępczej, gdy określone motywy systemowe są niedostępne. Jest to przydatne niezależnie od tego, czy pracujesz z pełnym niestandardowym systemem projektowania, przewodnik po marce lub kilka z Twoich ulubionych kolorów.
Aplikacja może mieć też wiele schematów niestandardowych, niezależnie od tego, czy użytkownik może mieć pełne schematy do wyboru, inspirowanych treściami lub elementów podmarkowych.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-5-baseline-and-custom-theme.png?authuser=8&hl=pl)
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-6-custom-buttons.png?authuser=8&hl=pl)
Treść
Aby wyróżnić niektóre treści, interfejs użytkownika może użyć dynamicznych kolorów, aby dziedziczyć kolory z tych treści. Kolor treści dobrze sprawdza się w przypadku jednego głównego źródła treści, pamiętaj, aby zachować ostrożność w przypadku widoków z wieloma źródłami treści.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-7-key-art.png?authuser=8&hl=pl)
Motyw dotyczy zwykle całej aplikacji, ale można go też stosować w wybranych krajach. i innych tematach. Unikaj zbyt wielu motywów i kombinacji, zachowując z hierarchią: źródło motywu podstawowego (dynamiczne lub niestandardowe), dotyczy większości interfejsu użytkownika.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-8-dynamic-colors.png?authuser=8&hl=pl)
Materiał
Material Design zapewnia bazowy motyw i systemy tematyczne (kolor, typ, kształt). Motywy materiału można również rozszerzyć, aby uzyskać dodatkowe do motywu.
Marka
Jeśli systemy motywów Material Design nie są zgodne z oczekiwanym wyglądem i stylem w swojej aplikacji, możesz zastosować w pełni niestandardowy motyw. Pamiętaj, aby przetestować niestandardowe dla kontrastu i czytelności.
Zobacz, jak wdrożyć system niestandardowy w funkcji Compose
Atrybuty motywu
Atrybuty motywu są zgodne z popularnymi stylami wizualnymi używanymi w projektowaniu UI, wywołują różne aspekty estetyki. Te właściwości w aplikacji są często powiązane z atrybutem Material systemów motywów, aby umożliwiać ich dostosowywanie.
Kolor
Używaj kolorów, aby wyrażać styl i określać znaczenie. Ustawianie kolorów aplikacji może mieć kluczowe znaczenie dla personalizacji, określenia celu semantycznego i określania tożsamości marki.
Schemat kolorów w motywie to grupa odcieni przypisanych do określonych ról które są mapowane na komponenty. Dowiedz się więcej o kolorach na Androidzie UI i system kolorów Material 3.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-9-color.png?authuser=8&hl=pl)
Typ
Czcionka systemowa Androida to Roboto (dostępna bezpłatnie dla wszystkich aplikacji), ale mogą dostosować typ. Weź pod uwagę czytelność wybranych czcionek, do których chcesz dopasować swoje role. Więcej informacji o typach stosowania
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-10-type.png?authuser=8&hl=pl)
Kształt
Dostosowanie kształtu rogów kontenera poza domyślne wartości podstawowe pomaga określić charakter aplikacji. Możesz na przykład użyć zaokrąglonych rogów, aby Nadaj filmowi bardziej miękki i przyjemny charakter. Możesz też użyć kanciastego cięcia, aby uzyskać bardziej poważny efekt. Sprawdź tokeny kształtów i style komponentów Material Design.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-11-container-corner-shapes.png?authuser=8&hl=pl)
Ikony
Ikony Material Design możesz wykorzystać w aplikacji w 5 stylach: Kontur, ostry, zaokrąglony, dwukolorowy. Używaj tego samego stylu ikon w całym aby zachować spójny i dopracowany wygląd.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-12-material-icon-styles.png?authuser=8&hl=pl)
Inne atrybuty motywu
Kolory, czcionka i kształt składają się na główne systemy motywów Material, nie ograniczają się do koncepcji, na których opiera się Material. Dostępne opcje modyfikować istniejące systemy i wprowadzać zupełnie nowe – z nowymi klasami i aby dostosować inne koncepcje do motywów. Konieczne może być też wykonanie tych czynności: rozszerzać lub zastąpić istniejące systemy tak, aby korzystały z atrybutów niestandardowych poza tymi, Na przykład można dodać system gradientów lub odstępów wymiarów.
Stosowanie motywu w aplikacji
Motyw, styl i zajęcia
Zarówno motywy, jak i style mogą mieć wiele atrybutów projektu. Styl może być są niezależne od motywu i odnoszą się do wyglądu pojedynczego elementu (albo widoku), podczas gdy motyw możesz ustawić dla wielu elementów, a nawet dla całego . Styl to wybór stylistyczny do wielokrotnego użytku, analogiczny do stylu lub tokena oprogramowania do projektowania. np. styl Body Large jest stylem, a Jasny i Ciemny to motywy.
Wdrażanie motywu w funkcji tworzenia wiadomości
Motyw zwykle składa się z kilku systemów grupujących wspólne elementy wizualne i koncepcje behawioralne, które modelujesz za pomocą klas z wartościami tematycznymi.
Więcej informacji o korzystaniu z Jetpack znajdziesz w sekcji Material Design 3 w Compose. Compose, aby utworzyć implementację motywu Material Design 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Wdrażanie motywu w Zdjęciach
Motywy to zbiór zasobów z nazwami semantycznymi, których można używać w całej aplikacji. Motywy mają taką samą składnię stylu.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Komponenty WebView
Treści internetowe w komponencie WebView mogą też mieć styl jasny, ciemny lub domyślny. Dowiedz się, jak to zrobić dostępny jest ciemny motyw w komponentach WebView.
Dostosowywanie motywu Material
Możesz użyć wtyczki Material Theme Builder Figma, aby: dostosować motyw Material Design. Stworzenie z nim motywu ułatwia wdrożenie układanie plików z wygenerowanymi jasnymi i ciemnymi schematami kolorów, , aby jeszcze bardziej go dostosować, aktualizując wyeksportowany plik motywu poprzez dokładne wartości.
![](https://developer.android.google.cn/static/images/design/ui/mobile/themes-13-Material-Theme-Builder.png?authuser=8&hl=pl)