Android Academy · Lektion

Farver og MaterialTheme

Anvend et ensartet tema.

Lektion 4 af 413 trin

Farver og MaterialTheme er en gratis Android Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Android Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Android Academy-kurset indeholder 4 lektioner i alt.

Farver i Compose

Compose repræsenterer farver med klassen Color. Der findes færdige værdier som Color.Red og Color.Blue.

Du overfører en Color til parametre som farven på en Text eller en baggrund.

Text(
    text = "Hi",
    color = Color.Blue
)

Tilpassede farveværdier

Opret en vilkårlig farve ud fra en hex-kode ved hjælp af Color(0xFFRRGGBB). De første to cifre, FF, betyder fuldstændig uigennemsigtig.

For eksempel er 0xFF6200EE en lilla farve.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Baggrundsfarve

Brug modifikatoren background til at male bag en composable. Tilføj padding, så indholdet ikke rører kanterne.

Rækkefølgen er vigtig: background efterfulgt af padding udfylder området med padding.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

Hvad er MaterialTheme?

MaterialTheme er et system, der samler appens farver, skrifttyper og former på ét sted.

Composables læser værdierne herfra, så hele appen forbliver ensartet og nem at give en ny stil.

MaterialTheme {
    Text("Themed app")
}

Temaets farveskema

Temaets colorScheme indeholder navngivne roller som primary, secondary og background.

Når du læser disse i stedet for faste farver, kan du ændre udseendet ét sted.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary og onPrimary

Hver hovedfarve har en on-partner til tekst, der tegnes oven på den, f.eks. onPrimary.

Hvis du bruger primary som baggrund og onPrimary som tekstfarve, sikrer du en læsbar kontrast.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Temaets typografi

MaterialTheme gemmer også teksttypografier i typography, f.eks. titleLarge og bodyMedium.

Overfør en af dem til en Texts style for at få ensartet tekst i passende størrelse.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Lyse og mørke skemaer

Du kan opbygge et skema med lightColorScheme() eller darkColorScheme() og overføre det til MaterialTheme.

Ved at skifte skema kan din app understøtte både lys og mørk tilstand.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Tilpasning af skemaet

Overskriv roller ved at navngive dem, når du opbygger et skema. Her bliver primary til en tilpasset blågrøn farve.

Alt, der læser colorScheme.primary, opdateres automatisk.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Hvorfor bruge temaet?

Hvis du hardcoder farver overalt, bliver redesigns besværlige. Når du læser fra MaterialTheme, opdaterer én ændring hele appen.

Det hjælper også med tilgængeligheden, fordi on-farverne bevarer en god kontrast.

Surface og baggrund

Den composable, der hedder Surface, anvender en temabaggrundsfarve og en elevation bag sit indhold.

Det er en enkel måde at give et kort eller en skærm den rigtige grundfarve på.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Hurtigt tjek

Test din viden om farver og temaer.

Besvar den i den interaktive lektion

Opsummering

Du har lært at bruge klassen Color, tilpassede hex-farver og modifikatoren background. MaterialTheme samler colorScheme, typography og former.

Ved at læse roller som primary og onPrimary bevarer du kontrast og ensartethed og understøtter lyse og mørke skemaer.

Godt arbejde med at gennemføre kurset i styling!

Gratis at komme i gang

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: 36
Lektioner: 152

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Farver og MaterialTheme” gratis?

Ja — alle 3 lektioner i læringssporet Android Academy, inklusive “Farver og MaterialTheme”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Android Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Farver og MaterialTheme”?

Anvend et ensartet tema. Du øver dig i Android 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å Android Academy?

Der kræves ingen tidligere erfaring. Android 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 4 af 4.

Hvor lang tid tager lektionen “Farver og MaterialTheme”?

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 Android Academy-lektion?

Ja. Alle Android 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

← Tilbage til Android Academy