Per un'esperienza ottimale di sviluppo con Compose, scarica e installa Android Studio. Include molte funzionalità dell'editor intelligente, come i nuovi modelli di progetto e la possibilità di visualizzare immediatamente l'anteprima dell'interfaccia utente e delle animazioni di Compose.
Segui queste istruzioni per creare un nuovo progetto di app Compose, configurare Compose per un progetto di app esistente o importare un'app di esempio scritta in Compose.
Creare una nuova app che supporti Compose
Se vuoi iniziare un nuovo progetto che include il supporto per Compose per impostazione predefinita, Android Studio include vari modelli di progetto per aiutarti a iniziare. Per creare un nuovo progetto in cui Compose è configurato correttamente, procedi come segue:
- Se ti trovi 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 > Nuovo progetto dalla barra dei menu.
- Nella finestra Seleziona un modello di progetto, seleziona Attività vuota e fai clic su Avanti.
- Nella finestra Configura il tuo progetto, segui questi passaggi:
- Imposta Nome, Nome pacchetto e Salva posizione come faresti normalmente. Tieni presente che, nel menu a discesa Lingua, Kotlin è l'unica opzione disponibile perché Jetpack Compose funziona solo con i corsi scritti in Kotlin.
- Nel menu a discesa Livello API minimo, seleziona il livello API 21 o superiore.
- Fai clic su Fine.
Ora puoi iniziare a sviluppare un'app utilizzando Jetpack Compose. Per iniziare e scoprire cosa puoi fare con il toolkit, prova il tutorial su Jetpack Compose.
Configurare Compose per un'app esistente
Per iniziare a utilizzare Compose, devi prima aggiungere alcune configurazioni di build al tuo
progetto. Aggiungi la definizione seguente al file build.gradle
dell'app:
trendy
android {
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.13"
}
}
Kotlin
android {
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.13"
}
}
Alcuni aspetti da considerare:
- L'impostazione del flag
compose
sutrue
all'interno del blocco AndroidBuildFeatures
attiva la funzionalità Scrivi. - Il controllo delle versioni dell'estensione Kotlin Compiler definito nel blocco
ComposeOptions
è legato al controllo delle versioni di Kotlin. Assicurati di consultare la mappa della compatibilità e scegli una versione della libreria che corrisponda alla versione di Kotlin del tuo progetto.
Inoltre, aggiungi il BOM di Compose e il sottoinsieme delle dipendenze della libreria di Compose di cui hai bisogno alle dipendenze dal blocco seguente:
trendy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.05.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.0'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2024.05.00")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3:material3-window-size-class")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.0")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Prova le app di esempio di Jetpack Compose
Il modo più rapido per sperimentare le funzionalità di Jetpack Compose è provare le app di esempio di Jetpack Compose ospitate su GitHub. Per importare un progetto di app di esempio da Android Studio:
- Se sei nella finestra Ti diamo il benvenuto in Android Studio, seleziona Importa un esempio di codice Android. Se hai già aperto un progetto Android Studio, seleziona File > Nuovo > Importa esempio dalla barra dei menu.
- Nella barra di ricerca nella parte superiore della procedura guidata Sfoglia esempi, digita "compose".
- Seleziona una delle app di esempio di Jetpack Compose dai risultati di ricerca e fai clic su Avanti.
- Modifica Nome applicazione e Località del progetto o mantieni i valori predefiniti.
- Fai clic su Fine.
Android Studio scarica l'app di esempio nel percorso specificato e apre il progetto. Puoi quindi esaminare MainActivity.kt
in ogni esempio per vedere le API Jetpack Compose, come l'animazione a dissolvenza incrociata, i componenti personalizzati, l'utilizzo della tipografia e la visualizzazione di colori chiari e scuri nell'anteprima interna all'IDE.
Per utilizzare Jetpack Compose per Wear OS, leggi l'articolo Configurare Jetpack Compose su Wear OS.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Navigare con Compose
- Verificare il layout di Compose
- Reagisci per concentrarti