Читать книгу El gran libro de Android - Jesus Tomás Gironés - Страница 64

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.

2.Abre el fichero res/layout/activity_main.xml.

3.En el marco Outline pulsa con el botón derecho sobre RelativeLayout y selecciona Change Layout… Selecciona LinearLayout (Vertical). Este tipo de layout es uno de los más sencillos de utilizar. Te permite representar las vistas una debajo de la otra.

4.Desde la paleta de la izquierda arrastra los siguientes elementos: ToggleButton, CheckBox, ProgressBar(Large) y RatingBar.

5.Selecciona la primera vista que estaba ya creada (TextView) y pulsa el botón Supr para eliminarla.

6.Pulsa el primer botón: (Set Horizontal Orientation), para conseguir que el LinearLayout donde están las diferentes vistas tenga una orientación horizontal. Comprobarás que no caben todos los elementos.

7.Pulsa el siguiente botón: (Set Vertical Orientation), para volver a una orientación vertical.

8.Selecciona la vista ToggleButton. Pulsa el botón siguiente al que acabamos de utilizar: (Toggle Fill Width). Conseguirás que la anchura del botón se ajuste a la anchura de su contenedor.

9.Pulsa el siguiente botón: (Troggle Fill Height). Conseguirás que la altura del botón se ajuste a la altura de su contenedor. El problema es que el resto de los elementos dejan de verse. Vuelve a pulsar este botón para regresar a la configuración anterior (también puedes pulsar Ctrl-Z).

10. Selecciona la vista CheckBox. Pulsa el botón siguiente al que acabamos de utilizar: (Change Margins…), para introducir un margen en la vista. En la entrada All introduce “20dp”.

11. Pulsa el siguiente botón: (Change Gravity), y selecciona Center Horizontal.

12. Observa que hay un espacio sin usar en la parte inferior del layout. Pulsa el siguiente botón: (Distribute Weights Evenly). La altura de las vistas se ajustará para que ocupen la totalidad del layout. Realmente, lo que hace es dividir el espacio sin usar de forma proporcional entre las vistas. Es equivalente a poner Layout Weights = 1 para todas las vistas de este layout. Esta propiedad se modificará en un siguiente punto.

13. Con la vista CheckBox seleccionada, pulsa el botón (Assign All Weight) para asignar toda la altura restante a la vista seleccionada.

14. Pulsa el siguiente botón: (Change Layout Weight), e introduce el valor 2. Selecciona la vista ToggleButton y, usando este mismo botón, introduce el valor 0.5. Selecciona la vista ProgressBar e introduce el valor 4. Como puedes observar, estos pesos permiten repartir la altura sobrante entre las vistas.

15. Utiliza los siguientes botones: , para ajustar el zum.

16. Utiliza los botones de la barra superior para observar cómo se representará el layout en diferentes situaciones y tipos de dispositivos:

17. Selecciona la vista CheckBox y observa las diferentes propiedades que podemos definir. Algunas ya han sido definidas por medio de la barra de botones. En concreto, y siguiendo el mismo orden que en los botones, hemos modificado: Layout width = wrap_content, Layout height = wrap_content, Layout margin = 20dp, Layout gravity = center_horizontal y Layout weight = 2.

18. Busca la propiedad Text y sustituye el valor CheckBox por “Guardar automáticamente” y Text size por “9pt”.

19. A continuación se muestra el resultado final obtenido:

Los pequeños triángulos amarillos son advertencias (warnings), donde se nos dan sugerencias para realizar un diseño correcto. Trata de eliminar alguna de estas advertencias. (Solución: definir los textos usados como recursos en res/values/strings.xml y referenciar estos recursos en el atributo android:text como: android:text="@string/nombretexto".)

20. Pulsa sobre la lengüeta activity_main.xml de la parte inferior. Pulsa las teclas Ctrl-Shift-F para que formatee adecuadamente el código XML. A continuación se muestra este código:

Observa como el entorno subraya las líneas donde hay advertencias (warnings) en amarillo. Por ejemplo, nos indica que es preferible introducir los textos como recursos.

21. Ejecuta el proyecto para ver el resultado en el dispositivo.

Ejercicio: Vistas de entrada de texto

1.Añade en la parte superior del layout anterior una vista de tipo entrada de texto EditText, de tipo normal (Plain Text). Debajo de esta, una de tipo nombre y apellido (Person Name) seguida de una de tipo palabra secreta (Password). Continua así con otros tipos de entradas de texto.

2.Ejecuta la aplicación.

3.Observa como al introducir el texto de una entrada se muestra un tipo de teclado diferente.