Edición visual de las vistas

Veamos ahora como editar los layouts o ficheros de diseño en XML. En el explorador del proyecto abre el fichero res/layout/activity_main.xml. Verás que en la parte superior derecha aparecen dos lengüetas: Code, Split y Design. Con Code Podrás editar directamente el código XML, con Design Podrás realizar este diseño de forma visual. Con Split muestra las dos alternativas. Veamos cómo se realizaría el diseño visual. La herramienta de edición de layouts se muestra a continuación:

Nota: Si aparece un error con problemas de renderizado prueba otros niveles de API en el desplegable que aparece junto al pequeño robot verde, o con otro tema, en en el botón con forma de círculo.

 En la parte inferior izquierda encontramos el marco Component Tree con una lista con todos los elementos del layout. Este layout tiene solo dos vistas: un ConstraintLayout que contiene un TextView. En el marco central aparece una representación de cómo se verá el resultado y a su derecha, con fondo azul, una representación con los nombres de cada vista y su tamaño. En la parte superior aparecen varios controles para representar este layout 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 el layout se ve de forma adecuada en cualquier configuración.

En la parte superior, de izquierda a derecha, encontramos los siguientes botones: El primero  permite mostrar solo la visualización de diseño, solo la visualización esquemática o ambas. El botón   muestra la orientación horizontal (landscape), vertical (portrait) y también podemos escoger el tipo de interfaz de usuario (coche, TV, reloj,…),  escogemos el tipo de dispositivo (tamaño y resolución de la pantalla), con  la versión de Android, con cómo se verá nuestra vista tras aplicar un tema y con  Default(en-us) editar traduciones.

Para editar un elemento, selecciónalo en el marco Component Tree o pincha directamente sobre él en la ventana de previsualización. Al seleccionarlo, puedes modificar alguna de sus propiedades en el marco Properties, situado a la derecha. 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. Aquí solo se muestra una pequeña parte de las propiedades disponibles. Pulsa en All properties para mostrarlas todas. El marco de la izquierda, Palette, te permite insertar de forma rápida nuevas vistas al layout. Puedes arrastrar cualquier elemento a la ventana de previsualización o al marco Component Tree. En el anexo D se ha incluido una lista con las vistas disponibles.

Nota: El siguiente vídeo corresponde a una versión anterior de la herramienta. Aunque cambian algunos iconos el funcionamiento continúa siendo similar. Para crear un nuevo layout pulsa con el botón derecho en el explorador de proyecto sobre app y selecciona la opción: New > Android resource file

video[TutorialDiseño visual de Layouts: Visión general

Ejercicio: Creación visual de Vistas

1.    Crea un nuevo proyecto con los siguientes datos:
      Phone and Tablet / Empty Activity
      Name: Primeras Vistas
      Minimum API level: API 19 Android 4.4 (KitKat)
     

Deja el resto de los parámetros con los valores por defecto.

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

3.   Vamos a hacer que la raíz del layout se base en un 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. En el marco Component Tree pulsa con el botón derecho sobre ConstraintLayout y selecciona Covert View… Indica que quieres usar el layouy, LinearLayout. El layout que ha añadido es de horizontal. En nuestro caso lo queremos de tipo vertical, para cambiarlo pulsa con el botón derecho sobre LinearLayout. y selecciona LinearLayout/Convert orientation to vertical.
Todas las operaciones que hacemos en modo diseño visual (lengüeta Design) también las podemos hacer con el editor de texto. Para probarlo deshaz el trabajo anterior, usando la opición Edit/Undo Ctrl+Z). Selecciona la lengüeta Code y cambiar la etiqueta ConstrainLayout por LinearLayout. Añade el atributo orientation a LinearLayout para que la orientación sea vertical. Elimina los atributos inecesarios del TextView que utiliza con ConstrainLayout. El resultado ha de ser similar a:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.primerasvistas.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" 
        app:layout_constraintBottom_toBottomOf="parent" … />
</LinearLayout>

Regresa a la lengüeta Design.
 
4.
Desde la paleta de izquierda arrastra, al área de diseño, los siguientes elementos: ToggleButton, CheckBox,SeekBar
y RatingBar.

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

