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ó

--- android_spinner [2022/10/17 15:09]
enrique_mieza_sanchez [Android Spinner o Dropdown]
+++ android_spinner [2022/10/17 17:03] (actual)
enrique_mieza_sanchez [Creació d'un spinner de forma gràfica]
@@ Línia 3: / Línia 3: @@
 Un //spinner// d'Android és un //widget// (element gràfic) que habitualment coneixem en altres entorns com a //dropdown menu//, selector o menú desplegable.
-La programació en Android és, però, més complicada que en altres entorns degut a la gestió de la RAM en llistes molt llargues amb recursos costosos com les imatges, explicat a l'article [[Andoid ListView]].
+La programació en Android és, però, més complicada que en altres entorns degut a la gestió de la RAM en llistes molt llargues amb recursos costosos com les imatges, explicat a l'article [[Android ListView]].
 {{ https://developer.android.com/static/images/ui/spinner.png?250 }}
@@ Línia 28: / Línia 28: @@
 Però nosaltres volem un //dropdown// senzill, i per tant ho farem més simple, assignant la llista de valors al control i llestos. Hi ha molts casos que cal això i no necessita la complexitat de l'Adapter.
-Som-hi:
+<WRAP todo>
-  - Crear el ''Spinner'' dins el nostre //layout// de la nostra ''Activity'' (per exemple, arxiu ''activity_main.xml''). Ho podem fer de forma gràfica.
+  - Crea una nova app amb ''EmptyActivity''.
+  - Crea el ''Spinner'' dins el //layout// de la ''MainActivity'' (per exemple, arxiu ''activity_main.xml''). Ho podem fer de forma gràfica.
   - Crear la [[https://developer.android.com/guide/topics/ui/controls/spinner#Populate|llista de planetes que diu l'article del Spinner]].
   - Assignem el valor de l'array de planetes al ''Spinner''.
   - En el codi, poder recollir el valor del Spinner amb <code>String text = mySpinner.getSelectedItem().toString();</code>
+  - Posa un botó que quan el premis reculli el valor del ''Spinner'' i el mostri en un ''Toast''.
+</WRAP>
 \\
@@ Línia 64: / Línia 67: @@
 ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
     R.array.nombres, android.R.layout.simple_spinner_item);
-adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spinner.setAdapter(adapter);
 </file>
@@ Línia 70: / Línia 72: @@
 \\
-==== A partir de dades pròpies ====
+==== A partir de dades dinàmiques ====
-Per crear un rang de dades del 0 al 5 com hem fet abans no cal definir el array. Es pot generar el spinner així:
+Per crear un rang de dades del 0 al 5 com hem fet abans no cal definir el array a l'arxiu XML, que seria estàtic perquè no es podria modificar en temps d'execució. En canvi, es pot generar el ''Spinner'' així:
 <file java>
@@ Línia 78: / Línia 80: @@
 ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(this,
     android.R.layout.simple_spinner_item, nombres);
-adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 spinner.setAdapter(adapter);
 </file>
+\\
+===== Connectant les callback dels Spinner =====
+Per poder respondre a les accions de l'usuari al canviar els valors dels ''Spinner'' necessitarem implementar les //callback// pertinents. L'objecte que sol fer la feina és un ''Listener''.
+Tindrem 2 estratègies bàsiques per a implementar les //callback// d'un ''Spinner'' (o de qualsevol ''View'' amb acció. Convé conèixer les dues, encara que recomanem la segona.
+==== Opció 1: objecte OnItemSelectedListener ====
+Crear un objecte tipus ''OnItemSelectedListener'' per a cada Spinner, similarment a com solem fer amb els ''OnClickListener'' dels ''Button'':
+<code java>
+Spinner spinner = new Spinner(this);
+spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
+    @Override
+    public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
+        // la posició del spinner és 'i', però també es pot buscar amb
+        String string = spinner.getSelectedItem().toString();
+    }
+    @Override
+    public void onNothingSelected(AdapterView<?> adapterView) {
+    }
+});
+</code>
+==== Opció 2: heretar OnItemSelechtedListener a la MainActivity ====
+Podem heretar la interfície ''OnItemSelectedListener'' a la pròpia ''MainActivity'' i implementant les funcions necessàries com a mètodes d'aquesta, tal i com suggereix la [[https://developer.android.com/develop/ui/views/components/spinner#SelectListener|doc oficial del Spinner]].
+<code java>
+public class SpinnerActivity extends Activity implements OnItemSelectedListener {
+    ...
+    protected void onCreate(Bundle savedInstanceState) {
+        ...
+        Spinner spinner = new Spinner(this);
+        spinner.setOnItemSelectedListener(this);
+        ...
+    }
+    public void onItemSelected(AdapterView<?> parent, View view,
+            int pos, long id) {
+        // An item was selected. You can retrieve the selected item using
+        // parent.getItemAtPosition(pos)
+    }
+    public void onNothingSelected(AdapterView<?> parent) {
+        // Another interface callback
+    }
+}
+</code>
+Ens resultarà un codi més llegible si fem servir la opció 2, al menys en aquest cas.
+Segueix la [[https://developer.android.com/develop/ui/views/components/spinner#SelectListener|doc oficial del Spinner]] on l'exemple segueix aquesta estratègia implementant les //callback//. Tant en un cas com a l'altra cal implementar les dues funcions:
+  * ''onItemSelected'': és on activarem la lògica del nostre joc.
+  * ''onNothingSelected'': és obligatoria implementar-la, però segurament no hi posarem res de codi.
+\\
+===== Exercicis =====
+<WRAP todo>
+Crea una app amb 2 ''Spinner'':
+  * Un creat de forma estàtica amb els noms dels planetes, tal i com planteja la doc oficial de ''Spinner''.
+  * Un creat programàticament amb els números descrits anteriorment.
+Implementa les //callback// necessàries fent que quan es canvii el valor d'un ''Spinner'' ens mostri un ''Log'' indicant-nos el text "Spinner modificat".
+</WRAP>
+\\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina