bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • django_docker • django_frontend • sqlalchemy • django_mongo • android_recyclerview • opendata_pandas • java_lectura_escriptura • flask_basic • docker_nodejs • python_venv
android_listview

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_listview [2022/10/10 10:14]
enrique_mieza_sanchez 		android_listview [2025/10/27 15:25] (actual)
enric_mieza_sanchez
Línia 6: Línia 6:
   * ''ListView'' és un //widget// obsolet.   * ''ListView'' és un //widget// obsolet.
   * Es manté per //backward compatibility//.   * Es manté per //backward compatibility//.
-  * Substitut actual: ''RecycleView'' més complicat d'utilitzar+  * //Widget// recomanat actual: [[Android RecyclerView]] (però més complicat d'utilitzar).
  
 Referències: Referències:
-  * Article [[Android]] a aquesta wiki.+  * Article [[Android]] en aquesta wiki. 
 +  * [[Android RecyclerView]] en aquesta wiki.
   * [[https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView|Tutorial d'utilització de ListView d'Android]]   * [[https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView|Tutorial d'utilització de ListView d'Android]]
   * [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|Codi d'exemple més simple d'utilització d'una ListView]]   * [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|Codi d'exemple més simple d'utilització d'una ListView]]
  
-{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 }}+{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 android MVC java mobile}}
  
 ==== Perquè és complicada una ListView? ==== ==== Perquè és complicada una ListView? ====
Línia 43: Línia 44:
 \\ \\
  
-===== Exemple ArrayList simplificat =====+==== Codi taula de rècords ====
  