6.     Selecciona la vista ToggleButton.   Pulsa  Pulsa ahora  (Set layout width to wrap_content).  Conseguirás que la anchura del botón se ajuste a la anchura de su texto. Pulsa el botón  (Set layout width to match_parent) para que el ancho del botón se ajuste a su contenedor. Observa en el marco Attributes como cambia la propiedad layout_width. Si el botón anterior no funciona cámbialo desde este marco. Deja el valor wrap_content.

7.     Pulsa el botón(Convert orientation to horizontal), para para conseguir que el LinearLayout donde están las diferentes vistas tenga una orientación horizontal. Comprobarás que no caben todos los elementos.Pulsa el botón  (Convert orientation to vertical), para volver a una orientación vertical.

8.     Con la vista ToggleButton seleccionada. Pulsa el botón   (Set layoutheight to match_parent); Conseguirás que la altura del botón se ajuste al a altura 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).

9.     Selecciona la vista CheckBox. Ve al marco Atributes y en la parte inferior pulsa en All attributes. Busca la propiedad layout_margin en el campo con el mismo nombre introduce “20dp”. Se añadirá un margen arededor de la vista.

10.     Busca la propiedad gravity y selecciona center.

11.     Observa que hay un espacio sin usar en la parte inferior del layout. Vamos a distribuir este espacio entre las vistas. Desde el marco Commponet Tree selecciona las cuatro vistas que has introducido dentro del LinearLayout. Para una selección múltiple mantén pulsada la tecla Ctrl.

12.  Aparecerá un nuevo botón: (Distribute Weights Evenly). Púlsalo yla 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_weight = 1 y layout_height = 0dp para todas las vistas de este layout. Esta propiedad se modificará en un siguiente punto.

13.  Selecciona las cuatro vistas y pulsa el botón   (Clear All Weight) para elinar los pesos introducidos.

14.   Selecciona la vista CheckBox. Asigna en el marco Attributes  , layout_height = Odp y layout_weight = 1 en esta vista. Observa como toda la altura restante es asignada a la vista seleccionada.

15.  Para asignar un peso diferente a cada vista, repite los pasos anteriores donde asignábamos peso 1 a todas las vistas ( botón). Pulsa la lengüeta Code y modifica manualmente el atributo layout_weight para que el ToggleButton tenga valor 2; CheckBox tenga valor 0.5;  SeekBar valor 4 y RatingBar valor 1. Pulsa la lengüeta Design. Como puedes observar, estos pesos permiten repartir la altura sobrante entre las vistas.

16.  Utiliza los siguientes botones  para ajustar el zum.

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

18.  Selecciona la vista CheckBox y observa las diferentes propiedades que podemos definir en el marco Attributes. 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 margin = 20dp, gravity = center y Layout weight = 0.5.

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

20.  Pulsa el botón  para mostrar la visualización de diseño junto a la esquemática. A continuación se  muestra  el resultado obtenido:

21.     Pulsa sobre la lengüeta Code.A continuación se muestra este código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.primerasvistas.MainActivity">
    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:text="ToggleButton" />
    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="20dp"
        android:layout_weight="0.5"
        android:gravity="center"
        android:text="Guardar automáticament"
        android:textSize="9pt" />
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4" />
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout> 

22.  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).  Lo encontrarás dentro del grupo Text Fieds (EditText). Debajo de esta, una de tipo correo electrónico (E-mail) 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 Android

video[Tutorial]   Atributo de la clase TexView en Android

Recursos adicionales: Atributos de dimensión

En muchas ocasiones tenemos que indicar la anchura o altura 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 una 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 (píxeles independientes de la densidad): Presupone un dispositivo de 160 píxeles por pulgada. Si luego el dispositivo tiene otra densidad, se realizará el correspondiente ajuste. A diferencia de otras medidas como mm, in y pt este ajuste se hace de forma aproximada dado que no se utiliza la verdadera densidad gráfica, sino el grupo de densidad en que se ha clasificado el dispositivo (ldpi, mdpi, hdpi…). Esta medida presenta varias ventajas cuando se utilizan recursos gráficos en diferentes densidades. Por esta razón, Google insiste en que se utilice siempre esta medida. Desde un punto de vista práctico un dp equivale aproximadamente a 1/160 pulgadas. Y en dispositivos con densidad gráfica mdpi un dp es siempre un pixel.
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.

Recursos adicionales:Tipos de vista y sus atributos

Consulta el siguiente link, para conocer una lista con todos las descendientes de la clase View y sus atributos.

Preguntas de repaso: Pincha aquí para hacer un test.