Visualizzare l'anteprima dell'interfaccia
Usi @Preview per iterare rapidamente.
Visualizzare l'anteprima dell'interfaccia è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Perché le anteprime sono utili
Creare ed eseguire un'app su un dispositivo richiede tempo. Compose offre un modo più rapido per vedere l'interfaccia: l'anteprima.
Un'anteprima esegue il rendering di un composable direttamente in Android Studio, così può controllare il layout senza avviare l'app completa su un emulatore o un telefono.
L'annotazione @Preview
Per visualizzare l'anteprima di un composable, crei una funzione separata e la contrassegni con @Preview. Android Studio mostrerà il risultato renderizzato nel riquadro di progettazione.
Anche la funzione di anteprima è un composable, quindi presenta sia @Preview sia @Composable.
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}Le anteprime non accettano parametri
Una funzione di anteprima non deve accettare parametri. Compose deve poterla chiamare autonomamente, quindi non può fornirle argomenti.
Per questo si usa un wrapper: l'anteprima chiama il composable reale e gli passa dati di esempio da visualizzare.
@Preview
@Composable
fun ProfilePreview() {
ProfileCard(name = "Ada")
}Dare un nome alle funzioni di anteprima
Una convenzione comune consiste nel denominare l'anteprima in base al composable visualizzato, aggiungendo Preview alla fine. Per Greeting, scriverebbe GreetingPreview.
In questo modo è evidente a quale composable appartiene ogni anteprima, soprattutto quando il file cresce.
@Preview
@Composable
fun HeaderPreview() {
Header()
}Assegnare un nome all'anteprima
Può assegnare un'etichetta all'anteprima con il parametro name. Questo titolo appare sopra l'anteprima renderizzata in Android Studio.
Dei nomi descrittivi rendono facile distinguere a colpo d'occhio più anteprime.
@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
ProfileCard("Ada")
}Mostrare lo sfondo
Per impostazione predefinita, un'anteprima può essere renderizzata su uno sfondo trasparente. Imposti showBackground = true per disegnare una superficie uniforme dietro il composable.
In questo modo è molto più facile valutare spaziatura e colori nel riquadro di progettazione.
@Preview(showBackground = true)
@Composable
fun TextPreview() {
Text("Hello!")
}Più anteprime contemporaneamente
Può aggiungere diverse annotazioni @Preview a una funzione oppure scrivere diverse funzioni di anteprima. Ognuna verrà renderizzata separatamente.
È utile per controllare la stessa interfaccia con dati di esempio diversi, come un nome breve e uno lungo.
@Preview
@Composable
fun ShortNamePreview() {
Greeting("Ada")
}
@Preview
@Composable
fun LongNamePreview() {
Greeting("Grace Hopper")
}Visualizzare anteprime di dimensioni diverse
I parametri widthDp e heightDp impostano le dimensioni della superficie dell'anteprima. In questo modo può verificare l'aspetto del layout in uno spazio piccolo o grande.
Impostare le dimensioni dell'anteprima aiuta a individuare il testo che va a capo in modo scomodo o i contenuti che fuoriescono dall'area.
@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
Greeting("Hi")
}Anteprime in modalità scura
Può visualizzare l'aspetto dell'interfaccia nel tema scuro usando il parametro uiMode impostato sulla modalità notturna. In questo modo può individuare i colori che risultano inadatti su sfondi scuri.
Controllare subito sia l'anteprima chiara sia quella scura evita sorprese in seguito.
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
ProfileCard("Ada")
}Anteprime interattive e live
Android Studio può aggiornare l'anteprima mentre scrive, così le modifiche appaiono quasi istantaneamente. È disponibile anche una modalità interattiva per fare clic e interagire senza una compilazione completa.
Le anteprime non sostituiscono l'esecuzione dell'app, ma rendono molto più rapida la progettazione delle schermate.
Le anteprime servono solo per il debug
Le funzioni di anteprima sono strumenti di sviluppo. Non fanno parte dell'app distribuita e non saranno visibili agli utenti.
Può quindi aggiungere tutte le anteprime che desidera, usando dati di esempio. Influiscono solo su ciò che vede nell'IDE.
@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
InfoBlock()
}Verifica rapida
Ripassiamo una regola importante sulle funzioni di anteprima.
Riepilogo
Ha imparato che @Preview esegue il rendering di un composable all'interno di Android Studio, senza bisogno di un dispositivo. Le funzioni di anteprima non accettano parametri, quindi usano un wrapper per il composable reale e vi passano dati di esempio.
Tra le opzioni utili ci sono name, showBackground, widthDp, heightDp e uiMode per la modalità scura. Le anteprime sono strumenti esclusivamente di debug. Nella prossima lezione unirà tutti questi elementi per creare una vera scheda profilo.
Domande Frequenti
La lezione «Visualizzare l'anteprima dell'interfaccia» è gratuita?
Sì — il testo completo di «Visualizzare l'anteprima dell'interfaccia» è 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 «Visualizzare l'anteprima dell'interfaccia»?
Usi @Preview per iterare rapidamente. 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 3 di 4.
Quanto tempo richiede la lezione «Visualizzare l'anteprima dell'interfaccia»?
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
- Che cos'è un composable
- Fondamenti di Text e Column
- Visualizzare l'anteprima dell'interfaccia
- Costruire una scheda profilo