Costruire una scheda profilo
Combini composable in una schermata.
Costruire una scheda profilo è 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.
Il nostro obiettivo
È il momento di mettere insieme ciò che ha imparato. Costruiremo una semplice scheda profilo: un nome e una professione disposti ordinatamente in un riquadro con uno stile.
Incontrerà anche il Modifier, che controlla dimensioni, spaziatura e aspetto dei composable.
Conosciamo Modifier
Un Modifier cambia l'aspetto e il comportamento di un composable. Lo passa tramite il parametro modifier, accettato dalla maggior parte dei composable.
I modifier gestiscono padding, dimensioni, colore di sfondo, bordi e molto altro. Sono il modo principale per decorare l'interfaccia in Compose.
Text(
"Ada Lovelace",
modifier = Modifier.padding(16.dp)
)Concatenare i modifier
Per creare un modifier, concateni le chiamate usando i punti. Ogni chiamata restituisce un nuovo modifier, quindi può combinarne diversi.
L'ordine è importante: il padding prima dello sfondo produce un risultato diverso dal padding dopo lo sfondo. Legga la catena da sinistra a destra, come una ricetta.
Modifier
.padding(16.dp)
.fillMaxWidth()Riempire la larghezza
Il modifier fillMaxWidth fa estendere un composable per tutta la larghezza orizzontale disponibile. È perfetto per le schede che devono occupare tutta la schermata.
È disponibile anche fillMaxSize per entrambe le direzioni e size per impostare una larghezza e un'altezza fisse.
Column(
modifier = Modifier.fillMaxWidth()
) {
Text("Profile")
}Aggiungere il padding
Il padding aggiunge spazio all'interno di un composable, tra il bordo e il contenuto. Usi Modifier.padding con un valore in dp.
Il padding impedisce al testo di toccare i bordi di una scheda, rendendo il layout più ordinato e piacevole.
Column(
modifier = Modifier.padding(16.dp)
) {
Text("Ada Lovelace")
Text("Mathematician")
}Aggiungere uno sfondo alla scheda
Un colore di sfondo aiuta a distinguere la scheda. Lo applichi con il modifier background e un valore di colore.
Lo combini con il padding, così l'area colorata lascia spazio intorno al testo al suo interno.
Column(
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
Text("Ada Lovelace")
}Disporre nome e professione in pila
All'interno della Column della scheda, disponiamo in pila due elementi di testo: un nome in grassetto sopra e la professione, più leggera, sotto.
Impostare valori diversi per fontSize e fontWeight crea una chiara gerarchia visiva tra i due elementi.
Column {
Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text("Mathematician", fontSize = 14.sp)
}Rendere il componente riutilizzabile
Trasformiamo la scheda in un composable riutilizzabile che accetta name e title come parametri. Ora può mostrare qualsiasi persona.
È la stessa idea della prima lezione: si passano i dati e si riutilizza l'interfaccia ovunque.
@Composable
fun ProfileCard(name: String, title: String) {
Column {
Text(name)
Text(title)
}
}La scheda profilo completa
Ecco la scheda con tutti gli elementi insieme: una colonna a larghezza completa, uno sfondo grigio, il padding e due righe di testo formattate.
Noti come la catena di modifier e gli elementi figli della colonna combinino tutto ciò che ha imparato nelle lezioni precedenti in un unico composable ordinato.
@Composable
fun ProfileCard(name: String, title: String) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray)
.padding(16.dp)
) {
Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text(title, fontSize = 14.sp)
}
}Visualizzare l'anteprima della scheda
Aggiunga un wrapper @Preview per visualizzare la scheda in Android Studio. Questo chiama ProfileCard con dati di esempio e mostra uno sfondo.
Ora può modificare padding o colori e osservare il risultato aggiornarsi istantaneamente.
@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
ProfileCard("Ada Lovelace", "Mathematician")
}Visualizzarla sullo schermo
Per visualizzare la scheda nell'app in esecuzione, la chiami all'interno di setContent nella Sua activity. In questo modo collega il composable alla schermata attiva.
È passato da un singolo composable a un componente dell'interfaccia completo e riutilizzabile.
setContent {
ProfileCard("Ada Lovelace", "Mathematician")
}Verifica rapida
Ripassiamo come i composable ricevono padding, dimensioni e sfondo.
Riepilogo
Ha creato una scheda profilo completa combinando Text, Column e Modifier. I modifier permettono di concatenare padding, fillMaxWidth e background per definire la forma e lo stile dell'interfaccia.
Ha reso la scheda riutilizzabile con i parametri name e title, ne ha visualizzato l'anteprima con @Preview e l'ha mostrata tramite setContent. Ha creato una schermata composable completa, dall'inizio alla fine. Complimenti!
Domande Frequenti
La lezione «Costruire una scheda profilo» è gratuita?
Sì — il testo completo di «Costruire una scheda profilo» è 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 «Costruire una scheda profilo»?
Combini composable in una schermata. 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 «Costruire una scheda profilo»?
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