ListView i ArrayAdapter z wbudowanym układem

Czego się dziś nauczysz

Lista i adapter

ListView to kontrolka, która wyświetla elementy jeden pod drugim i sama je przewija. Sama z siebie nie wie, co ma pokazać — nie da się jej po prostu „wrzucić” tablicy, tak jak wpisuje się tekst do TextView.

Między danymi a listą stoi adapter. Pomyśl o nim jak o kelnerze: dane to kuchnia, lista to stolik. Lista mówi „potrzebuję wiersza numer 3”, a adapter bierze z tablicy element numer 3, wkłada go do gotowego wiersza i podaje liście. Lista prosi tylko o te wiersze, które akurat widać na ekranie — dlatego nawet tysiąc elementów nie spowolni telefonu.

W kodzie to dwie linie. Pierwsza tworzy adapter, druga podłącza go do listy:

val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, kola)
lista.adapter = adapter

Konstruktor ArrayAdapter dostaje trzy rzeczy:

Wbudowane układy wierszy

Android ma w sobie kilka gotowych plików XML z wyglądem wiersza. Odwołujemy się do nich przez android.R.layout… — słowo android. na początku oznacza „zasób systemu”, a nie twojego projektu. Twoje pliki są w R.layout…, systemowe w android.R.layout….

trzy wbudowane układy wierszy — zmienia się drugi parametr ArrayAdapter (listy wyboru potrzebują jeszcze atrybutu choiceMode, poznasz go w lekcji 27)

Układ simple_list_item_1 to w środku jeden TextView o wysokości co najmniej 48 dp — tyle, żeby wygodnie trafić palcem. Gdy wiersz ma wyglądać inaczej (obrazek, dwa napisy, przycisk), potrzebny będzie własny układ i własny adapter — to temat lekcji 28.

Kliknięcie elementu

Przycisk ma setOnClickListener. Lista ma podobną metodę dla wierszy — setOnItemClickListener. Kod w klamrach wykona się po dotknięciu dowolnego wiersza:

lista.setOnItemClickListener { _, _, position, _ ->
    val kolo = kola[position]          // napis z klikniętego wiersza
    tvWybor.text = "Wybrano: $kolo"
}

Android przekazuje do klamer cztery wartości. Potrzebna jest tylko trzecia — position, czyli numer klikniętego wiersza. Pozostałych nie używamy, więc w ich miejscu piszemy podkreślnik _.

Ponieważ numeracja wierszy i indeksy tablicy zaczynają się od zera, kola[position] zawsze daje dokładnie ten napis, który był w klikniętym wierszu.

Dane z zasobów

Napisów nie trzeba trzymać w kodzie. Plik res/values/strings.xml może zawierać całą tablicę napisów — string-array:

<string-array name="kola">
    <item>Robotyka</item>
    <item>Szachy</item>
    <item>Fotografia</item>
</string-array>

private lateinit var kola: Array<String>     // pole klasy — wartość nada onCreate

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    kola = resources.getStringArray(R.array.kola)
    // dalej adapter jak wcześniej
}

Koła zainteresowań

Szkoła ma osiem kół zainteresowań. Aplikacja pokazuje je na liście. Po dotknięciu koła napis nad listą zmienia się na „Wybrano: …”, a na dole pojawia się krótki komunikat z numerem wiersza.

drugi wiersz ma numer 1, bo numeracja zaczyna się od zera; pozostałe dwa koła są niżej — listę można przewinąć

Przygotowanie projektu

1. Nowy projekt: Empty Views Activity, nazwa KolaZainteresowan, język Kotlin, minimalne SDK API 24.
2. Podmień całą zawartość activity_main.xml i MainActivity.kt na kod poniżej. Pierwszą linię package … w MainActivity.kt zostaw taką, jaką utworzył twój projekt.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_margin="16dp"
    android:fitsSystemWindows="true">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Koła zainteresowań"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tvWybor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="Dotknij koła, aby je wybrać"
        android:textSize="18sp" />

    <!-- wysokość 0dp + waga 1: lista zajmuje całe pozostałe miejsce -->
    <ListView
        android:id="@+id/lista"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

package pl.schoolit.kolazainteresowan

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.ListView
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // kontrolki ekranu — znajdzie je initUI()
    private lateinit var tvWybor: TextView
    private lateinit var lista: ListView

    // dane listy
    private val kola = arrayOf(
        "Robotyka", "Programowanie gier", "Grafika komputerowa", "Sieci komputerowe",
        "Fotografia", "Szachy", "Język angielski", "Koszykówka"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initUI()

        // adapter: dane + wbudowany wygląd wiersza
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, kola)
        lista.adapter = adapter

        lista.setOnItemClickListener { _, _, position, _ ->
            val kolo = kola[position]
            tvWybor.text = "Wybrano: $kolo"
            Toast.makeText(this, "Kliknięto wiersz nr $position", Toast.LENGTH_SHORT).show()
        }
    }

    private fun initUI() {
        tvWybor = findViewById(R.id.tvWybor)
        lista = findViewById(R.id.lista)
    }
}

Co dzieje się po kolei

• Pola tvWybor i lista są zadeklarowane w klasie jako lateinit var, a wartość dostają w initUI() — tak jak od lekcji 19. Dzięki temu listę widać w każdej metodzie klasy, nie tylko w onCreate.
• Tablica kola to zwykłe dane w Kotlinie. Lista jeszcze nic o niej nie wie.
• ArrayAdapter(this, android.R.layout.simple_list_item_1, kola) tworzy adapter dla tej tablicy z wbudowanym wyglądem wiersza.
• lista.adapter = adapter łączy listę z adapterem — od tej chwili na ekranie widać wiersze.
• setOnItemClickListener dostaje numer klikniętego wiersza w position. Napis pobieramy z tej samej tablicy, z której zbudowano adapter.
• Toast pokazuje numer wiersza — dzięki temu widać, że liczenie zaczyna się od zera.

Zestawienie elementów

Zanim utkniesz

Zadania

Każde zadanie wykonaj w nowym projekcie Empty Views Activity. Wskazówkę otwórz dopiero wtedy, gdy utkniesz.

Co trzeba zapamiętać

• ListView nie przyjmuje danych bezpośrednio — potrzebuje adaptera.
• ArrayAdapter(this, android.R.layout.simple_list_item_1, dane) zamienia tablicę napisów na wiersze z gotowym wyglądem.
• Systemowe układy to android.R.layout…, twoje własne — R.layout….
• Kliknięcie wiersza obsługuje setOnItemClickListener; position liczy od 0 i pasuje do indeksu w tablicy.
• Napisy listy mogą być w strings.xml jako string-array — odczytuj je w onCreate.

Dokumentacja: ListView, ArrayAdapter, String array w zasobach.