Uso prctico de Vistas y Layouts

En este apartado vamos a aprender a usar varios tipos de vistas y Layouts desde un punto de vista
prctico. Tambin empezaremos a escribir cdigo que ser ejecutado cuando ocurran ciertos
eventos:
Ejercicio paso a paso: Un botn con grficos 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
menArchivo/Nuevo/Android XML File y pon en File: botn y selecciona en tipo Drawable.
Reemplaza el cdigo 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 grfico (drawable) que cambiar en funcin del estado del
botn. El primer <item> define la imagen usada cuando se pulsa el botn, el segundo <item>
define la imagen usada cuando el botn tiene el foco (cuando el botn est seleccionado con la
rueda de desplazamiento o las teclas de direccin), el tercero la imagen en estado normal. Los
grficos y en concreto los drawables sern estudiados en el CAPTULO 1 y CAPTULO 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 condicin. Debido a que "boton_normal" es el ltimo,
slo se aplica cuando las condiciones state_pressed y state_focused no se cumplen.
3. Descarga las tres imgenes que aparecen a continuacin de www.androidcurso.com. El
nombre que ha de tener cada fichero aparece debajo:


boton_normal.jpg boton_con_foco.jpg boton_pulsado.jpg
4. Arrastra estas imgenes a la carpeta res/drawable/ del proyecto.
5. Abre el fichero res/layout/main.xml.
6. Elimina el TextView que encontrars 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 botn selector de recurso (con puntos
suspensivos). Selecciona Drawable/boton.
10. Modifica el atributo Text para que no tenga ningn valor.
11. Introduce en el atributo onClick el valor sePulsa. (Ojo; este atributo solo est disponible a
partir de la versin 1.6)
12. Abre el fichero MasVistasActivity.java e introduce al final, antes de la ltima llave, el cdigo:

public void sePulsa(View view){
Toast.makeText(this, "Pulsado", Toast.LENGTH_SHORT).show();
}

Pulsa Ctrl-Shift-O para que se aadan automticamente los paquetes que faltan en la
seccin import.
El mtodo anterior ser ejecutado cuando se pulse el botn. Este mtodo se limita a lanzar
un Toast, es decir, un aviso que permanece un cierto tiempo sobre la pantalla y luego
desaparece. Los tres parmetros 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 sern desarrollados en el siguiente captulo.
13. Ejecuta el proyecto y verifica el resultado.
14. El cdigo resultante para el fichero main.xml se muestra a continuacin:
<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 cdigo

Ejercicio paso a paso: Acceder y modificar las propiedades de las vistas por cdigo

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 arrstralo encima del
botn rojo.
3. Modifica algunos atributos de esta vista: Hint = Introduce un nmero, id = @+id/entrada
4. En la paleta de vistas, dentro de Form Widgets, busca Button y arrstralo encima del botn
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 arrstralo debajo del botn
rojo.
7. Modifica algunos atributos de esta vista: TextColor = #0000FF, Text = , Hint =
Resultado, id= @+id/salida.
8. Abre el fichero MasVistaActivity.java. Vamos a aadir dos nuevas propiedades a la clase. Para
ello copia el siguiente cdigo al principio de la clase (antes del mtodo onCreate):
private EditText entrada;
private TextView salida;

9. Copia al final del mtodo onCreate las siguientes dos lneas:
entrada = (EditText) findViewById(R.id.entrada);
salida = (TextView) findViewById(R.id.salida);
10. Como se explic al principio del captulo, 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
mtodofindViewById(R.id.valor_en_atributo_id). Este mtodo 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 asignacin directa. En estos casos hemos de utilizar una conversin de tipo
(type cast) para poder hacer la asignacin. Para ms informacin al respecto leer el
apartadoPolimorfismo del tutorial de Java Esencial.

11. Introduce en el atributo onClick del botn con id boton0 el valor sePulsa0.
12. Aade el siguiente mtodo al final de la clase MasVistasActivity.
public void sePulsa0(View view){
entrada.setText(entrada.getText()+"0");
}
13. Aade al botn con texto 0 el atributo tag = 0.
14. Modifica el mtodo 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
mtodo como escuchador de eventos de varias vistas. Podrs averiguar la vista que caus el evento,
dado que esta es pasada como parmetro del mtodo. En el ejemplo sabemos que en el
atributo tagguardamos el carcter 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 conversin de tipo. Otro ejemplo
de Polimorfismo. NOTA: Utiliza esta forma de trabajar en la prctica para no tener que crear un
mtodo onClick para cada botn de la calculadora.
15. Modifica el cdigo de sePulsa con el siguiente cdigo:

public void sePulsa(View view){
salida.setText(String.valueOf(
Float.parseFloat(entrada.getText().toString())*2.0));
}

En este cdigo 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.