bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
android_listview

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
android_listview [2021/10/15 16:07]
enrique_mieza_sanchez 		android_listview [2024/10/29 19:06] (actual)
enric_mieza_sanchez
Línia 2: Línia 2:
  
 ====== Utilitzant ListView a Android ====== ====== Utilitzant ListView a Android ======
 +Aquest article segueix del principal [[Android]] en aquesta wiki.
  
   * ''ListView'' és un //widget// obsolet.   * ''ListView'' és un //widget// obsolet.
   * Es manté per //backward compatibility//.   * Es manté per //backward compatibility//.
-  * Substitut actual: ''RecycleView'' més complicat d'utilitzar+  * //Widget// recomanat actual: [[Android RecyclerView]] (però més complicat d'utilitzar).
  
 Referències: Referències:
 +  * Article [[Android]] en aquesta wiki.
 +  * [[Android RecyclerView]] en aquesta wiki.
   * [[https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView|Tutorial d'utilització de ListView d'Android]]   * [[https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView|Tutorial d'utilització de ListView d'Android]]
   * [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|Codi d'exemple més simple d'utilització d'una ListView]]   * [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|Codi d'exemple més simple d'utilització d'una ListView]]
  
-{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 }}+{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 android MVC java mobile}}
  
 ==== Perquè és complicada una ListView? ==== ==== Perquè és complicada una ListView? ====
Línia 26: Línia 29:
 \\ \\
  
-===== Paradigma MVC ampliat ===== +===== MVC ampliat i Adapter =====
-Tota ''View'' te la intenció de seguir un paradigma Model - Vista - Controlador. En altres entorns segurament trobaríem el Model de dades, per exemple, un ''ArrayList'', connectat directament a la ''ListView'', i 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. +
- +
-===== Utilitzant Adapter =====+
  
 {{ listview-adapter.jpg?direct }} {{ listview-adapter.jpg?direct }}
 +
 +  * 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 ==== ==== Layouts ====
Línia 41: Línia 45:
  
 ===== Exemple ArrayList simplificat ===== ===== Exemple ArrayList simplificat =====
-Podeu veure en [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|aquest exemple de ArrayAdapter]] com utilitzar un ''list_item'' personalitzat. Fixeu-vos en què no creem una classe derivada de ''ArrayAdapter'', sinó que simplement instanciem un de genèric (línia 43) i sobreescrivim el mètode ''getView''. 
  
-En aquest exemple estem fent una taula de rècords on enregistrem el nom del jugador i el nombre d'intents que ha fet per resoldre un joc d'endevinar el número.+  * Referència: [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|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 ==== 
 + 
 +<code java> 
 +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... 
 +    } 
 +} 
 + 
 +</code> 
  
-==== Codi taula de rècords ==== +==== Codi complert taula de rècords ==== 
-<sxh java>+<file java MainActivity.java>
 package com.example.listilla; package com.example.listilla;
  
Línia 116: Línia 160:
             @Override             @Override
             public void onClick(View v) {             public void onClick(View v) {
-                for (int i=0;i<500;i++) {+                for (int i=0;i<3;i++) {
                     records.add(new Record(100, "Anonymous"));                     records.add(new Record(100, "Anonymous"));
                 }                 }
Línia 126: Línia 170:
 } }
  
-</sxh>+</file>
  
  
 ===== Exercicis ===== ===== Exercicis =====
  
 +==== Exercici 1 ====
 <WRAP todo> <WRAP todo>
 Implementa el codi d'exemple en un nou projecte anomenat "Listilla". Implementa el codi d'exemple en un nou projecte anomenat "Listilla".
Línia 137: Línia 182:
   * Arregla el ''package'' perquè concordi amb el teu projecte.   * Arregla el ''package'' perquè concordi amb el teu projecte.
   * Afegeix al ''activity_main.xml'' una ''ListView'' anomenada ''recordsView''.   * Afegeix al ''activity_main.xml'' una ''ListView'' anomenada ''recordsView''.
-  * Afegeix un nou //layout// lineal dins la ''ListView'' anomenat ''list_item''. Aquest contindrà 2 ''TextView'' amb IDs ''nom'' i ''intents''. +  * Crea un nou //layout// amb el nom ''list_item.xml'' que serà el //placeholder// per cada element de la llista. Pots crear-ho amb <code>File -> New -> Layout Resource File</code> 
-  * Afegeix un botó amb ID = ''button''. Servirà per afegir ítems al ''ListView'' i comprovar el //scroll//.+    * 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''.
 </WRAP> </WRAP>
  
 +
 +==== Exercici 2 ====
 <WRAP todo> <WRAP todo>
-Randomitza la generació d'entrades a la taula, generant nº d'intents variats i noms trets d'una llista d'uns 15 o 20 elements.+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.
 </WRAP> </WRAP>
  
 +
 +==== Exercici 3 ====
 +<WRAP todo>
 +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 <code>res -> drawable</code>
 +  * 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''.
 +
 +{{ android:listilla1.png?200 }}
 +</WRAP>
 +
 +
 +==== Exercici 4 ====
 <WRAP todo> <WRAP todo>
 Afegeix un botó que ordeni la llista del model, i que refresqui la ''ListView''. Afegeix un botó que ordeni la llista del model, i que refresqui la ''ListView''.
android_listview.1634314066.txt.gz · Darrera modificació: 2021/10/15 16:07 per enrique_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki