Sektion med avatar, navn og bio
Saml headeren med billede og tekst.
Sektion med avatar, navn og bio er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Byg headeren først
Nu skal skitsen gøres virkelig. Du starter øverst på kortet med headeren: avataren, navnet og en kort bio. 👤
Avatarbilledet
Avataren er en Image-Composable, der tegner en drawable-ressource. Giv den en tydelig størrelse, så den aldrig vokser og fylder hele skærmen.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo"
)Gør den til en cirkel
Profilbilleder ser bedst ud som cirkler. Kæd clip sammen med CircleShape på Image-modifikatoren for at gøre den til en perfekt avatar.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo",
modifier = Modifier.size(96.dp).clip(CircleShape)
)Tilføj navnet
Under avataren kommer visningsnavnet. En enkel Text-Composable viser den tekststreng, som brugeren læser først.
Text(text = "Ada Lovelace")Formatér navnet
Navne skal skille sig ud. Giv style fra MaterialTheme-typografien videre, så navnet ligner en rigtig overskrift.
Text(
text = "Ada Lovelace",
style = MaterialTheme.typography.titleLarge
)Bioteksten
Tilføj en bio på én linje under navnet med endnu en Text. Brug en mindre og blødere typografi, så den læses som en underoverskrift og ikke en overskrift.
Text(
text = "Building delightful apps.",
style = MaterialTheme.typography.bodyMedium
)Stabl dem i en Column
Avatar, navn og bio stables lodret, så pak dem alle ind i en Column. Den rækkefølge, du skriver dem i, er den rækkefølge, de vises i.
Column {
Image(/* avatar */)
Text("Ada Lovelace")
Text("Building delightful apps.")
}Centrér alt
Headere føles afbalancerede, når de er centrerede. Indstil horizontalAlignment til CenterHorizontally på Column for at justere avatar og tekst.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }Tilføj lodret afstand
Headere med for lidt plads ser rodede ud. Brug Arrangement.spacedBy på Column til at skabe et ensartet mellemrum mellem avatar, navn og bio.
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }Giv headeren indvendig afstand
Giv hele sektionen luft ved at tilføje padding til Column-modifikatoren. Kanterne må aldrig røre skærmens ramme.
Column(
modifier = Modifier.padding(16.dp)
) { /* ... */ }Headersektionen er færdig
Du har nu en ren header: en cirkulær avatar, et fedt navn og en afdæmpet bio, centreret og med passende afstand. Toppen af dit kort er færdig. 🎉
Hurtigt tjek
Hvordan gør du et firkantet foto til en rund avatar?
Opsummering: Headeren
Du byggede headeren i en centreret Column: en beskåret cirkulær avatar, et formateret navn og en diskret bio, alt sammen med indvendig afstand og mellemrum. Nu skal du tilføje statistikrækken.
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Sektion med avatar, navn og bio” gratis?
Ja — hele teksten til “Sektion med avatar, navn og bio” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Sektion med avatar, navn og bio”?
Saml headeren med billede og tekst. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Sektion med avatar, navn og bio”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Skitsér layoutet til profilkortet
- Sektion med avatar, navn og bio
- Statistikrække og følg-knap
- Udtræk genanvendelige Composables