bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • python_venv • android_listview • django_frontend • mysql_aes • git • unity_ar • jocs_libgdx • opendata_pandas • hibernate • django_docker
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 [2024/10/29 14:55]
enric_mieza_sanchez 		android_listview [2025/10/27 15:25] (actual)
enric_mieza_sanchez
Línia 44: 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>
  
-**Segueix abaix per veure el codi**+<tabbox Kotlin>
  
-==== Connexió (simplificada) Model - Adapter - View ====+<file kotlin MainActivity.kt> 
 +class MainActivity : AppCompatActivity() { 
 +    // Model: ArrayList de Record (intents=puntuació, nom) 
 +    class Record(var intents: Int, var nom: String) 
 +    var records: ArrayList<Record> = ArrayList<Record>()
  
-<file java> +    // ArrayAdapter serà l'intermediari amb la ListView 
-public class MainActivity extends AppCompatActivity { +    lateinit var adapter: ArrayAdapter<Record>
-    ArrayList<Record> records;    // Model Taula de records (ArrayList) +
-    ArrayAdapter<Record> adapter; // l'Adapter serà l'intermediari amb la ListView+
  
-    @Override +    override fun onCreate(savedInstanceState: Bundle?) { 
-    protected void onCreate(Bundle savedInstanceState) { +        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 
 +        }
  
-        // Inicialitzem l'Adapter i el connectem amb el Model (records) +        // Afegim alguns exemples 
-        adapter = new ArrayAdapter<Record>( this, R.layout.list_item, records )+        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 +             override fun getView(pos: Int, convertView: View?, container: ViewGroup): View { 
-            public View getView(int pos, View convertView, ViewGroup container) +                // getView ens construeix el layout i hi "pinta" els valors de l'element en la posició pos 
-            { +                var convertView = convertView 
-                // "inflem" el Layout, assignem dades de l'element a la posició "pos"+                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)
  
-        // connectem Adapter amb la View 
-        ListView lv = (ListView) findViewById(R.id.recordsView); 
-        lv.setAdapter(adapter); 
-         
-        //... 
     }     }
 } }
- 
 </file> </file>
  
 +<tabbox Java>
  
-==== Codi complert taula de rècords ==== +<file java MainActivity.java>
-<file java> +
-package com.example.listilla; +
- +
-import android.os.Bundle; +
-import android.view.View; +
-import android.view.ViewGroup; +
-import android.widget.*; +
- +
-import androidx.appcompat.app.AppCompatActivity; +
- +
-import java.util.ArrayList; +
 public class MainActivity extends AppCompatActivity { public class MainActivity extends AppCompatActivity {
  
Línia 168: Línia 179:
  
 </file> </file>
 +</tabbox>
  
 ===== Exercicis ===== ===== Exercicis =====
Línia 181: 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ó al //layout// ''activity_main.xml'' 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 188: 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 i cognoms mesclant-los de dues llistes 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 194: 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): 
 + 
 +{{ android:listilla1.png?200 }} 
 + 
 +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>   * 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''.   * Importar una imatge arrossegant-la dins de ''Drawable''.
Línia 202: Línia 227:
   * Afegeix diverses imatges als //resources// i aleatoritza l'assignació d'imatges a cada element ''Record''.   * Afegeix diverses imatges als //resources// i aleatoritza l'assignació d'imatges a cada element ''Record''.
  
-{{ android:listilla1.png?200 }} 
 </WRAP> </WRAP>
  
android_listview.1730213754.txt.gz · Darrera modificació: 2024/10/29 14:55 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