bytes.cat

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
====== 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 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:
  * [[Android]]
  * [[Android ListView]]
  * [[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]].

{{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:

  - Insertar una RecyclerView al main tempate de l'''Activity'' (per exemple ''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''
  - Enganxar el codi de la doc
  - Afegir classes necessàries
  - Afegir layout per als elements del RecyclerView : item_layout.xml
  - Enganxar codi del FrameLayout amb únic TextView
  - 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:
  - 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ó.

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

Eines de la pàgina
