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ó

--- android_recyclerview [2023/12/18 22:16]
enric_mieza_sanchez [Implementar una RecyclerView]
+++ android_recyclerview [2026/10/06 22:19] (actual)
enric_mieza_sanchez [Implementar una RecyclerView]
@@ Línia 1: / Línia 1: @@
 ====== Android RecyclerView ======
-''RecyclerView'' és l'objecte adequat per a visualitzar llargues llistes d'objectes en les darreres versions d'Android. Similarment a [[Android ListVieẉ]] 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 ListVieẉ]] 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:
@@ Línia 8: / Línia 8: @@
   * [[Android Camera]]
   * [[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-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 =====
-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:
+**Exemple: agenda de contactes**
-  - Insertar una RecyclerView al main tempate de l'''Activity'' (per exemple ''activity_main.xml'').
+Volem fer una aplicació d'agenda de contactes simple. Amb **nom** i **telèfon** n'hi haurà prou per al model de contacte.
+Seguirem les indicacions de la [[https://developer.android.com/develop/ui/views/layout/recyclerview|doc oficial d'Android de RecyclerView]].
+Haureu de crear els següents arxius o objectes:
+  * ''Contact.kt'': pel model de contacte (nom i telèfon al menys).
+  * ''ContactAdapter.kt'': necessari per fer funcionar la ''RecyclerView''. Seguirem el codi d'exemple de la doc.
+  * ''contact_item.xml'': layout particularitzat per cada item de contacte a la llista. Preferiblement utilitzant ''LinearLayout'' vertical. Crearem un nou arxiu a ''res -> layout''.
+  * ''dataset'' : el més directe és implementar una ''ArrayList<Contact>''. Es crearà dins de ''MainActivity''.
+Us deixo algunes pistes per facilitar la implementació:
+  - Crear un //dataset// d'exemple a ''MainActivity'': el més senzill seria una ''ArrayList<Contact>''.
+    * Per les dades podeu crear un array amb 10 noms i un altre amb 10 cognoms i que els vagi combinant aleatòriament entre ells amb un num de telèfon random entre 100000000 i 999999999.
+    * Crea al menys 40 contactes per comprovar el resultat de la visualització del ''RecyclerView''.
+  - Crear classes ''Contact'' i ''ContactAdapter''. Podeu fer click dret sobre la carpeta principal del projecte i fer ''New -> Kotlin Class/File''.
+  - Creeu el codi del ''Contact'': com a mínim ha de tenir nom i telèfon.
+  - Insertar una RecyclerView al main tempate de l'''Activity'' (a ''activity_main.xml'').
   - 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''
+  - Afegir un //layout// per als elements del ''RecyclerView'' : ''text_row_layout.xml'' si voleu seguir la nomenclatura de la doc o ''contact_item.xml'' podria ser més adequat. Podeu crear-lo amb el botó dret sobre ''res -> layout'' i fer ''New -> Layout Resource File''.
-  - Enganxar el codi de la doc
+    * Canvieu la ''ConstraintLayout'' per una simple ''LinearLayout'' vertical.
-  - Afegir classes necessàries
+    * Afegiu ''TextViews'' pels elements que hagueu posat a la classe ''Contact'': nom i telèfon com a mínim.
-  - Afegir layout per als elements del RecyclerView : item_layout.xml
+  - Posar-hi el codi del ''CustomAdapter'' de la doc al ''ContactAdapter'' (canviant el nom de la class). Adapteu el què us calgui, en particular el nom dels camps a visualitzar: nom i telèfon (a l'exemple només hi ha 1 camp).
-  - Enganxar codi del FrameLayout amb únic TextView
+  - Adapteu el codi segons calgui.
-  - Canviar elements item layout en vermell:
-    - layout_marginleft i layout_marginright = "1dp"
-    - layout_height = "wrap_content"
-  - Canviar al CustomAdapter: R.layout.text_row_item per R.layout.item_layout
-  - afegir al ''onCreate()'' de la ''Activity'':<code java>
-String []dataset = { "hola q tral", "com va", "tercer element" };
-customAdapter = new CustomAdapter(dataset);
-RecyclerView recyclerView = findViewById(R.id.recyclerView);
-recyclerView.setAdapter(customAdapter);
-</code>
 Si no veieu elements de la llista al ''RecyclerView'', revisa:
-  - Que hagis posat un ''LayoutManager'', sense aquest element no funciona el ''RecyclerView''
+  - 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''.
+\\
+===== Exercicis =====
+<WRAP todo>
+**Mini Agenda**
+Implementa una agenda de contactes com s'ha descrit mes amunt.
+Afegeix un [[https://developer.android.com/develop/ui/views/components/floating-action-button|botó flotant o Floating Action Button (FAB) com es descriu a la doc]]. El botó ens obrirà un Dialog per afegir un nou contacte.
+</WRAP>
+<WRAP todo>
+**Galeria d'imatges**
+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ó.
+Visualitza les imatges enregistrades en una nova ''Activity'' que visualitzi a mode de "galeria d'imatges" pròpies de la nostra app.
+El ''dataset'' pot ser una llista d'elements ''File'' que podem llistar de l'espai d'emmagatzematge compartit de la nostra aplicació.
+</WRAP>
+\\
+===== Implementar onClick (amb funcions lambda) =====
+La implementació amb **funcions lambda** és més sofisticada, i té l'avantatge de tenir el codi més curt.
+Per implementar un onClick cal modificar:
+  * El ''CustomAdapter''
+  * La instanciació del ''CustomAdapter'' a la ''Activity'' (amb la funció lambda)
+A l'''Adapter'' afegim un nou atribut ''onItemClick'' al constructor:
+<file kotlin CustomAdapter.kt>
+class MyAdapter(
+    private val dataList: List<String>,
+    private val onItemClick: (Int) -> Unit
+) : RecyclerView.Adapter<MyViewHolder>() {
+    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
+        holder.itemView.setOnClickListener {
+            onItemClick(position)
+        }
+    }
+}
+</file>
+A la instanciació de l'''Adapter'' dins la ''Activity'' afegim la funció lambda que ens retorna la ''position'' del l'element clicat:
+<file kotlin MainActivity.kt>
+val adapter = MyAdapter(dataList) { position ->
+    // Manejar el clic aquí
+    Toast.makeText(this, "Clic: $position", Toast.LENGTH_SHORT).show()
+}
+</file>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina