Utilizzare Jetpack Compose su Wear OS

Compose per Wear OS è simile a Compose per il mobile. Tuttavia, ci sono alcune differenze fondamentali. Questa guida illustra le similitudini e le differenze.

Compose per Wear OS fa parte di Android Jetpack e, come le altre librerie Wear Jetpack che utilizzi, ti aiuta a scrivere un codice migliore più velocemente. Questo è il nostro approccio consigliato per la creazione di interfacce utente per le app per Wear OS.

Se non hai dimestichezza con l'utilizzo del toolkit Jetpack Compose, consulta il percorso di Compose. Molti dei principi di sviluppo di Compose per il mobile si applicano a Compose per Wear OS. Per ulteriori informazioni sui vantaggi generali di un framework UI dichiarativo, consulta Perché Compose. Per scoprire di più su Compose per Wear OS, consulta il percorso Compose per Wear OS e il repository di esempi per Wear OS su GitHub.

Material Design in Jetpack Compose su Wear OS

Jetpack Compose su Wear OS offre un'implementazione di Material 2.5, che ti aiuta a progettare esperienze di app più coinvolgenti. I componenti Material Design su Wear OS sono basati su Wear Material Theming. Questa scelta di temi è un modo sistematico per personalizzare Material Design e rispecchiare meglio il marchio del tuo prodotto.

Compatibilità

Compose per Wear OS funziona sugli smartwatch che supportano Wear OS 3.0 (livello API 30) e sugli smartwatch che utilizzano Wear OS 2.0 (livello API 25 e versioni successive). L'utilizzo della versione 1.4 di Compose per Wear OS richiede la versione 1.7 delle librerie androidx.compose e Kotlin 1.9.0. Puoi utilizzare la mappatura BOM e la mappa di compatibilità di Compose con Kotlin per verificare la compatibilità di Compose.

Piattaforme

Compose per Wear OS semplifica la creazione di app su Wear OS. Per ulteriori informazioni, consulta App. Utilizza i nostri componenti integrati per creare esperienze utente conformi alle linee guida di Wear OS. Per saperne di più sui componenti, consulta le nostre linee guida per la progettazione.

Impostazione

L'utilizzo di Jetpack Compose con Wear OS è simile all'utilizzo di Jetpack Compose per qualsiasi altro progetto Android. La differenza principale è che Jetpack Compose per Wear aggiunge librerie specifiche per Wear che semplificano la creazione di interfacce utente personalizzate per gli orologi. In alcuni casi, questi componenti condividono lo stesso nome delle loro controparti non per Wear, ad esempio androidx.wear.compose.material.Button e androidx.compose.material.Button.

Creare una nuova app in Android Studio

Per creare un nuovo progetto che includa Jetpack Compose:

1. Se sei nella finestra Ti diamo il benvenuto in Android Studio, fai clic su Avvia un nuovo progetto Android Studio. Se hai già aperto un progetto Android Studio, seleziona File > Nuovo > Importa Sample dalla barra dei menu.
2. Cerca Compose for Wear e seleziona Compose for Wear OS Starter.
3. Nella finestra Configura il progetto, procedi nel seguente modo:
   1. Imposta il nome dell'applicazione.
   2. Scegli la Località del progetto per il tuo sample.
4. Fai clic su Fine.
5. Verifica che il file build.gradle del progetto sia configurato correttamente, come descritto in File di proprietà Gradle.

Ora puoi iniziare a sviluppare un'app utilizzando Compose per Wear OS.

Dipendenze del toolkit Jetpack Compose

Per utilizzare Jetpack Compose con Wear OS, devi includere le dipendenze del toolkit Jetpack Compose nel file build.gradle della tua app. La maggior parte delle modifiche alle dipendenze relative a Wear OS si trova nei livelli di architettura superiori, racchiusi in un riquadro rosso nell'immagine seguente.

<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="" />

Ciò significa che molte delle dipendenze che utilizzi già con Jetpack Compose non cambiano quando scegli come target Wear OS. Ad esempio, le dipendenze dell'interfaccia utente, del runtime, del compilatore e dell'animazione rimangono invariate.

Tuttavia, Wear OS ha le proprie versioni delle librerie material, foundation e navigation, quindi assicurati di utilizzare le librerie appropriate.

Se possibile, utilizza la versione WearComposeMaterial delle API. Sebbene sia tecnicamente possibile utilizzare la versione mobile di Compose Material, non è ottimizzata per i requisiti specifici di Wear OS. Inoltre, la combinazione di Compose Material con Compose Material per Wear OS può comportare un comportamento imprevisto. Ad esempio, poiché ogni libreria ha la propria classe MaterialTheme, è possibile che i colori, la tipografia o le forme non siano coerenti se vengono utilizzate entrambe le versioni.

La seguente tabella illustra le differenze di dipendenza tra Wear OS e Mobile:

Lo snippet seguente mostra un file build.gradle di esempio che include queste dipendenze:

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")
}