Spinner

De MediaWiki
Ir a la navegación Ir a la búsqueda

Introdución

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

00 spinners form.png


  • 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:


Caso práctico

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).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Spinner&oldid=7178»