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:00]
enrique_mieza_sanchez 		android_listview [2023/12/18 22:48] (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 19: Línia 22:
 {{recycling-views.png?direct}} {{recycling-views.png?direct}}
  
-===== Reciclatge d'elements gràfics =====+===== Reciclatge d'elements gràfics (2) =====
 {{recycling-items.jpg?direct}} {{recycling-items.jpg?direct}}
  
Línia 26: Línia 29:
 \\ \\
  
-===== MVC + Adapter ===== +===== 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.+{{ listview-adapter.jpg?direct }}
  
-{{ listview-adapter.jpg?direct&500 }}+  * 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 [[https://developer.android.com/reference/android/R.layout|arxiu de recursos android.R.layout]] trobaràs alguns com per exemple [[https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView#using-a-basic-arrayadapter|android.R.layout.simple_list_item_1]] que et pot estalviar feina per als casos més habituals. 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 [[https://developer.android.com/reference/android/R.layout|arxiu de recursos android.R.layout]] trobaràs alguns com per exemple [[https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView#using-a-basic-arrayadapter|android.R.layout.simple_list_item_1]] que et pot estalviar feina per als casos més habituals.
  
Línia 38: 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''.
  
-<sxh java>+==== Codi taula de rècords ==== 
 +<file java>
 package com.example.listilla; package com.example.listilla;
  
Línia 112: Línia 122:
             @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 122: Línia 132:
 } }
  
-</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 133: Línia 144:
   * 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> 
 + 
 + 
 +==== Exercici 2 ==== 
 +<WRAP todo> 
 +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> 
 + 
 + 
 +==== 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> </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.1634313630.txt.gz · Darrera modificació: 2021/10/15 16:00 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