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:14]
enric_mieza_sanchez [Implementar una RecyclerView] exercici 		android_recyclerview [2026/10/06 22:19] (actual)
enric_mieza_sanchez [Implementar una RecyclerView]
Línia 33: 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'' al codi de l'''Activity'', sense aquest element no funciona el ''RecyclerView'' (l'exemple de la doc oficial no el té).   - 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 els ''item_layout.xml'' i afegint-hi elements com ''ImageView'', etc.   - Millorant els ''item_layout.xml'' i afegint-hi elements com ''ImageView'', etc.
   - Prova amb la ''GridLayoutManager'' enlloc del ''LinearLayoutManager''.   - 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 =====+===== Exercicis ===== 
 <WRAP todo> <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ó. 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ó.
  
Línia 76: Línia 90:
 El ''dataset'' pot ser una llista d'elements ''File'' que podem llistar de l'espai d'emmagatzematge compartit de la nostra aplicació.  El ''dataset'' pot ser una llista d'elements ''File'' que podem llistar de l'espai d'emmagatzematge compartit de la nostra aplicació. 
 </WRAP> </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.1702941284.txt.gz · Darrera modificació: 2023/12/18 23:14 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