Android Academy · Lezione

Anteprime e hot reload

Iteri rapidamente con le anteprime di Compose.

Anteprime e hot reload è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Anteprime in fase di progettazione

Una delle funzionalità migliori di Compose è @Preview: è possibile vedere un composable visualizzato in Android Studio senza eseguire l'app su un dispositivo o un emulatore.

L'annotazione @Preview

Aggiunga @Preview sopra una funzione @Composable. Android Studio la visualizzerà nel riquadro di progettazione.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

Le anteprime non richiedono parametri

Una funzione di anteprima deve poter essere chiamata con nessun argomento. Perciò si crea un composable wrapper che fornisce dati di esempio, quindi si visualizza in anteprima quel wrapper.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

Assegnare un nome alle funzioni di anteprima

Per convenzione, i wrapper di anteprima prendono il nome del composable seguito dal suffisso Preview, ad esempio GreetingPreview. In questo modo sono facili da trovare e si indica che non vengono usati in produzione.

Parametri delle anteprime

@Preview accetta argomenti per modificare la visualizzazione, come showBackground, name e widthDp.

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

Per impostazione predefinita, un'anteprima ha uno sfondo trasparente. Passi showBackground = true per visualizzare una superficie opaca, che rende il testo più facile da vedere durante la progettazione.

Più anteprime

È possibile applicare più annotazioni @Preview alla stessa funzione per vedere affiancate configurazioni diverse, ad esempio una larghezza ridotta e una maggiore.

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

Anteprima interattiva

Android Studio offre una Modalità interattiva per le anteprime. Consente di fare clic sui pulsanti e attivare modifiche allo stato direttamente nell'anteprima, senza distribuire l'app.

Live Edit / Hot Reload

Con Live Edit, le modifiche apportate ai corpi dei composable vengono visualizzate quasi istantaneamente nell'anteprima e persino su un dispositivo in esecuzione, senza dover eseguire una compilazione completa. Questo velocizza notevolmente il ciclo di progettazione.

Le anteprime sono gratuite

Le funzioni di anteprima vengono escluse dalla build di rilascio, quindi aggiungerne molte non ha alcun costo a runtime. Le utilizzi liberamente per documentare e testare visivamente ogni composable.

Un esempio completo

Ecco un composable con la relativa anteprima. Apra il riquadro di progettazione per visualizzarlo immediatamente.

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

Verifica rapida

Perché una funzione @Preview non deve accettare parametri?

Riepilogo

Le anteprime velocizzano lo sviluppo con Compose:

Aggiunga @Preview sopra un composable senza argomenti.
Utilizzi opzioni come showBackground e widthDp.
Affianchi più anteprime; utilizzi la Modalità interattiva e Live Edit per iterare rapidamente.

Domande Frequenti

La lezione «Anteprime e hot reload» è gratuita?

Sì — il testo completo di «Anteprime e hot reload» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «Anteprime e hot reload»?

Iteri rapidamente con le anteprime di Compose. Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Anteprime e hot reload»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy