Android Academy · Oppitunti

RecyclerViewn perusteet

Näyttäkää suuria luetteloita tehokkaasti RecyclerViewlla. Luokaa Adapter ja ViewHolder ja yhdistäkää tiedot ViewBindingilla.

Oppitunti 2/611 vaihetta

RecyclerViewn perusteet on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/6. 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ä 6 oppituntia.

Miksi RecyclerView?

RecyclerView on Androidin vakiotapa näyttää vieritettävä alkiolista.

Vanhempaan ListView-komponenttiin verrattuna RecyclerView:

Kierrättää näkymiä vieritettäessä — luo vain näytölle mahtuvan määrän näkymiä
Toimii pysty- ja vaakasuuntaisissa listoissa sekä ruudukoissa
On erittäin muokattavissa LayoutManagerien avulla

RecyclerView-arkkitehtuuri

RecyclerView tarvitsee toimiakseen kolme osaa:

RecyclerView — asettelun XML-tiedostossa oleva widget
Adapter — yhdistää tiedot alkionäkymiin
ViewHolder — sisältää viittaukset kunkin lista-alkion sisäisiin näkymiin

Adapter luo ViewHolderit ja yhdistää niihin tiedot käyttäjän vierittäessä listaa.

RecyclerView-komponentin lisääminen XML:ään

Lisätkää widget asetteluun ja ilmoittakaa riippuvuus tiedostossa build.gradle:

<!-- In res/layout/activity_main.xml -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- app/build.gradle dependencies: -->
<!-- implementation 'androidx.recyclerview:recyclerview:1.3.2' -->

Alkion asettelu

Luokaa jokaiselle lista-alkiolle erillinen XML-tiedosto. Esimerkiksi res/layout/item_fruit.xml:

<!-- res/layout/item_fruit.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tvCalories"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp" />

</LinearLayout>

Tietomalli

Määritelkää listan kutakin alkiota edustava data class:

data class Fruit(
    val name: String,
    val calories: Int
)

Adapterin luominen

Adapter yhdistää tiedot alkion asetteluun. Siinä on kolme keskeistä metodia:

onCreateViewHolder — muodostaa alkion XML:n näkymän
onBindViewHolder — täyttää yhden alkion tiedot
getItemCount — kaikkien alkioiden kokonaismäärä

Adapterin toteutus

Täydellinen ja minimaalinen RecyclerView Adapter:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class FruitAdapter(
    private val fruits: List<Fruit>
) : RecyclerView.Adapter<FruitAdapter.ViewHolder>() {

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val tvName: TextView = view.findViewById(R.id.tvName)
        val tvCalories: TextView = view.findViewById(R.id.tvCalories)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_fruit, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit = fruits[position]
        holder.tvName.text = fruit.name
        holder.tvCalories.text = "${fruit.calories} kcal"
    }

    override fun getItemCount() = fruits.size
}

Aktiviteetin määrittäminen

Yhdistäkää RecyclerView, Adapter ja LayoutManager toisiinsa Activityssä:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    val fruits = listOf(
        Fruit("Apple", 95),
        Fruit("Banana", 105),
        Fruit("Cherry", 50),
        Fruit("Mango", 202)
    )

    val adapter = FruitAdapter(fruits)

    binding.recyclerView.apply {
        this.adapter = adapter
        layoutManager = LinearLayoutManager(this@MainActivity)
    }
}

GridLayoutManager

Vaihtakaa LayoutManager näyttämään yhden sarakkeen listan sijaan ruudukon:

LinearLayoutManager — pysty- tai vaakasuuntainen lista
GridLayoutManager(context, spanCount) — ruudukko, jossa on N saraketta
StaggeredGridLayoutManager — Pinterest-tyylinen porrastettu ruudukko

Pikatarkistus

Mikä on ViewHolderin tehtävä RecyclerView Adapterissa?

Vastaa interaktiivisessa oppitunnissa

Kertaus: RecyclerViewn perusteet

Osaatte nyt näyttää listoja tehokkaasti:

RecyclerView kierrättää näkymiä suorituskyvyn parantamiseksi
Kolme osaa: RecyclerView-widget, Adapter ja ViewHolder
Alkion XML määrittää yhden rivin tai kortin ulkoasun
Adapter yhdistää tiedot näkymiin onBindViewHolder-metodissa
LayoutManager hallitsee lista-, ruudukko- ja porrastettua asettelua

Seuraavaksi: tehkää lista-alkioista napautettavia napsautustapahtumilla.

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 ”RecyclerViewn perusteet” ilmainen?

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

Mitä opin oppitunnilla ”RecyclerViewn perusteet”?

Näyttäkää suuria luetteloita tehokkaasti RecyclerViewlla. Luokaa Adapter ja ViewHolder ja yhdistäkää tiedot ViewBindingilla. 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 2/6.

Kuinka kauan ”RecyclerViewn perusteet”-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