Elementos básicos del interface de usuario – Layouts - Basic elements of the user interface

A partir de hoy vamos a encadenar una serie de entradas relacionadas con el interface de usuario y sus elementos más comunes.

Framelayout podemos definirlo como el contenedor básico de los elementos que forman una vista y lo utilizaremos en la mayoría de ellas. De hecho ya se define por defecto en cualquier proyecto que creemos con Eclipse.

Los tipos de layout principales son:

FrameLayout:

 El más básico. No se pueden definir diferentes ubicaciones para los elementos que contiene, por lo que se van dibujando unos encima de otros alineados en la esquina superior izquierda de la pantalla. Sinceramente no le he encontrado una utilidad práctica hasta ahora por lo que no me extenderé más.

LinearLayout:

 Este tipo de Layout es mucho más útil y podemos configurarlo con una serie de atributos que influyen en la disposición de sus elementos hijos. Así, por ejemplo el atributo ‘android:orientation’ puede contener los valores horizontal o vertical. 

Para probarlo podemos realizar una pequeña aplicación con el siguiente fichero main.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

      <TextView 

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="UNO"

          />

      <TextView 

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:text="DOS"

          />

</LinearLayout>

Como veis, se ha definido un LinearLayout con el atributo de orientación vertical y conteniendo un par de campos TextView.

La diferencia al visualizar el resultado cambiando la orientación a horizontal es evidente:

Para definir un atributo siempre se sigue la misma sintaxis:

android:atributo=”valor”

Si queréis comprobar todos los atributos posibles para cualquier elemento del interface podéis pulsar las teclas Ctrl y Espacio justo despues de los ‘:’ y se abrirá una ventana con los valores posibles y una explicación de su función:

Para comprobar los posibles valores de un atributo pulsamos Ctrl y Espacio justo después del ‘=’

En los elementos hijos habréis observado que siempre están incluidos los atributos android:layout_width y android:layout_height

Ambos pueden contener los valores ‘fill_parent’  para que el ancho o el alto del elemento se extienda por todo el layout padre o el valor ‘wrap_content’ para sólo ocupe el espacio necesario para mostrar su contenido.

Otro atributo interesante es ‘gravity’. Define la alineación que van a tener todos los elementos ‘hijos’ y podemos seleccionar entre los valores que veis en la imagen superior.

Si utilizamos el valor ‘center-horizontal’ obtenemos el siguiente resultado:

En la próxima entrada veremos otros tipos de Layout.