bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • android_recyclerview • vagrant • docker_swarm_stacks
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 23:01]
enric_mieza_sanchez [Implementar una RecyclerView] 		android_recyclerview [2026/10/06 22:19] (actual)
enric_mieza_sanchez [Implementar una RecyclerView]
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]].
  
 {{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 #DamMp08Uf2 #DamMp08Uf02 Android mobile java MVC }} {{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 #DamMp08Uf2 #DamMp08Uf02 Android mobile java MVC }}
Línia 32: Línia 33:
 ===== Implementar una RecyclerView ===== ===== 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.   - 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 a ''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: 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.   - 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ó: Un cop en funcionament, pots sofisticar la visualització:
-  - Millorant+  - 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>
  
android_recyclerview.1702940519.txt.gz · Darrera modificació: 2023/12/18 23:01 per enric_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