Android Academy · Oppitunti

Käyttöliittymän esikatselu

Iteroikaa nopeasti @Preview-annotaatiolla.

Oppitunti 3/413 vaihetta

Käyttöliittymän esikatselu on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Esikatselujen hyödyt

Sovelluksen koonti ja suorittaminen laitteella vie aikaa. Compose tarjoaa nopeamman tavan nähdä käyttöliittymäsi: esikatselun.

Esikatselu piirtää composable-komponentin suoraan Android Studiossa, joten voit tarkistaa asettelusi käynnistämättä koko sovellusta emulaattorissa tai puhelimessa.

@Preview-annotaatio

Voit esikatsella composable-komponenttia luomalla erillisen funktion ja merkitsemällä sen @Preview-annotaatiolla. Android Studio näyttää sen piirretyn tuloksen suunnitteluruudussa.

Myös esikatselufunktio itsessään on composable-komponentti, joten siinä ovat sekä @Preview- että @Composable-annotaatio.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Esikatselut eivät ota parametreja

Esikatselufunktio ei saa ottaa parametreja. Composen täytyy kutsua sitä itsenäisesti, joten se ei voi antaa sille argumentteja.

Siksi luot kääretoiminnon: esikatselu kutsuu varsinaista composable-komponenttiasi ja antaa sille näytettävät esimerkkitiedot.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Esikatselufunktioiden nimeäminen

Yleinen käytäntö on nimetä esikatselu sen näyttämän composable-komponentin mukaan ja päättää nimi sanaan Preview. Jos composable-komponentin nimi on Greeting, kirjoitat GreetingPreview.

Näin on selvää, mikä esikatselu kuuluu millekin composable-komponentille, etenkin tiedoston kasvaessa.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Esikatselun nimeäminen

Voit nimetä esikatselun name-parametrilla. Tämä otsikko näkyy piirretyn esikatselun yläpuolella Android Studiossa.

Hyödyllisten nimien ansiosta useat esikatselut on helppo erottaa toisistaan yhdellä silmäyksellä.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Taustan näyttäminen

Esikatselu voidaan oletusarvoisesti piirtää läpinäkyvälle taustalle. Aseta showBackground = true, jotta composable-komponentin taakse piirretään yhtenäinen pinta.

Näin välistyksiä ja värejä on paljon helpompi arvioida suunnitteluruudussa.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Useita esikatseluja kerralla

Voit lisätä yhteen funktioon useita @Preview-annotaatioita tai kirjoittaa useita esikatselufunktioita. Jokainen niistä piirretään erikseen.

Tämä on kätevää, kun tarkistat saman käyttöliittymän eri esimerkkitiedoilla, kuten lyhyellä ja pitkällä nimellä.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Eri kokojen esikatselu

widthDp- ja heightDp-parametrit määrittävät esikatselualustan koon. Näin voit testata, miltä asettelu näyttää pienellä tai suurella alueella.

Esikatselun koon määrittäminen auttaa havaitsemaan tekstin hankalan rivittymisen ja sisällön vuotamisen alueen ulkopuolelle.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Tumman tilan esikatselut

Voit esikatsella käyttöliittymääsi tummassa teemassa määrittämällä uiMode-parametriksi yötilan. Näin huomaat värit, jotka näyttävät vääriltä tummalla taustalla.

Vaalean ja tumman esikatselun tarkistaminen ajoissa säästää myöhemmiltä yllätyksiltä.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Interaktiiviset ja reaaliaikaiset esikatselut

Android Studio voi päivittää esikatselun kirjoittamisen aikana, joten muutokset näkyvät lähes heti. Käytettävissä on myös interaktiivinen tila, jossa voit napsautella näkymää ilman täydellistä koontia.

Esikatselut eivät korvaa sovelluksen suorittamista, mutta niiden avulla näyttöjen suunnittelu on paljon nopeampaa.

Esikatselut ovat vain kehitystä varten

Esikatselufunktiot ovat kehitystyökaluja. Ne eivät kuulu julkaistavaan sovellukseen eivätkä näy käyttäjille.

Voit siis lisätä niin monta esikatselua ja esimerkkitietoa kuin haluat. Ne vaikuttavat vain siihen, mitä näet IDE:ssä.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Pikatarkistus

Kerrataan esikatselufunktioita koskeva tärkeä sääntö.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit, että @Preview piirtää composable-komponentin Android Studion sisällä ilman laitetta. Esikatselufunktiot eivät ota parametreja, joten ne kutsuvat varsinaista composable-komponenttiasi esimerkkitietojen kanssa.

Hyödyllisiä asetuksia ovat name, showBackground, widthDp, heightDp ja tumman tilan uiMode. Esikatselut ovat vain virheenkorjaukseen tarkoitettuja työkaluja. Seuraavaksi yhdistät kaiken ja rakennat oikean profiilikortin.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Käyttöliittymän esikatselu” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Käyttöliittymän esikatselu”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Käyttöliittymän esikatselu”?

Iteroikaa nopeasti @Preview-annotaatiolla. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Käyttöliittymän esikatselu”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy