Diferencia entre revisiones de «Spinner»

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con «==Introdución== *Un '''Spinner''' é unha lista despregable de opcións na que o usuario pode escoller unha delas. Image:00_spinners_form.png *Imos comezar usando o...»)
 
 
(No se muestran 10 ediciones intermedias de 2 usuarios)
Línea 4: Línea 4:
  
  
−
*Imos comezar usando o Spinner apoiándonos primeiro nun botón de texto.
 
  
  
Línea 16: Línea 15:
  
 
==Caso práctico==
 
==Caso práctico==
−
*Crear o proxecto '''U2_12_Spinner'''
 
−
*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.
 
  
 +
* Partimos que xa temos creado o proxecto inicial como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base 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'''.
 +
 +
 +
<br />
 +
* 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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
 +
 +
 +
<br />
 +
*Nunha primeira versión imos crear unha aplicación na que se carguen nun spinner a lista de planetas definidos nun arquivo de recursos.
  
 
<gallery caption="Spinner Planetas" widths="350" heights="300px" perrow="2">
 
<gallery caption="Spinner Planetas" widths="350" heights="300px" perrow="2">
−
Image:Android_2013_U2_12_Spinner_11.jpg| Aplicación recén iniciada.
+
Image:PDM_spinner_7.jpg| Aplicación recén iniciada.
−
Image:Android_2013_U2_12_Spinner_12.jpg| Seleccionar Xúpiter (5º elemento da lista)
+
Image:PDM_spinner_8.jpg| Seleccionar Xúpiter (5º elemento da lista).
−
Image:Android_2013_U2_12_Spinner_13.jpg| Premer o botón
 
−
Image:Android_2013_U2_12_Spinner_14.jpg| Indícanos que seleccionamos Xúpiter e que está na posición 4. O índice do Spinner comeza en 0.
 
 
</gallery>
 
</gallery>
  
 +
 +
 +
<br />
 
===Arquivo de recursos: String-Array===
 
===Arquivo de recursos: String-Array===
 
<gallery caption="Crear array" widths="350" heights="300px" perrow="2">
 
<gallery caption="Crear array" widths="350" heights="300px" perrow="2">
−
Image:Android_2013_U2_12_Spinner_01.jpg| En '''/res/values''' crear un novo ficheiro XML de Android.  
+
Image:PDM_spinner_1.jpg| En '''/res/values''' crear un novo ficheiro XML de Android.  
−
Image:Android_2013_U2_12_Spinner_02.jpg| Indicar o nome, nesta caso: array_planetas e rematar.
+
Image:PDM_spinner_2.jpg| Indicar o nome, nesta caso: array_planetas_ud02_01_spinner e rematar.
−
Image:Android_2013_U2_12_Spinner_03.jpg| Engadir un elemento ...
+
Image:PDM_spinner_3.jpg| Definimos o array coa etiqueta <string-array> e indicamos o nome que terá.  
−
Image:Android_2013_U2_12_Spinner_04.jpg| ... tipo String_Array
+
Image:PDM_spinner_4.jpg| 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'''.
−
Image:Android_2013_U2_12_Spinner_05.jpg| Poñerlle un nome ao recurso: planetas
+
Image:PDM_spinner_5.jpg| Escolleremos a opción '''XML Tag'''.
−
Image:Android_2013_U2_12_Spinner_06.jpg| Engadir un ...
+
Image:PDM_spinner_6.jpg| Da lista escolleremos a etiqueta que queiramos.
−
Image:Android_2013_U2_12_Spinner_07.jpg| ... ítem
 
−
Image:Android_2013_U2_12_Spinner_08.jpg| Indicar un valor para ese ítem: Mercurio
 
−
Image:Android_2013_U2_12_Spinner_09.jpg| Ficheiro en formaro XML, onde xa se pode copiar/pegar/modificar e crear o resto dos items. 
 
−
Image:Android_2013_U2_12_Spinner_10.jpg| 
 
 
</gallery>
 
</gallery>
  
Línea 47: Línea 53:
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
 
<resources>
 
<resources>
−
    <string-array name="planetas">
