Bygg ett profilkort
Kombinera composables till en skärm.
Bygg ett profilkort är en gratis lektion i Android Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Android Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Android Academy innehåller totalt 4 lektioner.
Vårt mål
Dags att kombinera det ni har lärt er. Vi ska bygga ett enkelt profilkort: ett namn och en yrkestitel som staplas snyggt i en formaterad ruta.
På vägen får ni bekanta er med Modifier, som styr storlek, mellanrum och utseende för composables.
Möt Modifier
En Modifier ändrar hur en composable ser ut och fungerar. Ni skickar den via parametern modifier, som de flesta composables accepterar.
Modifierare hanterar utfyllnad, storlek, bakgrundsfärg, kantlinjer med mera. De är det huvudsakliga sättet att dekorera användargränssnittet i Compose.
Text(
"Ada Lovelace",
modifier = Modifier.padding(16.dp)
)Kedja modifierare
Ni bygger en modifierare genom att kedja anrop med punkter. Varje anrop returnerar en ny modifierare, så ni kan kombinera flera.
Ordningen spelar roll: utfyllnad före bakgrund skiljer sig från utfyllnad efter bakgrund. Läs kedjan från vänster till höger, som ett recept.
Modifier
.padding(16.dp)
.fillMaxWidth()Fylla bredden
Modifieraren fillMaxWidth gör att en composable sträcker sig över allt tillgängligt horisontellt utrymme. Den passar perfekt för kort som ska sträcka sig över hela skärmen.
Det finns också fillMaxSize för båda riktningarna och size för att ange en fast bredd och höjd.
Column(
modifier = Modifier.fillMaxWidth()
) {
Text("Profile")
}Lägga till utfyllnad
Utfyllnad lägger till utrymme inuti en composable, mellan dess kant och innehållet. Använd Modifier.padding med ett dp-värde.
Utfyllnad hindrar texten från att ligga direkt mot kortets kanter, vilket gör layouten mer luftig och behaglig.
Column(
modifier = Modifier.padding(16.dp)
) {
Text("Ada Lovelace")
Text("Mathematician")
}Ge kortet en bakgrund
En bakgrundsfärg hjälper kortet att synas tydligare. Lägg till den med modifieraren background och ett färgvärde.
Kombinera den med utfyllnad så att det färgade området får luft runt texten inuti.
Column(
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
Text("Ada Lovelace")
}Stapla namnet och titeln
Inuti kortets Column staplar vi två textdelar: ett fetstilat namn överst och en lättare yrkestitel under det.
Genom att ange olika värden för fontSize och fontWeight skapar ni en tydlig visuell hierarki mellan dem.
Column {
Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text("Mathematician", fontSize = 14.sp)
}Göra det återanvändbart
Låt oss omvandla kortet till en återanvändbar composable som tar name och title som parametrar. Nu kan den visa vilken person som helst.
Detta är samma idé som i lektion ett: skicka in data och återanvänd användargränssnittet överallt.
@Composable
fun ProfileCard(name: String, title: String) {
Column {
Text(name)
Text(title)
}
}Det fullständiga profilkortet
Här är kortet med alla delar på plats: en kolumn i full bredd, grå bakgrund, utfyllnad och två formaterade textrader.
Lägg märke till hur modifierarkedjan och kolumnens underordnade element kombinerar allt från de tidigare lektionerna till en välordnad composable.
@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)
}
}Förhandsvisa kortet
Lägg till en @Preview-wrapper så att ni kan se kortet i Android Studio. Den anropar ProfileCard med exempeldata och visar en bakgrund.
Nu kan ni justera utfyllnad eller färger och se resultatet uppdateras direkt.
@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
ProfileCard("Ada Lovelace", "Mathematician")
}Visa det på skärmen
Om ni vill visa kortet i appen när den körs anropar ni det inuti setContent i er aktivitet. På så sätt kopplas er composable till den aktiva skärmen.
Nu har ni gått från en enda composable till en komplett, återanvändbar UI-komponent.
setContent {
ProfileCard("Ada Lovelace", "Mathematician")
}Snabb kontroll
Låt oss gå igenom hur composables får sin utfyllnad, storlek och bakgrund.
Sammanfattning
Ni byggde ett komplett profilkort genom att kombinera Text, Column och Modifier. Med modifierare kan ni kedja padding, fillMaxWidth och background för att forma och utforma ert användargränssnitt.
Ni gjorde kortet återanvändbart med parametrarna name och title, förhandsvisade det med @Preview och visade det via setContent. Det är en komplett composable-skärm från början till slut. Grattis!
Lär dig Kotlin med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 36
- Lektioner
- 152
Vanliga frågor
Är lektionen ”Bygg ett profilkort” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Android Academy, inklusive ”Bygg ett profilkort”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Android Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Bygg ett profilkort”?
Kombinera composables till en skärm. Ni övar på Android Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Android Academy?
Du behöver inga förkunskaper. Utbildningen i Android Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Bygg ett profilkort”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Android Academy-lektionen?
Ja. Varje Android Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vad en Composable är
- Grunderna i Text och Column
- Förhandsgranska Ert UI
- Bygg ett profilkort