Utilitzant ListView a Android

Aquest article segueix del principal Android en aquesta wiki.

• ListView és un widget obsolet.
• Es manté per backward compatibility.
• Widget recomanat actual: Android RecyclerView (però més complicat d'utilitzar).

Referències:

• Article Android en aquesta wiki.
• Android RecyclerView en aquesta wiki.
• Tutorial d'utilització de ListView d'Android
• Codi d'exemple més simple d'utilització d'una ListView

Perquè és complicada una ListView?

Com veurem ara a l'hora d'implementar-ho, la ListView resulta una mica més complicada del què ens esperaríem. Això es deu a la particularitat dels dispositius mòbils de la seva escassa RAM. No podem, doncs, implementar una llista amb gran quantitat d'entrades que poden contenir pesants elements multimèdia com fotos d'alta resolució, i que es carreguin totes a la RAM directament. Ens cal uns tipus de Views que carreguin només les dades que s'estan visualitzant, i que generin nous ítems només quan l'usuari faci el scroll.

Reciclatge d'elements gràfics

Reciclatge d'elements gràfics (2)

Com podem veure a la imatge, el sistema farà un reciclat dels ítems que ha generat prèviament i que ja no estan visibles, estalviant RAM de forma global.

MVC ampliat i Adapter

• Tota View intenta seguir un paradigma Model - Vista - Controlador.
• En altres entorns segurament trobaríem una connexió més simple:
  • Model de dades (Ex. ArrayList) connectat directament a la ListView.
  • El codi de Controlador podria estar en altres objectes de l'aplicació (com la Activity) o en una classe derivada de la ListView.
• En Android, degut a que necessitem la gestió del reciclatge dels ítems gràfics, ens apareix un element extra anomenat Adapter. Aquest és l'element que coneix la View i el nostre Model i que ha de saber com reciclar els ítems per a l'estalvi de RAM.

Layouts

Per a cada element (item) de la ListView es necessita un layout personalitzat. El pots crear tu mateix, o simplement adoptar uns layouts prefabricats per als items. Al arxiu de recursos android.R.layout trobaràs alguns com per exemple android.R.layout.simple_list_item_1 que et pot estalviar feina per als casos més habituals.

Exemple ArrayList simplificat

• Referència: codi d'exemple amb ArrayAdapter.
• Exemple d'una taula de rècords amb nom del jugador i intents.
• Utilitza un list_item personalitzat.
• No creem una classe derivada de ArrayAdapter: simplement instanciem un de genèric (línia 43) i sobreescrivim el mètode getView.

Segueix abaix per veure el codi

Connexió (simplificada) Model - Adapter - View

public class MainActivity extends AppCompatActivity {
    ArrayList<Record> records;    // Model Taula de records (ArrayList)
    ArrayAdapter<Record> adapter; // l'Adapter serà l'intermediari amb la ListView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Creem llista de records, etc...

        // Inicialitzem l'Adapter i el connectem amb el Model (records)
        adapter = new ArrayAdapter<Record>( this, R.layout.list_item, records )
        {
            @Override
            public View getView(int pos, View convertView, ViewGroup container)
            {
                // "inflem" el Layout a partir de l'XML
                convertView = getLayoutInflater().inflate(R.layout.list_item, container, false);
                // transferim dades del Model als widgets per a l'element en la posició "pos"
                ((TextView) convertView.findViewById(R.id.nom)).setText(getItem(pos).nom);
            }

        };

        // Connectem Adapter amb la View
        ListView lv = (ListView) findViewById(R.id.recordsView);
        lv.setAdapter(adapter);
        
        // Creem la resta d'elements de l'app...
    }
}

Codi complert taula de rècords

MainActivity.java

package com.example.listilla;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.*;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    // Model: Record (intents=puntuació, nom)
    class Record {
        public int intents;
        public String nom;

        public Record(int _intents, String _nom ) {
            intents = _intents;
            nom = _nom;
        }
    }
    // Model = Taula de records: utilitzem ArrayList
    ArrayList<Record> records;

    // ArrayAdapter serà l'intermediari amb la ListView
    ArrayAdapter<Record> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Inicialitzem model
        records = new ArrayList<Record>();
        // Afegim alguns exemples
        records.add( new Record(33,"Manolo") );
        records.add( new Record(12,"Pepe") );
        records.add( new Record(42,"Laura") );

        // Inicialitzem l'ArrayAdapter amb el layout pertinent
        adapter = new ArrayAdapter<Record>( this, R.layout.list_item, records )
        {
            @Override
            public View getView(int pos, View convertView, ViewGroup container)
            {
                // getView ens construeix el layout i hi "pinta" els valors de l'element en la posició pos
                if( convertView==null ) {
                    // inicialitzem l'element la View amb el seu layout
                    convertView = getLayoutInflater().inflate(R.layout.list_item, container, false);
                }
                // "Pintem" valors (també quan es refresca)
                ((TextView) convertView.findViewById(R.id.nom)).setText(getItem(pos).nom);
                ((TextView) convertView.findViewById(R.id.intents)).setText(Integer.toString(getItem(pos).intents));
                return convertView;
            }

        };

        // busquem la ListView i li endollem el ArrayAdapter
        ListView lv = (ListView) findViewById(R.id.recordsView);
        lv.setAdapter(adapter);

        // botó per afegir entrades a la ListView
        Button b = (Button) findViewById(R.id.button);
        b.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                for (int i=0;i<3;i++) {
                    records.add(new Record(100, "Anonymous"));
                }
                // notificar l'adapter dels canvis al model
                adapter.notifyDataSetChanged();
            }
        });
    }
}

Exercicis

Exercici 1

Exercici 2

Exercici 3

Exercici 4