Sezione con avatar, nome e biografia
Assembli l'intestazione con immagine e testo.
Sezione con avatar, nome e biografia è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 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 Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Costruire prima l'intestazione
È il momento di trasformare lo schizzo in realtà. Inizierete dalla parte superiore della scheda, l'header: avatar, nome e breve biografia. 👤
L'immagine dell'avatar
L'avatar è un Composable Image che disegna una risorsa drawable. Assegnategli una dimensione chiara, così non si espanderà fino a riempire lo schermo.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo"
)Renderlo circolare
Le foto del profilo hanno un aspetto migliore quando sono circolari. Combinate clip con CircleShape nel modifier di Image per trasformarle in un avatar perfettamente rotondo.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo",
modifier = Modifier.size(96.dp).clip(CircleShape)
)Aggiungere il nome
Sotto l'avatar viene visualizzato il nome. Un semplice Composable Text mostra la stringa che l'utente leggerà per prima.
Text(text = "Ada Lovelace")Dare stile al nome
Il nome deve risaltare. Passate uno style dalla tipografia di MaterialTheme, così avrà l'aspetto di una vera intestazione.
Text(
text = "Ada Lovelace",
style = MaterialTheme.typography.titleLarge
)Il testo della biografia
Sotto il nome aggiungete una biografia di una riga con un altro Text. Usate uno stile più piccolo e delicato, così apparirà come un sottotitolo e non come un titolo.
Text(
text = "Building delightful apps.",
style = MaterialTheme.typography.bodyMedium
)Impilarli in un Column
Avatar, nome e biografia si dispongono verticalmente, quindi racchiudeteli tutti in un Column. L'ordine in cui li scrivete è l'ordine in cui appariranno.
Column {
Image(/* avatar */)
Text("Ada Lovelace")
Text("Building delightful apps.")
}Centrare tutto
Le intestazioni risultano equilibrate quando sono centrate. Impostate horizontalAlignment su CenterHorizontally nel Column per allineare avatar e testo.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }Aggiungere una spaziatura verticale
Le intestazioni troppo ravvicinate risultano disordinate. Usate Arrangement.spacedBy nel Column per inserire uno spazio uniforme tra avatar, nome e biografia.
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }Aggiungere padding all'intestazione
Lasciate spazio all'intera sezione aggiungendo padding al modifier del Column. I bordi non devono mai toccare la cornice dello schermo.
Column(
modifier = Modifier.padding(16.dp)
) { /* ... */ }Sezione dell'intestazione completata
Ora avete un'intestazione ordinata: un avatar circolare, un nome in grassetto e una biografia discreta, tutti centrati e distanziati. La parte superiore della scheda è completata. 🎉
Verifica rapida
Come si trasforma una foto quadrata in un avatar rotondo?
Riepilogo: l'intestazione
Avete creato l'intestazione all'interno di un Column centrato: un avatar circolare ritagliato, un nome con stile e una biografia discreta, il tutto con padding e spaziatura. Ora aggiungerete la riga delle statistiche.
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Sezione con avatar, nome e biografia» è gratuita?
Sì — il testo completo di «Sezione con avatar, nome e biografia» è 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 Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Sezione con avatar, nome e biografia»?
Assembli l'intestazione con immagine e testo. Eserciti Jetpack Compose 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 Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose 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 2 di 4.
Quanto tempo richiede la lezione «Sezione con avatar, nome e biografia»?
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 Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose 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
- Disegnare il layout della scheda profilo
- Sezione con avatar, nome e biografia
- Riga delle statistiche e pulsante Segui
- Estrarre Composable riutilizzabili