Jesus Tomás Gironés - El gran libro de Android

Dentro del RelativeLayout solo tenemos un elemento de tipo TextView, que dispone de tres atributos. Los dos primeros definen la anchura y altura (se ajustarán al texto contenido. El último indica el texto a mostrar. No se ha indicado un texto en concreto, sino una referencia, "@string/hello_world". Esta referencia ha de estar definida en el fichero res/values/strings.xml. Si abres este fichero, verás el siguiente contenido:

Esta es la práctica recomendada en Android para la inserción de textos en tu aplicación, dado que facilita su localización a la hora de realizar la traducción a otros idiomas. Es decir, utilizaremos los ficheros layout para introducir el diseño de las interfaces y el fichero strings para introducir los textos utilizados en los distintos idiomas.

Ejercicio: Creación de la interfaz de usuario con XML

1.Para utilizar el diseño en XML regresa al fichero MainActivity.java y deshaz los cambios que hicimos antes (elimina las tres últimas líneas y quita el comentario).

2.Ejecuta la aplicación y verifica el resultado. Ha de ser muy similar al anterior.

3.Modifica el valor de hello_world en el fichero res/values/strings.xml.

4.Vuelve a ejecutar la aplicación y visualiza el resultado.

Analicemos ahora la línea en la que acabas de quitar el comentario:

setContentView(R.layout.activity_main);

Aquí, R.layout.main corresponde a un objeto View que se creará en tiempo de ejecución a partir del recurso activity_main.xml. Trabajar de esta forma, en comparación con el diseño basado en código, no quita velocidad y requiere menos memoria. El plug-in de Eclipse crea automáticamente este identificador en la clase R del proyecto a partir de los elementos de la carpeta res. La definición de la clase R puede ser similar a:

NOTA: este fichero se genera automáticamente. Nunca debes editarlo.

Has de tener claro que los identificadores de la clase R son meros números que informan al gestor de recursos sobre qué datos ha de cargar. Por lo tanto, no se trata de verdaderos objetos; estos se crearán en tiempo de ejecución solo cuando sea necesario usarlos.

Ejercicio: El fichero R.java

1.Abre el fichero llamado gen/com.example.holamunco/R.java de tu aplicación.

2.Compáralo con el fichero mostrado previamente. ¿Qué diferencias encuentras? (RESPUESTA: los valores numéricos en hexadecimal).

3.Abre el fichero MainActivity.java y reemplaza R.layout.activity_main por el valor numérico al que corresponde en R.java.

4.Ejecuta de nuevo el proyecto. ¿Funciona? ¿Crees que sería adecuado dejar este valor numérico?

5.Aunque haya funcionado, este valor puede cambiar en un futuro. Por lo tanto, para evitar problemas futuros vuelve a reemplazarlo por R.layout.activity_main.

Preguntas de repaso:

Diseño de la interfaz de usuarioen XML y en código

Preguntas de repaso: El fichero R.java

Veamos ahora como editar los layouts o ficheros de diseño en XML. En el explorador de paquetes abre el fichero res/layout/activity_main.xml. Verás que en la parte inferior de la ventana central aparecen dos lengüetas: Graphical Layout y activity_main.xml. El plug-in de Android te permite dos tipos de diseño: editar directamente el código XML (lengüeta activity_main.xml) o realizar este diseño de forma visual (lengüeta Graphical Layout). Veamos cómo se realizaría el diseño visual:

En el marco derecho se visualiza una lista con todos los elementos del layout. Este layout tiene solo dos vistas: un RelativeLayout que contiene un TextView. En el marco central aparece una representación de cómo se verá el resultado. En la parte superior aparecen varios controles para representar esta vista en diferentes configuraciones. Cuando diseñamos una vista en Android, hay que tener en cuenta que desconocemos el dispositivo final donde se visualizará y la configuración específica elegida por el usuario. Por esta razón, resulta importante que verifiques que la vista se ve de forma adecuada en cualquier configuración. En la parte superior, de izquierda a derecha, encontramos los siguientes botones: opciones de previsualización en fase de diseño, tipo de dispositivo (tamaño y resolución de la pantalla), orientación horizontal (landscape) o vertical (portrait), cómo se verá nuestra vista tras aplicar un tema, la actividad asociada, la configuración regional (locale), la versión de Android.

Para editar un elemento, selecciónalo en el marco de la derecha (Outline) o pincha directamente sobre él en la ventana de previsualización. Al seleccionarlo, puedes modificar alguna de sus propiedades en el marco Properties, situado debajo de Outline. Echa un vistazo a las propiedades disponibles para TextView y modifica alguna de ellas. En muchos casos te aparecerá un desplegable con las opciones disponibles.

El marco de la izquierda te permite insertar de forma rápida nuevas vistas al layout. Puedes arrastrar cualquier elemento a la ventana de previsualización o al marco Outline. En el anexo D se ha incluido una lista con las vistas disponibles.

Vídeo[tutorial]: Diseño visual de layouts: visión general

Ejercicio: Creación visual de vistas

1.Crea un nuevo proyecto y llámalo PrimerasVistas. Puedes dejar el resto de los parámetros con los valores por defecto.