Android Academy · Oppitunti

Mikä on Jetpack Compose?

Ymmärtäkää Androidin deklaratiivinen käyttöliittymä.

Oppitunti 1/413 vaihetta

Mikä on Jetpack Compose? on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Mikä Jetpack Compose on

Jetpack Compose on Androidin moderni työkalupakki natiivien käyttöliittymien rakentamiseen. XML-asettelutiedostojen kirjoittamisen sijaan kuvaat käyttöliittymän suoraan Kotlin-koodissa.

Compose on deklaratiivinen: kerrot, miltä näytön pitäisi näyttää tietyssä tilassa, ja se selvittää itse, miten näyttö piirretään ja päivitetään.

Vanha tapa: XML-näkymät

Perinteisesti Android-näyttö tarvitsi kaksi osaa:

XML-asettelutiedoston, joka kuvasi käyttöliittymäkomponentit.
Kotlin/Java-koodin, joka etsi näkymät findViewById-kutsulla ja muokkasi niitä.

XML:n ja koodin pitäminen synkronoituna oli työlästä ja altista virheille.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Imperatiivinen ja deklaratiivinen tapa

XML-näkymien kanssa kirjoitat imperatiivista koodia: haet näkymän ja muutat sitä vaihe vaiheelta.

Composen kanssa kirjoitat deklaratiivista koodia: kuvaat lopputuloksen tietojesi funktiona. Kun tiedot muuttuvat, Compose piirtää tarvittavat osat automaattisesti uudelleen.

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Composable-funktiot

Composen rakennuspalikka on composable-funktio: tavallinen Kotlin-funktio, joka on merkitty @Composable-annotaatiolla ja tuottaa käyttöliittymän.

Composable-funktiot voivat kutsua muita composable-funktioita, joten näytöt voidaan rakentaa pienistä uudelleenkäytettävistä osista.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Ei findViewById-kutsua

Composessa ei ole findViewById-kutsua eikä näkymätunnuksia. Käyttöliittymä on funktiokutsu. Jos haluat näyttää eri tekstin, välitä yksinkertaisesti eri argumentti ja anna Composen suorittaa uudelleenkokoonpano.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

Käyttöliittymä tilan funktiona

Yksi keskeinen ajatus on: UI = f(state). Näyttö on composable-funktioiden tuottama tulos nykyisen tilan perusteella. Kun tila muuttuu, sama funktio tuottaa uuden käyttöliittymän.

Tämä tekee käyttöliittymistä ennakoitavia ja helpommin ymmärrettäviä.

Kaikki on Kotlinia

Koska composable-funktiot ovat Kotlin-funktioita, voit rakentaa käyttöliittymän silmukoilla, ehtolauseilla ja muuttujilla. Erillistä mallikieltä ei tarvita.

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

Vähemmän toistuvaa koodia

Compose poistaa valtavan määrän liimakoodia. XML:n lataamista, yksinkertaisten listojen adaptereita eikä manuaalista asettelun ja logiikan yhdistämistä tarvita.

Tuloksena on: vähemmän tiedostoja ja vähemmän virheitä.

Yhteensopiva näkymien kanssa

Koko sovellusta ei tarvitse kirjoittaa uudelleen. Compose toimii yhdessä vanhan View-järjestelmän kanssa. Voit upottaa Composen olemassa olevaan XML-näyttöön tai näkymän Composeen.

Näin tiimit voivat siirtyä Composeen vaiheittain.

Mitä tarvitset

Composen käyttämiseen tarvitset:

Uudehkon Android Studion.
Compose-riippuvuudet Gradle-tiedostossasi.
Activityn, joka kutsuu setContent { } -funktiota composable-funktioiden isännöimiseksi.

Pieni näyttö

Tässä on kokonainen minimaalinen Compose-näyttö. setContent toimii siltana Androidin Activity-komponentista Compose-maailmaan.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

Pikatarkistus

Mikä kuvaa parhaiten Jetpack Composea?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit, että Jetpack Compose on deklaratiivinen, Kotlin-keskeinen käyttöliittymien työkalupakki. Keskeiset ajatukset:

Käyttöliittymä rakennetaan @Composable-funktioista.
Ei XML:ää eikä findViewById-kutsuja.
UI = f(state) — kun tila muuttuu, Compose piirtää käyttöliittymän uudelleen.

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 ”Mikä on Jetpack Compose?” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mikä on Jetpack Compose?”. 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 ”Mikä on Jetpack Compose?”?

Ymmärtäkää Androidin deklaratiivinen käyttöliittymä. 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 1/4.

Kuinka kauan ”Mikä on Jetpack Compose?”-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