Korzystanie z Jetpack Compose na Wear OS

Funkcja tworzenia wiadomości na Wear OS działa podobnie jak funkcja tworzenia wiadomości na urządzeniach mobilnych. Istnieją jednak pewne kluczowe różnice. W tym przewodniku omawiamy podobieństwa i różnice.

Compose na Wear OS jest częścią Jetpacka na Androida i podobnie jak inne biblioteki Jetpacka na Wear pomaga szybciej pisać lepszy kod. To zalecane podejście do tworzenia interfejsów użytkownika w przypadku aplikacji na Wear OS.

Jeśli nie wiesz, jak korzystać z pakietu Jetpack Compose, zapoznaj się z ścieżką Compose. Wiele zasad programowania w Compose na urządzeniach mobilnych ma zastosowanie również w przypadku Compose na Wear OS. Więcej informacji o ogólnych zaletach deklaratywnego frameworku UI znajdziesz w artykule Dlaczego warto używać Compose. Więcej informacji o Compose na Wear OS znajdziesz w ścieżce Compose na Wear OS oraz w repozytorium przykładów na Wear OS na GitHub.

Material Design w Jetpack Compose na Wear OS

Jetpack Compose na Wear OS oferuje implementację Material 2.5, która ułatwia projektowanie bardziej angażujących aplikacji. Komponenty Material Design na Wear OS są oparte na motywie Material Design na Wear OS. Takie motywy to systematyczny sposób na dostosowywanie projektu Material Design i lepsze odzwierciedlanie marki produktu.

Zgodność

Funkcja tworzenia wiadomości na Wear OS działa na zegarkach z Wear OS 3.0 (poziom interfejsu API 30) oraz na zegarkach z Wear OS 2.0 (poziom interfejsu API 25 lub nowszy). Korzystanie z wersji 1.4 Compose na Wear OS wymaga użycia bibliotek androidx.compose w wersji 1.7 oraz Kotlina w wersji 1.9.0. Aby sprawdzić zgodność z Compose, możesz użyć mapowania pliku BOM i mapy zgodności Compose z Kotlinem.

Platformy

Narzędzie Compose na Wear OS ułatwia tworzenie aplikacji na Wear OS. Więcej informacji znajdziesz w artykule Aplikacje. Korzystaj z wbudowanych komponentów, aby tworzyć wrażenia użytkownika zgodne ze wskazówkami dotyczącymi Wear OS. Więcej informacji o komponentach znajdziesz w wskazówkach dotyczących projektowania.

Konfiguracja

Korzystanie z Jetpack Compose na Wear OS jest podobne do korzystania z Jetpack Compose w przypadku dowolnego innego projektu na Androida. Główna różnica polega na tym, że Jetpack Compose na Wear dodaje biblioteki specyficzne dla Wear, które ułatwiają tworzenie interfejsów użytkownika dostosowanych do zegarków. W niektórych przypadkach te komponenty mają tę samą nazwę co ich odpowiedniki niebędące elementem odzieży, np. androidx.wear.compose.material.Button i androidx.compose.material.Button.

Tworzenie nowej aplikacji w Android Studio

Aby utworzyć nowy projekt, który zawiera Jetpack Compose:

1. Jeśli widzisz okno Witamy w Android Studio, kliknij Rozpocznij nowy projekt Android Studio. Jeśli masz już otwarty projekt w Android Studio, na pasku menu kliknij Plik > Nowy > Importuj przykład.
2. Wyszukaj Tworzenie wiadomości na Wear i wybierz Tworzenie wiadomości na Wear OS – pakiet startowy.
3. W oknie Skonfiguruj projekt:
   1. Ustaw Nazwa aplikacji.
   2. Wybierz lokalizację projektu dla próbki.
4. Kliknij Zakończ.
5. Sprawdź, czy plik build.gradle projektu jest prawidłowo skonfigurowany zgodnie z opisem w plikach właściwości Gradle.

Możesz już zacząć tworzyć aplikację za pomocą Compose na Wear OS.

Zależność Jetpack Compose

Aby używać Jetpack Compose na Wear OS, musisz uwzględnić zależności pakietu Jetpack Compose w pliku build.gradle aplikacji. Większość zmian zależności związanych z Wear OS dotyczy najwyższych warstw architektonicznych, które są oznaczone na poniższym obrazie czerwonym polem.

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

Oznacza to, że wiele zależności, których używasz już w Jetpack Compose, nie ulega zmianie, gdy kierujesz aplikację na Wear OS. Na przykład zależności interfejsu użytkownika, środowiska wykonawczego, kompilatora i animacji pozostają takie same.

Wear OS ma jednak własne wersje bibliotek material, foundation i navigation, więc sprawdź, czy używasz odpowiednich bibliotek.

W miarę możliwości używaj wersji interfejsów API WearComposeMaterial. Chociaż technicznie można używać wersji mobilnej komponentu Compose Material, nie jest ona zoptymalizowana pod kątem unikalnych wymagań Wear OS. Ponadto łączenie komponentów Compose Material z komponentami Compose Material na Wear OS może powodować nieoczekiwane działanie. Ponieważ każda biblioteka ma własną klasę MaterialTheme, istnieje możliwość, że kolory, typografia lub kształty będą niespójne, jeśli użyjesz obu wersji.

W tej tabeli opisano różnice w zależnościach między Wear OS a wersją mobilną:

Ten fragment kodu przedstawia przykładowy plik build.gradle, który zawiera te zależności:

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.5")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}