domingo, 3 de agosto de 2014
Uso práctico de Vistas y Layouts
En este apartado vamos a aprender a usar varios tipos de vistas y Layouts desde un punto de vista práctico. También empezaremos a escribir código que será ejecutado cuando ocurran ciertos eventos:
Ejercicio paso a paso: Un botón con gráficos personalizados
1. Crea un nuevo proyecto con los siguientes datos:
Application name: MasVistas
Package name: org.example.masvistas
Minimun Requiered SDK: API 7 Android 2.1 (Eclair)
Activity Name: MasVistasActivity
Layout Name: main.xml
2. Crea el fichero boton.xml en la carpeta res/drawable/. Para ello puedes utilizar el menúArchivo/Nuevo/Android XML File y pon en File: “botón” y selecciona en tipo Drawable. Reemplaza el código por el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/boton_pulsado"
android:state_pressed="true" />
<item android:drawable="@drawable/boton_con_foco"
android:state_focused="true" />
<item android:drawable="@drawable/boton_normal" />
</selector>
Este XML define un recurso único gráfico (drawable) que cambiará en función del estado del botón. El primer <item> define la imagen usada cuando se pulsa el botón, el segundo <item> define la imagen usada cuando el botón tiene el foco (cuando el botón está seleccionado con la rueda de desplazamiento o las teclas de dirección), el tercero la imagen en estado normal. Los gráficos y en concreto los drawables serán estudiados en el CAPÍTULO 1 y CAPÍTULO 4.
NOTA: El orden de los elementos <item> es importante. Cuando se va a dibujar se recorren los ítems en orden hasta que se cumpla una condición. Debido a que "boton_normal" es el último, sólo se aplica cuando las condicionesstate_pressedy state_focused no se cumplen.
3. Descarga las tres imágenes que aparecen a continuación de www.androidcurso.com. El nombre que ha de tener cada fichero aparece debajo:
4. Arrastra estas imágenes a la carpeta res/drawable/ del proyecto.
5. Abre el fichero res/layout/main.xml.
6. Elimina el TextView que encontrarás dentro del LinearLayout.
7. Selecciona el LinerLayout e introduce en el atributo Background el valor #FFFFFF.
8. Arrastra una vista de tipo Button dentro del LinearLayout.
9. Selecciona el atributo Background y pulsa en el botón selector de recurso (con puntos suspensivos). Selecciona Drawable/boton.
10. Modifica el atributo Text para que no tenga ningún valor.
11. Introduce en el atributo onClick el valor sePulsa. (Ojo; este atributo solo está disponible a partir de la versión 1.6)
12. Abre el fichero MasVistasActivity.java e introduce al final, antes de la última llave, el código:
public void sePulsa(View view){
Toast.makeText(this, "Pulsado", Toast.LENGTH_SHORT).show(); }
Pulsa Ctrl-Shift-O para que se añadan automáticamente los paquetes que faltan en la sección import.
El método anterior será ejecutado cuando se pulse el botón. Este método se limita a lanzar un Toast, es decir, un aviso que permanece un cierto tiempo sobre la pantalla y luego desaparece. Los tres parámetros son: 1-El contexto utilizado, coincide con la actividad. 2-El texto a mostrar y 3-El tiempo que permanecerá este texto. Los conceptos de actividad y contexto serán desarrollados en el siguiente capítulo.
13. Ejecuta el proyecto y verifica el resultado.
14. El código resultante para el fichero main.xml se muestra a continuación:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/boton"
android:onClick="sePulsa"/>
</LinearLayout>
Acceder y modificar las propiedades de las vistas por código
Ejercicio paso a paso: Acceder y modificar las propiedades de las vistas por código
1. Abre el Layout main.xml creado en el ejercicio anterior.
2. En la paleta de vistas, dentro de Text Fields, busca Number (Decimal) y arrástralo encima del botón rojo.
3. Modifica algunos atributos de esta vista: Hint = “Introduce un número”, id = “@+id/entrada”
4. En la paleta de vistas, dentro de Form Widgets, busca Button y arrástralo encima del botón rojo.
5. Modifica algunos atributos de esta vista: Haz que su ancho ocupe toda la pantalla, que su texto sea “0”.
6. En la paleta de vistas, dentro de Form Widgets, busca Large Text y arrástralo debajo del botón rojo.
7. Modifica algunos atributos de esta vista: TextColor = #0000FF, Text = “”, Hint = “Resultado”, id= “@+id/salida”.
8. Abre el fichero MasVistaActivity.java. Vamos a añadir dos nuevas propiedades a la clase. Para ello copia el siguiente código al principio de la clase (antes del método onCreate):
private EditText entrada;
private TextView salida;
9. Copia al final del método onCreate las siguientes dos líneas:
entrada = (EditText) findViewById(R.id.entrada);
salida = (TextView) findViewById(R.id.salida);
10. Como se explicó al principio del capítulo, las diferentes vistas definidas en main.xml, son creadas como objetos Java cuando se ejecuta setContentView(R.layout.main). Si queremos manipular algunos de estos objetos hemos de declararlos (paso 8) y asignarles el objeto correspondiente. Para ello, hay que introducir el atributo id en xml y utilizar el métodofindViewById(R.id.valor_en_atributo_id). Este método devuelve un objeto de la claseView, no obstante los objetos declarados (entrada y salida) no son exactamente de esta clase por lo que Java no permite una asignación directa. En estos casos hemos de utilizar una conversión de tipo (type cast) para poder hacer la asignación. Para más información al respecto leer el apartadoPolimorfismo del tutorial de Java Esencial.
11. Introduce en el atributo onClick del botón con id boton0 el valor “sePulsa0”.
12. Añade el siguiente método al final de la clase MasVistasActivity.
public void sePulsa0(View view){
entrada.setText(entrada.getText()+"0");
}
13. Añade al botón con texto “0” el atributo tag = “0”.
14. Modifica el método sePulsa0 de la siguiente forma:
public void sePulsa0(View view){
entrada.setText(entrada.getText()+(String)view.getTag());
}
El resultado obtenido es equivalente al anterior. En algunos casos será interesante utilizar un mismo método como escuchador de eventos de varias vistas. Podrás averiguar la vista que causó el evento, dado que esta es pasada como parámetro del método. En el ejemplo sabemos que en el atributo tagguardamos el carácter a insertar. El atributo tag puede ser usado libremente por el programador para almacenar un objeto de la clase Object (mas info ). En nuestro caso hemos almacenado un objetoString, por lo que necesitamos una conversión de tipo. Otro ejemplo de Polimorfismo. NOTA: Utiliza esta forma de trabajar en la práctica para no tener que crear un método onClick para cada botón de la calculadora.
15. Modifica el código de sePulsa con el siguiente código:
public void sePulsa(View view){
salida.setText(String.valueOf(
Float.parseFloat(entrada.getText().toString())*2.0));
}
En este código el valor de entrada es convertido en Float, multiplicado por dos y convertido en String para ser asignado a salida.
16. Ejecuta el proyecto y verifica el resultado.