-  * Referència: [[https://gist.github.com/emieza/b918305010be198c037252f402821fef|codi d'exemple amb ArrayAdapter]]. +<WRAP info> 
-  * Exemple d'una taula de rècords amb nom del jugador i intents. +Fixeu-vos en què: 
-  * Utilitza un ''list_item'' personalitzat. +  * Hi ha els 3 elements: records (model) <-> adapter (ArrayAdapter) <-> listView 
-  * No creem una classe derivada de ''ArrayAdapter'': simplement instanciem un de genèric (línia 43) i sobreescrivim el mètode ''getView''.+  * L'''adapter'' es pot crear com una classe derivada, o bé un **objecte particularitzat**. En aquest cas és la 2a opció (objecte particularitzat "inline"). 
 +  * Dintre de ''adapter.getView'' es realitza el **reciclatge**: si ens ve un objecte ''null'', l'inicialitzem amb el ''LayoutInflater''. Si no és ''null'', el reciclem sobreescrivint i modificant les dades. 
 +</WRAP>
  
-==== Codi taula de rècords ==== +<tabbox Kotlin>
-<sxh java> +
-package com.example.listilla;+
  
-import android.os.Bundle; +<file kotlin MainActivity.kt> 
-import android.view.View; +class MainActivity : AppCompatActivity() { 
-import android.view.ViewGroup; +    // Model: ArrayList de Record (intents=puntuació, nom) 
-import android.widget.*;+    class Record(var intents: Int, var nom: String) 
 +    var records: ArrayList<Record> = ArrayList<Record>()
  
-import androidx.appcompat.app.AppCompatActivity;+    // ArrayAdapter serà l'intermediari amb la ListView 
 +    lateinit var adapter: ArrayAdapter<Record> 
 + 
 +    override fun onCreate(savedInstanceState: Bundle?) { 
 +        super.onCreate(savedInstanceState) 
 +        enableEdgeToEdge() 
 +        setContentView(R.layout.activity_main) 
 +        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets -> 
 +            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars()) 
 +            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom) 
 +            insets 
 +        } 
 + 
 +        // Afegim alguns exemples 
 +        records.add(Record(33, "Manolo")) 
 +        records.add(Record(12, "Pepe")) 
 +        records.add(Record(42, "Laura")) 
 + 
 +        // Inicialitzem l'ArrayAdapter amb el layout pertinent 
 +        adapter = object : ArrayAdapter<Record>(this,R.layout.list_item,records) 
 +        { 
 +             override fun getView(pos: Int, convertView: View?, container: ViewGroup): View { 
 +                // getView ens construeix el layout i hi "pinta" els valors de l'element en la posició pos 
 +                var convertView = convertView 
 +                if (convertView == null) { 
 +                    // inicialitzem l'element la View amb el seu layout 
 +                    convertView = getLayoutInflater().inflate(R.layout.list_item, container, false) 
 +                } 
 +                // pintem imatge 
 +                val bitmap = BitmapFactory.decodeStream( assets.open("ieti_logo.png") ) 
 +                convertView.findViewById<ImageView>(R.id.imageView).setImageBitmap( bitmap ) 
 +                // "Pintem" valors (quan es refresca) 
 +                convertView.findViewById<TextView>(R.id.nom).text = getItem(pos)?.nom 
 +                convertView.findViewById<TextView>(R.id.intents).text = getItem(pos)?.intents.toString() 
 +                return convertView 
 +            } 
 +        } 
 + 
 +        // busquem la ListView i li endollem l'ArrayAdapter 
 +        val lv = findViewById<ListView>(R.id.recordsView) 
 +        lv.setAdapter(adapter) 
 + 
 +    } 
 +} 
 +</file>
  
-import java.util.ArrayList;+<tabbox Java>
  
 +<file java MainActivity.java>
 public class MainActivity extends AppCompatActivity { public class MainActivity extends AppCompatActivity {
  
Línia 121: Línia 168:
             @Override             @Override
             public void onClick(View v) {             public void onClick(View v) {
-                for (int i=0;i<500;i++) {+                for (int i=0;i<3;i++) {
                     records.add(new Record(100, "Anonymous"));                     records.add(new Record(100, "Anonymous"));
                 }                 }
Línia 131: Línia 178:
 } }
  
-</sxh> +</file> 
 +</tabbox>
  
 ===== Exercicis ===== ===== Exercicis =====
Línia 145: Línia 192:
   * Crea un nou //layout// amb el nom ''list_item.xml'' que serà el //placeholder// per cada element de la llista. Pots crear-ho amb <code>File -> New -> Layout Resource File</code>   * Crea un nou //layout// amb el nom ''list_item.xml'' que serà el //placeholder// per cada element de la llista. Pots crear-ho amb <code>File -> New -> Layout Resource File</code>
     * Transforma el seu layout per defecte a LinearLayout.     * Transforma el seu layout per defecte a LinearLayout.
-    * Afegiex 2 ''TextView'' amb IDs ''nom'' i ''intents''. +    * Afegiex al layout 2 ''TextView'' amb IDs ''nom'' i ''intents'' 
-  * Afegeix un botó amb ID = ''button''. Servirà per afegir ítems al ''ListView'' i comprovar el //scroll// del ''ListView''.+  * Afegeix un botó al //layout// ''activity_main.xml'' amb ID = ''button''. Servirà per afegir ítems al ''ListView'' i comprovar el //scroll// del ''ListView''.
 </WRAP> </WRAP>
  
Línia 152: Línia 199:
 ==== Exercici 2 ==== ==== Exercici 2 ====
 <WRAP todo> <WRAP todo>
-Randomitza la generació d'entrades a la taula, generant nº d'intents variats i noms trets d'una llista d'uns 15 o 20 elements.+Afegeix un botó **Afegir rècord** que ens ofereixi un ''Dialog'' per entrar nom i rècord.
 </WRAP> </WRAP>
  
Línia 158: Línia 205:
 ==== Exercici 3 ==== ==== Exercici 3 ====
 <WRAP todo> <WRAP todo>
-Afegeix una imatge als elements de la llista (imatge fixa). Per fer-ho hauràs de: +Afegeix una imatge als elements de la llista (imatge fixa): 
-  * Afegir carpeta ''assets'' a ''res'' (a.k.a. ''R'' de //resources//). + 
-  * Afegir la imatge a la carpeta ''assets''. +{{ android:listilla1.png?200 }} 
-  * Modificar el ''list_item.xml'' i afegir-hi una ImageView amb la imatge anterior.+ 
 +Solució 1: 
 +  * Afegeix una ''ImageView'' amnb ID "imageView" al ''list_item.xml''. 
 +  * Arranja el //layout// perquè quedi com a la imatge anterior aproximadament. 
 +  * Afegeix la carpeta ''app/src/main/**assets**'' al projecte. 
 +  * Afegeix una foto arrossegant-la sobre la vista de projecte d'Android Studio. 
 +  * La podràs fer servir amb el codi de l'exemple:<code kotlin> 
 +val bitmap = BitmapFactory.decodeStream( assets.open("ieti_logo.png") ) 
 +convertView.findViewById<ImageView>(R.id.imageView).setImageBitmap( bitmap ) 
 +</code> 
 + 
 +Solució 2: 
 +  * Ves a la view de projecte de l'Android Studio. Visualitza la carepta <code>res -> drawable</code> 
 +  * Importar una imatge arrossegant-la dins de ''Drawable''. 
 +  * Modificar el ''list_item.xml'' i afegir-hi una ''ImageView'' amb la imatge anterior. 
 +  * Modifica el //layout// del ''list_item'' perquè et quedi com la imatge suggerida adjunta. 
 +    * Pista: pots combinar diversos //LinearLayout// horitzontals i verticals per aconseguir el resultat desitjat. 
 +  * Afegeix diverses imatges als //resources// i aleatoritza l'assignació d'imatges a cada element ''Record''. 
 </WRAP> </WRAP>
  
android_listview.1665396873.txt.gz · Darrera modificació: 2022/10/10 10:14 per enrique_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