bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
CiberOT Ciberseguretat en Entorns d'Operació
Tots els mòduls del cicle
android_listview
→ Slide 1

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:

↓ Slide 2

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.

→ Slide 3

Reciclatge d'elements gràfics

→ Slide 4

Reciclatge d'elements gràfics (2)

recycling-items.jpg

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.


→ Slide 5

MVC ampliat i Adapter

listview-adapter.jpg

  • 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.
↓ Slide 6

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.


→ Slide 7

Exemple ArrayList simplificat

  • 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

↓ Slide 8

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...
    }
}
↓ Slide 9

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();
            }
        });
    }
}
→ Slide 10

Exercicis

↓ Slide 11

Exercici 1

Implementa el codi d'exemple en un nou projecte anomenat «Listilla».

  • Crea nou projecte amb una empty activity.
  • Substitueix el codi a ActivityMain per l'exemple.
  • Arregla el package perquè concordi amb el teu projecte.
  • Afegeix al activity_main.xml una ListView anomenada recordsView.
  • Crea un nou layout amb el nom list_item.xml que serà el placeholder per cada element de la llista. Pots crear-ho amb
    File -> New -> Layout Resource File
    • Transforma el seu layout per defecte a LinearLayout.
    • Afegiex 2 TextView amb IDs nom i intents.
  • Afegeix un botó al layout activity_main.xml amb ID = button. Servirà per afegir ítems al ListView i comprovar el scroll del ListView.
↓ Slide 12

Exercici 2

Randomitza la generació d'entrades a la taula, generant nº d'intents variats i noms i cognoms mesclant-los de dues llistes d'uns 15 o 20 elements.

↓ Slide 13

Exercici 3

Afegeix una imatge als elements de la llista (imatge fixa). Per fer-ho hauràs de:

  • Ves a la view de projecte de l'Android Studio. Visualitza la carepta
    res -> drawable
  • Importar una imatge arrossegant-la dins de Drawable.
  • Modificar el list_item.xml i afegir-hi una ImageView amb la imatge anterior.
  • Modifica el layout del list_item perquè et quedi com la imatge suggerida adjunta.
    • Pista: pots combinar diversos LinearLayout horitzontals i verticals per aconseguir el resultat desitjat.
  • Afegeix diverses imatges als resources i aleatoritza l'assignació d'imatges a cada element Record.

↓ Slide 14

Exercici 4

Afegeix un botó que ordeni la llista del model, i que refresqui la ListView.

android_listview.txt · Darrera modificació: 2024/10/29 19:06 per enric_mieza_sanchez