+
    <string-array name="planetas_UD02_01_spinner">
 
         <item>Mercurio</item>
 
         <item>Mercurio</item>
 
         <item>Venus</item>
 
         <item>Venus</item>
Línea 62: Línea 68:
  
  
 +
<br />
 
===XML do Layout===
 
===XML do Layout===
  
 
*Observar como se crea un Spinner
 
*Observar como se crea un Spinner
−
<syntaxhighlight lang="xml" line highlight="7-11,17">
+
<syntaxhighlight lang="xml" line highlight="8-12,18">
 +
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
     xmlns:tools="http://schemas.android.com/tools"
 
     xmlns:tools="http://schemas.android.com/tools"
Línea 73: Línea 81:
  
 
     <Spinner
 
     <Spinner
−
         android:id="@+id/spin_planetas"
+
         android:id="@+id/spnPlanetas_UD02_01_spinners"
−
        android:layout_width="wrap_content"
 
−
        android:layout_height="wrap_content"
 
−
        android:entries="@array/planetas" />
 
−
 
 
−
    <Button
 
−
        android:id="@+id/btn_seleccion"
 
−
        android:layout_width="wrap_content"
 
−
        android:layout_height="wrap_content"
 
−
        android:onClick="onButtonClick"
 
−
        android:text="Preme cando selecciones" />
 
−
 
 
−
    <TextView
 
−
        android:id="@+id/lbl_resultado"
 
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
−
         android:text="Selecciona un planeta" />
+
         android:entries="@array/planetas_UD02_01_spinner" />
  
 
</LinearLayout>
 
</LinearLayout>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
*'''Liña 11''': é onde se vincula o Spinner co recurso tipo array: planetas.
+
*'''Liña 12''': é onde se vincula o Spinner co recurso tipo array: planetas.
−
*'''Liña 17''': chamamos a un método cando se faga Click.
 
  
  
  
−
===Código Java===
+
<br />
−
<syntaxhighlight lang="java" line highlight="25-32">
+
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
−
package com.example.u2_12_spinner;
+
<br />
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
 +
<br />
  
−
import android.app.Activity;
 
−
import android.os.Bundle;
 
−
import android.view.Menu;
 
−
import android.view.View;
 
−
import android.widget.Spinner;
 
−
import android.widget.TextView;
 
  
−
public class U2_12_Spinner extends Activity {
 
  
−
@Override
+
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).
−
protected void onCreate(Bundle savedInstanceState) {
 
−
super.onCreate(savedInstanceState);
 
−
setContentView(R.layout.activity_u2_12__spinner);
 
−
}
 
  
−
@Override
+
===Código Java===
−
public boolean onCreateOptionsMenu(Menu menu) {
+
<syntaxhighlight lang="java" line highlight="19">
−
// Inflate the menu; this adds items to the action bar if it is present.
+
package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.Spinners;
−
getMenuInflater().inflate(R.menu.u2_12__spinner, menu);
 
−
return true;
 
−
}
 
−
 
 
−
public void onButtonClick(View v) {
 
−
Spinner spinPlanetas = (Spinner) findViewById(R.id.spin_planetas);
 
−
TextView lblResultado = (TextView) findViewById(R.id.lbl_resultado);
 
−
 
 
−
lblResultado.setText("Seleccionaches "
 
−
+ spinPlanetas.getSelectedItem()
 
−
+ "\nque está na posición " + spinPlanetas.getSelectedItemId());
 
−
}
 
−
 
 
−
}
 
−
</syntaxhighlight>
 
−
*'''Liñas 26,27''': Definimos os obxectos nos que recollemos os controis declarados no Layout.
 
−
*'''Liñas 31,32''': 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.
 
−
 
 
−
<syntaxhighlight lang="java" line enclose="div" highlight="19-42" >
 
−
package com.example.u2_12_spinner;
 
  
 
import android.app.Activity;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.os.Bundle;
−
import android.view.Menu;
 
 
import android.view.View;
 
import android.view.View;
 
import android.widget.AdapterView;
 
import android.widget.AdapterView;
−
import android.widget.AdapterView.OnItemSelectedListener;
 
 
import android.widget.Spinner;
 
import android.widget.Spinner;
 
import android.widget.TextView;
 
import android.widget.TextView;
  
