Introduzione a Jetpack Compose

Jetpack Compose è un moderno toolkit per l'interfaccia utente recentemente lanciato da Google che viene utilizzato per creare l'interfaccia utente nativa di Android. Semplifica e accelera lo sviluppo dell'interfaccia utente con meno codice, API Kotlin e strumenti potenti.

La composizione di Jetpack ci offre l'opportunità di creare un'interfaccia utente diversa chiamata Declarative Framework e rendere questa transazione nativa.

Avresti potuto vedere che i codici scritti con Flutter e React Native creavano un'interfaccia utente e ora puoi fare tutto questo con Jetpack Compose.

Nota : Jetpack Compose è stato rilasciato nel marzo del 2021. È necessario Android Studio Artic Fox per utilizzare Compose che funzioni minimo sdk 21 .

Perché dovremmo usare Jetpack Compose?

• Dichiarativo: è completamente dichiarativo in modo da poter descrivere i componenti dell'interfaccia utente chiamando alcune funzioni predefinite.
• Compatibile: è facilmente compatibile con le visualizzazioni esistenti presenti in Android.
• Aumenta la velocità di sviluppo: in precedenza gli sviluppatori dovevano lavorare sul file XML e sul file Kotlin. Ma con l'aiuto di jetpack comporre questo diventa facile e gli sviluppatori devono solo lavorare sui file Kotlin, ecco perché aiuterà gli sviluppatori ad aumentare la velocità di sviluppo.
• Kotlin conciso e idiomatico: Jetpack Compose ha creato l'interfaccia utente con i vantaggi offerti da Kotlin.
• Facile da mantenere: poiché la base di codice di qualsiasi applicazione è presente in un singolo file. Diventa facile gestire e gestire la base di codice dell'applicazione.
• Scritto in Kotlin: l'applicazione scritta utilizzando jetpack compose utilizza il 100% del linguaggio di programmazione Kotlin.

Con la nuova funzionalità fornita con Compose, puoi vedere l'output senza emulatore.

Crea un progetto scegliendo una nuova attività di composizione vuota ed esamina la struttura principale di Jetpack Compose.

Quando scegliamo Empty Compose Activity, la classe MainActivity verrà come di seguito.

La prima cosa che noti è che l'attività principale è stata ereditata da ComponentActivity , non da AppCompatActivity.

Revisiona per gradle, con Jetpack Compose vedrai che il campo è stato aggiunto proprio come di seguito.

Se apri il progetto come EmptyActivity, devi aggiungere le dipendenze come di seguito.

Abbiamo detto che puoi vedere il design senza build in runtime.

Quando scegliamo Split view, possiamo vedere l'anteprima dei codici Kotlin che scriviamo.

Annotazione @Preview: puoi aggiungere parametri manualmente nel tuo codice per personalizzare il modo in cui Android Studio esegue il rendering dell'annotazione di anteprima.

Allo stesso tempo vogliamo vedere tutto lo schermo o l'elemento, possiamo aggiungere elementi sotto l'annotazione.

Le funzioni Composable sono gli elementi costitutivi fondamentali di un'applicazione creata con Compose.
Composable può essere applicato a una funzione o lambda per indicare che la funzione/lambda può essere utilizzata come parte di una composizione per descrivere una trasformazione dai dati dell'applicazione in un albero o una gerarchia.

Il codice seguente rende l'oggetto TextView che è in xml, come Composable.

La classe di testo è una classe componibile che riceve troppi parametri.

Se iniziamo un'attività normale, diamo un layout all'interno di setContentView ma ora per comporre usiamo setContent .

Nella classe setContent, puoi vedere che vuole da noi parametri componibili scritti come di seguito.

Il saluto è una composizione. Possiamo dare quella composizione all'interno di setContent quando l'app viene aperta.

Quali semplici funzioni abbiamo imparato in questo articolo per ora?

• Funzione Composable: la funzione Composable è rappresentata nel codice utilizzando l'annotazione @Composable al nome della funzione. Questa funzione ti consentirà di definire l'interfaccia utente della tua app a livello di codice descrivendone la forma e le dipendenze dai dati anziché concentrarti sul processo di costruzione dell'interfaccia utente.
• Funzione di anteprima: il nome della funzione stessa ci dice che la funzione viene utilizzata per generare l'anteprima della funzione componibile. Viene utilizzato per visualizzare un'anteprima delle nostre funzioni componibili all'interno del nostro IDE piuttosto che installare il nostro APK in un emulatore o in un dispositivo virtuale.

Se sei interessato a SwitfUI in iOS, ti consiglio di controllare l'articolo di Pınar Koçak .

Risorse