Forhåndsvis Deres UI
Brug @Preview til hurtig iteration.
Forhåndsvis Deres UI er en gratis Android Academy-lektion på CoddyKit. Dette er lektion 3 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.
Derfor er forhåndsvisninger nyttige
Det tager tid at bygge og køre en app på en enhed. Compose giver dig en hurtigere måde at se din brugergrænseflade på: forhåndsvisningen.
En forhåndsvisning gengiver en composable direkte i Android Studio, så du kan kontrollere dit layout uden at starte hele appen på en emulator eller telefon.
Annotationen @Preview
Hvis du vil forhåndsvise en composable, opretter du en separat funktion og markerer den med @Preview. Android Studio viser derefter dens gengivne resultat i designruden.
Selve forhåndsvisningsfunktionen er også en composable, så den har både @Preview og @Composable.
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}Forhåndsvisninger tager ingen parametre
En forhåndsvisningsfunktion må ikke tage parametre. Compose skal kunne kalde den selv, så den kan ikke levere argumenter.
Derfor opretter du en wrapper: Forhåndsvisningen kalder din rigtige composable og sender eksempeldata ind, som den kan vise.
@Preview
@Composable
fun ProfilePreview() {
ProfileCard(name = "Ada")
}Navngivning af forhåndsvisningsfunktioner
En almindelig konvention er at navngive forhåndsvisningen efter den composable, den viser, og afslutte navnet med Preview. For Greeting skriver du GreetingPreview.
Så er det tydeligt, hvilken forhåndsvisning der hører til hvilken composable, især når din fil vokser.
@Preview
@Composable
fun HeaderPreview() {
Header()
}Giv en forhåndsvisning et navn
Du kan navngive en forhåndsvisning med parameteren name. Denne titel vises over den gengivne forhåndsvisning i Android Studio.
Gode navne gør det nemt at skelne mellem flere forhåndsvisninger med et enkelt blik.
@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
ProfileCard("Ada")
}Vis baggrunden
Som standard kan en forhåndsvisning blive gengivet på en gennemsigtig baggrund. Sæt showBackground = true for at tegne en ensfarvet overflade bag din composable.
Det gør det meget nemmere at vurdere afstande og farver i designruden.
@Preview(showBackground = true)
@Composable
fun TextPreview() {
Text("Hello!")
}Flere forhåndsvisninger på én gang
Du kan føje flere @Preview-annotationer til én funktion eller skrive flere forhåndsvisningsfunktioner. Hver af dem gengives separat.
Det er praktisk, når du vil kontrollere den samme brugergrænseflade med forskellige eksempeldata, f.eks. et kort navn og et langt navn.
@Preview
@Composable
fun ShortNamePreview() {
Greeting("Ada")
}
@Preview
@Composable
fun LongNamePreview() {
Greeting("Grace Hopper")
}Forhåndsvisning i forskellige størrelser
Parametrene widthDp og heightDp angiver størrelsen på forhåndsvisningens lærred. På den måde kan du teste, hvordan dit layout ser ud på et lille eller stort område.
Hvis du ændrer størrelsen på forhåndsvisningen, kan du opdage tekst, der ombrydes uhensigtsmæssigt, eller indhold, der flyder ud over området.
@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
Greeting("Hi")
}Forhåndsvisninger i mørk tilstand
Du kan forhåndsvise, hvordan din brugergrænseflade ser ud med et mørkt tema, ved at sætte parameteren uiMode til nattilstand. Det afslører farver, der ser forkerte ud på mørke baggrunde.
Hvis du tidligt kontrollerer både lyse og mørke forhåndsvisninger, undgår du overraskelser senere.
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
ProfileCard("Ada")
}Interaktive forhåndsvisninger og liveforhåndsvisninger
Android Studio kan opdatere forhåndsvisningen, mens du skriver, så ændringerne vises næsten med det samme. Der findes også en interaktiv tilstand, hvor du kan klikke rundt uden en fuld bygning.
Forhåndsvisninger erstatter ikke det at køre appen, men de gør det meget hurtigere at designe skærme.
Forhåndsvisninger er kun til fejlfinding
Forhåndsvisningsfunktioner er værktøjer til udvikling. De er ikke en del af den app, du udgiver, og vises ikke for brugerne.
Du kan derfor roligt tilføje så mange forhåndsvisninger med eksempeldata, som du vil. De påvirker kun det, du ser i IDE'et.
@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
InfoBlock()
}Hurtigt tjek
Lad os gennemgå en vigtig regel om forhåndsvisningsfunktioner.
Opsummering
Du har lært, at @Preview gengiver en composable i Android Studio uden behov for en enhed. Forhåndsvisningsfunktioner tager ingen parametre, så de omslutter din rigtige composable med eksempeldata.
Nyttige indstillinger omfatter name, showBackground, widthDp, heightDp og uiMode til mørk tilstand. Forhåndsvisninger er kun værktøjer til fejlfinding. Derefter kombinerer du det hele for at bygge et rigtigt profilkort.
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
Ofte stillede spørgsmål
Er lektionen “Forhåndsvis Deres UI” gratis?
Ja — alle 3 lektioner i læringssporet Android Academy, inklusive “Forhåndsvis Deres UI”, 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 “Forhåndsvis Deres UI”?
Brug @Preview til hurtig iteration. 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 3 af 4.
Hvor lang tid tager lektionen “Forhåndsvis Deres UI”?
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
- Hvad en composable er
- Grundlæggende Text og Column
- Forhåndsvis Deres UI
- Opbyg et profilkort