−
public class U2_12_Spinner extends Activity {
+
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
  
−
@Override
+
public class UD02_01_Spinners extends Activity {
−
protected void onCreate(Bundle savedInstanceState) {
 
−
super.onCreate(savedInstanceState);
 
−
setContentView(R.layout.activity_u2_12__spinner);
 
  
−
Spinner spinPlanetas = (Spinner) findViewById(R.id.spin_planetas);
 
  
−
spinPlanetas.setOnItemSelectedListener(new OnItemSelectedListener() {
 
  
−
@Override
+
    @Override
−
public void onItemSelected(AdapterView<?> parent, View view,
+
    protected void onCreate(Bundle savedInstanceState) {
−
int pos, long id) {
+
        super.onCreate(savedInstanceState);
−
// TODO Auto-generated method stub
+
        setContentView(R.layout.activity_ud02_01__spinners);
  
−
TextView lblResultado = (TextView) findViewById(R.id.lbl_resultado);
+
    }
 +
}
 +
</syntaxhighlight>
 +
:* Liñas 19: Cargamos o Layout onde se atopa o Spinner.
  
−
lblResultado.setText("Seleccionaches "
 
−
+ parent.getItemAtPosition(pos)
 
−
+ "\nque está na posición " + pos);
 
  
−
}
 
  
−
@Override
+
<br />
−
public void onNothingSelected(AdapterView<?> arg0) {
 
−
// TODO Auto-generated method stub
 
  
−
}
+
: Veremos máis adiante na sección do Spinner como xestionar o spinner (recuperar o elemento seleccionado, capturar o evento de seleccionar un elemento da lista,...)
−
});
 
−
}
 
  
−
@Override
+
* A captura de eventos empregando este control o veremos na [https://wiki.cifprodolfoucha.es/index.php?title=Spinner_con_Adaptadores sección de adaptadores do Spinner].
−
public boolean onCreateOptionsMenu(Menu menu) {
 
−
// Inflate the menu; this adds items to the action bar if it is present.
 
−
getMenuInflater().inflate(R.menu.u2_12__spinner, menu);
 
−
return true;
 
−
}
 
  
−
public void onButtonClick(View v) {
 
−
Spinner spinPlanetas = (Spinner) findViewById(R.id.spin_planetas);
 
−
TextView lblResultado = (TextView) findViewById(R.id.lbl_resultado);
 
  
−
lblResultado.setText("Seleccionaches " + spinPlanetas.getSelectedItem()
 
−
+ "\nque está na posición " + spinPlanetas.getSelectedItemId());
 
−
}
 
  
−
}
+
* Indicar que nas propiedades do Spinner temos a propiedade '''SpinnerMode''' que permite que cando se preme na lista, apareza unha caixa de diálogo cos elementos do spinner (opción '''dilaog'''').
 +
 
  
−
</syntaxhighlight>
 
−
*'''Liña 21''': Listener que se chama cando se selecciona un elemento do Spinner
 
−
*'''Liña 24''': 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
 
  
  

Revisión actual del 12:57 21 nov 2020

Introdución

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

00 spinners form.png



  • 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 na que se carguen nun spinner a lista de planetas definidos nun arquivo de recursos.
  • Spinner Planetas

  • Aplicación recén iniciada.

  • Seleccionar Xúpiter (5º elemento da lista).



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 </LinearLayout>
  • Liña 12: é onde se vincula o Spinner co recurso tipo array: planetas.



Enlace a la página principal de la UD2

Enlace a la página principal del curso



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

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 
16     @Override
17     protected void onCreate(Bundle savedInstanceState) {
18         super.onCreate(savedInstanceState);
19         setContentView(R.layout.activity_ud02_01__spinners);
20 
21     }
22 }
  • Liñas 19: Cargamos o Layout onde se atopa o Spinner.



Veremos máis adiante na sección do Spinner como xestionar o spinner (recuperar o elemento seleccionado, capturar o evento de seleccionar un elemento da lista,...)


  • Indicar que nas propiedades do Spinner temos a propiedade SpinnerMode que permite que cando se preme na lista, apareza unha caixa de diálogo cos elementos do spinner (opción dilaog').






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

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