sábado, 12 de abril de 2014

Android: utilizando un Spinner!

¡Hola de nuevo! En este otro pequeño tutorial veremos cómo podemos colocar en nuestras apps el siguiente elemento que nos proporciona android: el Spinner !!


Este elemento nos permitirá seleccionar una serie de opciones a través de un menú desplegable. 

Para mi gusto es bastante útil a la hora de crear cualquier nuevo elemento (ya sea una nota) o para obtener una visión más concreta de algo (por ejemplo, el Calendario de Google nos permite ver por día, semana y mes).



Primero tenemos que preparar nuestra activity:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Este spinner nos mostrará una lista de pizzas :D" />

    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="38dp" />

    <TextView
        android:id="@+id/textView_pizza"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView_pizza"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="18dp"
        android:text="Pizza Seleccionada:"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>


Después tenemos que añadir al fichero situado en res->values->strings.xml el siguiente elemento, que será de donde nuestro spinner coge todas sus opciones desplegables:

<string-array name="array_pizzas">
        <item>Barbacoa</item>
        <item>4 Quesos</item>
        <item>Margarita</item>
        <item>Bolognesa</item>
        <item>Hawaiana</item>
        <item>Romana</item>
        <item>Carbonara</item>
        <item>Atún y Bacon</item>
</string-array>


Y por último tendremos que escribir el siguiente trozo de código en nuestro ".java" donde vayamos a utilizar el spinner (generalmente, el código se coloca dentro del OnCreate):

spin_pizza = (Spinner) this.findViewById(R.id.spinner1);

// creamos un adaptador para nuestro spinner
ArrayAdapter<CharSequence> spinAdapter = ArrayAdapter.createFromResource(this,
R.array.array_pizzas, android.R.layout.simple_spinner_item);

// le indicamos como debe abrirse
spinAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

// le añadimos el adaptador
spin_pizza.setAdapter(spinAdapter);

// le añadimos un escuchador para que haga la acción que deseemos cuando se 
// seleccione algún elemento del spinner
spin_pizza.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() 
{
// aquí es donde trabajaremos principalmente
@Override
public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) 
{
// con "parent.getItemAtPosition(pos).toString()" obtendremos el string 
// que hayamos seleccionado del spinner
pizza_selected.setText( parent.getItemAtPosition(pos).toString() );
}

// este método es para cuando no hay nada seleccionado
@Override
public void onNothingSelected(AdapterView<?> arg0) {

}
});


Y eso es todo!! ya podemos ejecutar nuestro proyecto y ver nuestro spinner.
Como siempre, aquí tenéis la página de Android Developers con más información acerca del spinner.

Aquí os dejo el código del proyecto.

No hay comentarios:

Publicar un comentario