bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


android_recyclerview

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_recyclerview [2023/12/18 16:03]
enric_mieza_sanchez [Implementar una RecyclerView]
android_recyclerview [2023/12/18 23:19] (actual)
enric_mieza_sanchez [Implementar una RecyclerView]
Línia 1: Línia 1:
 ====== Android RecyclerView ====== ====== Android RecyclerView ======
  
-''RecyclerView'' és l'objecte adequat per a visualitzar llargues llistes d'objectes en les darreres versions d'Android. Similarment a [[Android ListVieẉ]] però amb un funcionament una mica més sofistica, la idea segueix sent reciclar les "targetes" de visualització de cada //item// per estalviar RAM. Seguint el paradigma [[MVC]], necessitarà un objecte intermig ''Adapter'' que ens enllaça la part gràfica amb la part de model.+''RecyclerView'' és l'objecte adequat per a visualitzar llargues llistes d'objectes en les darreres versions d'Android. Similarment a [[Android ListVieẉ]] però amb un funcionament una mica més sofisticat, la idea segueix sent reciclar les "targetes" de visualització de cada //item// per estalviar RAM. Seguint el [[https://es.wikipedia.org/wiki/Modelo-vista-controlador|paradigma MVC]], necessitarà un objecte intermig ''Adapter'' que ens enllaça la part gràfica amb la part de model.
  
 Referències: Referències:
Línia 8: Línia 8:
   * [[Android Camera]]   * [[Android Camera]]
   * [[https://developer.android.com/develop/ui/views/layout/recyclerview|Doc oficial Android RecyclerView]].   * [[https://developer.android.com/develop/ui/views/layout/recyclerview|Doc oficial Android RecyclerView]].
 +  * Un [[https://stackoverflow.com/questions/40584424/simple-android-recyclerview-example|exemple alternatiu de creació de RecyclerView]].
  
-===== Diagrames =====+{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 #DamMp08Uf2 #DamMp08Uf02 Android mobile java MVC }} 
 + 
 + 
 +===== Reciclatge d'elements gràfics =====
  
 {{recycling-views.png?direct}} {{recycling-views.png?direct}}
  
 {{recycling-items.jpg?direct}} {{recycling-items.jpg?direct}}
 +
 +===== MVC ampliat i Adapter =====
 +
 +{{ 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 ''View'' (ja sigui ''ListView'' o ''RecyclerView'').
 +    * El codi de Controlador podria estar en altres objectes de l'aplicació (com la ''Activity'') o en una classe derivada de la ''View''.
 +  * 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**.
 +
 +\\
  
 ===== Implementar una RecyclerView ===== ===== Implementar una RecyclerView =====
Línia 19: Línia 35:
 Intentarem seguir les indicacions de la [[https://developer.android.com/develop/ui/views/layout/recyclerview|doc oficial d'Android de RecyclerView]], però sovint cal algun //hack// perquè funcioni del tot: Intentarem seguir les indicacions de la [[https://developer.android.com/develop/ui/views/layout/recyclerview|doc oficial d'Android de RecyclerView]], però sovint cal algun //hack// perquè funcioni del tot:
  
-  - Crear RecyclerView al main tempate activity_main.xml +  - Insertar una RecyclerView al main tempate de l'''Activity'' (per exemple ''activity_main.xml''). 
-  - eliminar TextView del main template per evitar confusions de IDs +  - Eliminar ''TextView'' del main template per evitar confusions de IDs, o com a mínim modificar el seu ID amb un nom que no sigui el típic ''textView'' per quelcom més particularitzat. 
-  - Crear nova Java class CustomAdapter+  - Crear nova Java class ''CustomAdapter''
   - Enganxar el codi de la doc   - Enganxar el codi de la doc
   - Afegir classes necessàries   - Afegir classes necessàries
Línia 29: Línia 45:
     - layout_marginleft i layout_marginright = "1dp"     - layout_marginleft i layout_marginright = "1dp"
     - layout_height = "wrap_content"     - layout_height = "wrap_content"
-  - Canviar a CustomLayout R.layout.text_row_item per R.layout.item_layout +  - Canviar al CustomAdapter: R.layout.text_row_item per R.layout.item_layout 
-  - afegir a onCreate:+  - Afegir ''Activity.onCreate()'' (l'exemple de la doc oficial és incomplert):<code java> 
 +String []dataset = { "hola q tal", "com va", "tercer element" }; 
 +customAdapter = new CustomAdapter(dataset); 
 +RecyclerView recyclerView = findViewById(R.id.recyclerView); 
 +RecyclerView.LayoutManager lm = new LinearLayoutManager(this); 
 +recyclerView.setLayoutManager(lm); 
 +recyclerView.setAdapter(customAdapter); 
 +</code> 
 + 
 +Si no veieu elements de la llista al ''RecyclerView'', revisa: 
 +  - Que hagis posat un ''LayoutManager'' al codi de l'''Activity'', sense aquest element no funciona el ''RecyclerView'' (l'exemple de la doc oficial no el té). 
 +  - Que el ''RecyclerView'' no estigui massa ajustat al //top// del //layout// de la ''Activity''. Posa un marge més gran perquè la ''StatusBar'' pot amagar els elements. 
 +  - Vigila que no tinguis elements gràfics dels diferents //layouts// amb un mateix ID, en particular el del ''textView''
 + 
 +Un cop en funcionament, pots sofisticar la visualització: 
 +  - Millorant els ''item_layout.xml'' i afegint-hi elements com ''ImageView'', etc. 
 +  - Prova amb la ''GridLayoutManager'' enlloc del ''LinearLayoutManager''
 +  - Modificant els elements del model. Caldrà canviar: 
 +    - El propi ''dataset'' que podria ser un ''ArrayList'' o similar d'objectes amb diversos atributs. 
 +    - El //template// del ''CustomLayout'' i canviant del ''String'' de l'exemple a l'objecte desitjat. 
 + 
 +\\
  
 +===== Exercici =====
 +<WRAP todo>
 +Implementa una aplicació de captació d'imatges com la descrita a [[Android Camera]] que s'enregistrin en l'espai d'emmagatzematge compartit de l'aplicació.
  
-        String []dataset = { "hola q tral", "com va", "tercer element" }; +Visualitza les imatges enregistrades en una nova ''Activity'' que visualitzi a mode de "galeria d'imatgespròpies de la nostra app.
-        customAdapter = new CustomAdapter(dataset); +
-        RecyclerView recyclerView = findViewById(R.id.recyclerView); +
-        recyclerView.setAdapter(customAdapter);+
  
 +El ''dataset'' pot ser una llista d'elements ''File'' que podem llistar de l'espai d'emmagatzematge compartit de la nostra aplicació. 
 +</WRAP>
  
android_recyclerview.1702915434.txt.gz · Darrera modificació: 2023/12/18 16:03 per enric_mieza_sanchez