domingo, 3 de agosto de 2014
Edición visual de las vistas
Veamos ahora como editar los layouts o ficheros de diseño en XML. En el explorador de paquetes abre el ficherores/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 Grafical Layout). (### typo in English text: “Grapical”). 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 conteniendo un TextView. En este momento solo hay dos un RelativeLayoutque 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 será visualizada 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.
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 Propertiessituado debajo de Outline. Da 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 B se ha incluido un listado con las vistas disponibles.
Ejercicio paso a paso: Creación visual de Vistas
1. Crea un nuevo proyecto con nombre PrimerasVistas. Puedes dejar el resto de 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 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.
(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.
(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 el ancho del botón se ajuste al ancho de su contenedor.
(Toggle Fill Width). Conseguirás que el ancho del botón se ajuste al ancho de su contenedor.
9. Pulsa el botón siguiente 
(Troggle Fill Height). Conseguirás que el alto del botón se ajuste al alto de su contenedor. El problema es que el resto de elementos dejan de verse. Vuelve a pulsar este botón para regresar a la configuración anterior (También puedes pulsar Ctrl-z).
(Troggle Fill Height). Conseguirás que el alto del botón se ajuste al alto de su contenedor. El problema es que el resto de 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”.
(Change Margins…) para introducir un margen en la vista. En la entrada All introduce “20dp”.
11. Pulsa el botón siguiente
(Change Gravity) y selecciona Center Horizontal.
(Change Gravity) y selecciona Center Horizontal.
12. Observa como hay un espacio sin usar en la parte inferior del Layout. Pulsa el botón siguiente(Distribute Weights Evenly). El alto 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 será modificada en un siguiente punto.
(Distribute Weights Evenly). El alto 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 será modificada en un siguiente punto.
13. Con la vista CheckBox selecccionada, pulsa el botón 
(Assign All Weight) para asignar todo el alto restante a la vista seleccionada.
(Assign All Weight) para asignar todo el alto restante a la vista seleccionada.
14. Pulsa el botón siguiente
(Change Layout Weight) e introduce el valor 2. Selecciona la vistaToggleButton 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 el alto sobrante entre las vistas.
(Change Layout Weight) e introduce el valor 2. Selecciona la vistaToggleButton 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 el alto sobrante entre las vistas.
15. Utiliza los siguientes botones 
para ajustar el zoom.
para ajustar el zoom.
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. El resultado final obtenido se muestra a continuación:
Los pequeños triangulos amarillos son advertencias(warnings), donde se nos dan sugerencias para relizar un diseño correcto. Trata de eliminar alguna de estas advertencias. (Solución: Defir los textos usados como recursos en res/values/strings.xml y referenciar estos recursos en el atributoandroid:textcomo: android:text="@string/nombretexto").
20. Pulsa sobre la lengüeta de la parte inferior con nombre activity_main.xml. Pulsa las teclas Shift-Ctrl-fpara que formatee adecuadamente el código XML. Este código se muestra a continuación.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ToggleButton
android:id="@+id/toggleButton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="ToogleButton" />
<CheckBox
android:id="@+id/checkBox1"
android:layout_width=""wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="2"
android:text="Guardar automáticamente"
android:textSize="9pt" />
<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4" />
<RatingBar
android:id="@+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
</LinearLayout>
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 paso a paso: 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 mostrará un tipo de teclado diferente.
Los atributos de las vistas
video[Tutorial] Atributo de la clase View en Androidvideo[Tutorial] Atributo de la clase TexView en Android
Recursos adicionales: Atributos de dimensión
En muchas ocasiones tenemos que indicar el ancho o alto de una vista, un margen, el tamaño de un texto o unas coordenadas. Este tipo de atributos se conocen como atributos de dimensión. Dado que nuestra aplicación podrá ejecutarse en gran variedad de dispositivos con resoluciones muy diversas, Android nos permite indicar estas dimensiones de varias formas. En la siguiente tabla se muestran las diferentes posibilidades:
px (píxeles): Estas dimensiones representan los píxeles en la pantalla.
mm (milímetros): Distancia real medida sobre la pantalla.
in (pulgadas): Distancia real medida sobre la pantalla.
pt (puntos): Equivale a 1/72 pulgadas.
dp o dip (píxeles independientes de la densidad): Presupone un dispositivo de 160 píxeles por pulgada. Si luego el dispositivo tiene otra densidad, se realizará la correspondiente regla de tres. Cuando sea representado en dispositivos con una densidad grafica diferente, este hara un recalculado de forma que se conserve la misma medida midiendo sobre la pantalla dispositivo. Es decir 160dpequivaldrá siempre a una pulgada en cualquier tipo de dispositivo. Por lo tanto, se trata de una medida real sobre pantalla equivalente a 1/160 pulgadas.
sp (píxeles escalados): Similar a dp pero también se escala en función del tamaño de fuente que el usuario ha escogido en las preferencias. Indicado cuando se trabaja con fuentes.
