Spinner

De MediaWiki
Saltar a: navegación, buscar

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.




Arquivo de recursos: String-Array


  • 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 30: 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).