bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • android_comunicacions • vagrant
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 [2025/12/31 17:48]
enric_mieza_sanchez [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:
Línia 63: Línia 68:
   - 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ó.
  
android_recyclerview.1767203282.txt.gz · Darrera modificació: 2025/12/31 17:48 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