bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


android_spinner

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_spinner [2022/10/10 14:58]
enrique_mieza_sanchez [Creació d'un Spinner de forma programàtica]
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. 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. +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]]
-  * Llista estàtica + 
-  * Llista dinàmica+{{ https://developer.android.com/static/images/ui/spinner.png?250 }} 
 + 
  
 {{tag> #FpInfor #Dam #DamMp08 #DamMp08Uf1 android spinner dropdown menu desplegable}} {{tag> #FpInfor #Dam #DamMp08 #DamMp08Uf1 android spinner dropdown menu desplegable}}
Línia 26: 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. 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]].   - 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''.   - 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>
  
 \\ \\
  
 ===== Creació d'un Spinner de forma programàtica ===== ===== Creació d'un Spinner de forma programàtica =====
 +
 +==== A partir de dades d'un resource ====
  
 Primer caldrà crear un **array d'elements a l'arxiu ''strings.xml''** (gràficament al Android Studio). Primer caldrà crear un **array d'elements a l'arxiu ''strings.xml''** (gràficament al Android Studio).
Línia 60: Línia 67:
 ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
     R.array.nombres, android.R.layout.simple_spinner_item);     R.array.nombres, android.R.layout.simple_spinner_item);
-adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); 
 spinner.setAdapter(adapter); spinner.setAdapter(adapter);
 </file> </file>
Línia 66: Línia 72:
 \\ \\
  
 +==== 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 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>
 +Spinner spinner = new Spinner(this);
 +CharSequence[] nombres = {"0","1","2","3","4","5"};
 +ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(this,
 +    android.R.layout.simple_spinner_item, nombres);
 +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>
 +
 +\\
  
android_spinner.1665413886.txt.gz · Darrera modificació: 2022/10/10 14:58 per enrique_mieza_sanchez