Spinner

Introdución

• Un Spinner é unha lista despregable de opcións na que o usuario pode escoller unha delas.

• Imos comezar usando o Spinner apoiándonos primeiro nun botón de texto.

• Unha forma estática de definir os datos que van encher o Spinner é usando un arquivo de recursos de tipo String-array:

• Referencias
  • O control: http://developer.android.com/reference/android/widget/Spinner.html
  • Introdución: http://developer.android.com/design/building-blocks/spinners.html
  • Para programadores: http://developer.android.com/guide/topics/ui/controls/spinner.html

Caso práctico

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.

Dentro do paquete UI, crearemos un novo paquete de nome: Spinners.

• Dentro do paquete Spinners crear unha nova 'Empty Activity' de nome: UD02_01_Spinners de tipo Launcher e sen compatibilidade.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

• Nunha primeira versión imos crear unha aplicación que permita seleccionar un planeta nun Spiner e logo premendo un botón nos indicará o ítem seleccionado e a súa posición.

• Spinner Planetas
• 

  Aplicación recén iniciada.

• 

  Seleccionar Xúpiter (5º elemento da lista)e prememos o botón

• 

  Indícanos que seleccionamos Xúpiter e que está na posición 4. O índice do Spinner comeza en 0.

Arquivo de recursos: String-Array

• Crear array
• 

  En /res/values crear un novo ficheiro XML de Android.

• 

  Indicar o nome, nesta caso: array_planetas_ud02_01_spinner e rematar.

• 

  Definimos o array coa etiqueta <string-array> e indicamos o nome que terá.

• 

  Podemos ver que tipo de etiquetas podemos ter nun arquivo de tipo 'values' premendo o botón dereito do rato e escollendo a o opción Generate.

• 

  Escolleremos a opción XML Tag.

• 

  Da lista escolleremos a etiqueta que queiramos.

• Ficheiro de recursos: array_planetas.xml.
• Polo nome do string_array é por onde se vai acceder ao array.

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3     <string-array name="planetas_UD02_01_spinner">
 4         <item>Mercurio</item>
 5         <item>Venus</item>
 6         <item>Terra</item>
 7         <item>Marte</item>
 8         <item>Xúpiter</item>
 9         <item>Saturno</item>
10         <item>Urano</item>
11         <item>Neptuno</item>
12     </string-array>
13 </resources>

XML do Layout

• Observar como se crea un Spinner

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
 7 
 8     <Spinner
 9         android:id="@+id/spnPlanetas_UD02_01_spinners"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:entries="@array/planetas_UD02_01_spinner" />
13 
14     <Button
15         android:id="@+id/btn_seleccion"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:onClick="onButtonClick"
19         android:text="Preme cando selecciones" />
20 
21     <TextView
22         android:id="@+id/txtResultado_UD02_01_spinners"
23         android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:text="Selecciona un planeta" />
26 
27 </LinearLayout>

• Liña 12: é onde se vincula o Spinner co recurso tipo array: planetas.
• Liña 18: chamamos a un método cando se faga Click.

Código Java

 1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.Spinners;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.widget.AdapterView;
 7 import android.widget.Spinner;
 8 import android.widget.TextView;
 9 
10 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
11 
12 public class UD02_01_Spinners extends Activity {
13 
14 
15     public void onButtonClick(View v) {
16         Spinner spinPlanetas = (Spinner) findViewById(R.id.spnPlanetas_UD02_01_spinners);
17         TextView txtResultado = (TextView) findViewById(R.id.txtResultado_UD02_01_spinners);
18 
19         txtResultado.setText("Seleccionaches "
20                 + spinPlanetas.getSelectedItem()
21                 + "\nque está na posición " + spinPlanetas.getSelectedItemId());
22     }
23 
24 
25     @Override
26     protected void onCreate(Bundle savedInstanceState) {
27         super.onCreate(savedInstanceState);
28         setContentView(R.layout.activity_ud02_01__spinners);
29 
30     }
31 }

• Liñas 16,17: Definimos os obxectos nos que recollemos os controis declarados no Layout.
• Liñas 20,21: Seleccionamos o elemento da lista e a súa posición.

Capturar o evento cando se selecciona un ítem

• Nesta segunda versión vaise deixar que o botón siga realizando a súa función, pero agora cando seleccionemos un ítem que se capture o evento e que na etiqueta indicar cal é o planeta seleccionado e a súa posición.

 1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.Spinners;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.widget.AdapterView;
 7 import android.widget.Spinner;
 8 import android.widget.TextView;
 9 
10 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
11 
12 public class UD02_01_Spinners extends Activity {
13 
14 
15     public void onButtonClick(View v) {
16         Spinner spinPlanetas = (Spinner) findViewById(R.id.spnPlanetas_UD02_01_spinners);
17         TextView txtResultado = (TextView) findViewById(R.id.txtResultado_UD02_01_spinners);
18 
19         txtResultado.setText("Seleccionaches "
20                 + spinPlanetas.getSelectedItem()
21                 + "\nque está na posición " + spinPlanetas.getSelectedItemId());
22     }
23 
24     /**
25      * Neste método asociamos os listener aos view onde queramos xestionar eventos
26      */
27     private void xestionarEventos(){
28 
29         Spinner spinPlanetas = (Spinner) findViewById(R.id.spnPlanetas_UD02_01_spinners);
30         spinPlanetas.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
31 
32             @Override
33             public void onItemSelected(AdapterView<?> parent, View view,
34                                        int pos, long id) {
35                 // TODO Auto-generated method stub
36 
37                 TextView txtResultado = (TextView) findViewById(R.id.txtResultado_UD02_01_spinners);
38 
39                 txtResultado.setText("Seleccionaches "
40                         + parent.getItemAtPosition(pos)
41                         + "\nque está na posición " + pos);
42 
43             }
44 
45             @Override
46             public void onNothingSelected(AdapterView<?> arg0) {
47                 // TODO Auto-generated method stub
48 
49             }
50         });
51     }
52 
53     @Override
54     protected void onCreate(Bundle savedInstanceState) {
55         super.onCreate(savedInstanceState);
56         setContentView(R.layout.activity_ud02_01__spinners);
57 
58         xestionarEventos();
59     }
60 }

• Liña 27: Listener que se chama cando se selecciona un elemento do Spinner
• Liña 33: O métod onItemSelected(AdapterView<?> parent, View view, int pos, long id) é chamado cando se selecciona un item distinto do xa seleccionado.
• Parámetros:
  • parent: O elemento (AdapterView) onde se fixo a selección.
  • view: A vista que foi selecionada dentro do AdapterView
  • position: A posición da vista dentro do Adaptador.
  • id: Cada ítem pode ter varias filas (neste caso só ten unha) este campo indicaría a fila dentro do ítem

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).