Style API to nowy paradygmat dostosowywania lub „stylowania” elementów i komponentów w Jetpack Compose, co tradycyjnie odbywało się za pomocą modyfikatorów. Został on zaprojektowany z myślą o umożliwieniu głębszego i łatwiejszego dostosowywania.
Interfejs Styles API zwiększa elastyczność w przypadku różnych formatów, zapewnia lepszą wydajność i ułatwia tworzenie niestandardowych systemów projektowania. Nawet jeśli nie potrzebujesz komponentów niestandardowych, interfejs Styles API ma wiele zalet dla Twojego systemu projektowania.
Ważne jest to, że style nie zastępują modyfikatorów, ale zastępują parametry stylów, takie jak dopełnienie i kolory. Aby zwiększyć elastyczność i wydajność, zalecamy przejście z parametrów na style.
Korzyści ze stylów
- Upraszcza stylizację opartą na stanie: interfejs API zapewnia bardziej zwięzły i deklaratywny sposób definiowania stylów, które zmieniają się w zależności od różnych stanów (np. najechany, zaznaczony, naciśnięty), co znacznie zmniejsza ilość powtarzalnego kodu w porównaniu z systemem modyfikatorów.
- Ulepsza przejścia między stanami animacji: interfejs Style API umożliwia wbudowaną animację właściwości stylu między stanami z idealnymi parametrami wydajności, unikając ponownych kompozycji, które występują w przypadku obecnego podejścia
animateColorAsState. - Usprawnia interfejsy API komponentów: dzięki wprowadzeniu jednego parametru Style do dostosowywania interfejsy API komponentów są znacznie uproszczone i oferują większą elastyczność.
- Mniej ponownych kompozycji, co przekłada się na lepszą wydajność w porównaniu z modyfikatorami: style działają w fazach rysowania i układu Compose, pomijając fazę kompozycji.
- Bardziej ustandaryzowany zestaw interfejsów API: standardowy zestaw właściwości stylistycznych umożliwia stylizowanie dowolnego komponentu.
Podstawowe pojęcia
| Pomysł | Opis |
|---|---|
Style |
Interfejs, który określa wygląd elementu interfejsu i zawiera standardowy zestaw właściwości, które można dostosowywać. Jest podobny do stylów CSS i można go dostosowywać lokalnie lub za pomocą motywu. Style zastępują się nawzajem.Ustawienie właściwości 2 razy (np. background()) powoduje, że otrzymujesz jedną, ostateczną wartość. |
StyleScope |
Zakres odbiorcy dla funkcji applyStyle() w ramach stylu. Umożliwia definiowanie właściwości wizualnych (wypełnienie, tło, obramowanie itp.) i dostęp do bieżącego StyleState. |
StyleState |
Określa stan (np. isEnabled, isPressed, isChecked, stany niestandardowe), którego możesz użyć w stylu, aby zdefiniować używanie stylów warunkowych. |
Pierwsze kroki: dodawanie zależności
Aby używać interfejsów API we własnym projekcie, musisz mieć najnowszą wersję alfa biblioteki Jetpack Compose Foundation. W pliku settings.gradle.kts dodaj repozytorium Maven z wersją roboczą do listy repozytoriów do użycia.
W pliku libs.versions.toml lub bezpośrednio w pliku app/build.gradle.kts ustaw wersję Compose na 1.11.0-alpha06:
compose = "1.11.0-alpha06"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }