Capítulo 4º

INTERFACE DE USUARIO I
LAYOUTS
CAPÍTULO 4º. INTERFACE DE USUSARIO I. LAYOUTS
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

4.1 Introducción
Un interface contiene todos los elementos visuales de la aplicación tales como ventanas,
imágenes, texto, menús, formularios,.. Existen varias formas de definir un interface de
usuario para aplicaciones Android, la selección de cada una de ellas dependerá del grado de
complejidad del interface y el nivel de conocimiento del diseñador del interface.

 De forma procedural: este método requiere un nivel avanzado de Java, y aunque

es necesario mucho tiempo y esfuerzo, la ventaja principal radica en que pueden
crearse y eliminarse controles de manera dinámica, es decir, mientras se ejecuta la
aplicación. En este caso, una vista es un área rectangular en la pantalla que gestiona
el tamaño, el dibujado, el cambio de foco y los gestos del área que representan, y
las vistas se organizan en estructuras de árbol cuya raíz es un ViewGroup. La clase
android.view.View sirve de clase Base para todos los interfaces.

Un ejemplo de la definición de un componente de tipo Texto se muestra a

continuación.

TextView Texto= new TextView(this);

Texto.setWidth(500);
Texto.setHeight(100);
Texto.setText("Curso iniciación a la programación en Android. UEX ");
setContentView(Texto);

 De forma declarativa: Es posible definir el interface de la aplicación de manera

declarativa en XML. Especificando que se quiere ver en la pantalla y no como se
tiene que mostrar usando unas etiquetas especiales definidas en XML. A
continuación se muestra un ejemplo de este método.

Pág - 35
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

<TextView
android:id="@+id/nameLabel"
android:text="Curso iniciación a la programación en Android. UEX"
android:layout_width="500"
android:layout_height="100"
/>

El método declarativo permite tener separado el código de la aplicación y el

interface en diferentes ficheros, lo que permite modificar la interfaz de la aplicación
sin modificar el código fuente.

 Por medio del editor de interfaces de Eclipse: Eclipse ofrece un entorno para
diseñar interfaces rápido y sencillo. Es la manera más fácil de definir un interface ya
que el resultado puede ser visualizado inmediatamente.

Como puede observarse en la figura anterior, el editor de interfaces de Eclipse

ofrece un gran número de controles para definir los componentes de un interface.

En el presente curso nos centraremos en la definición de los interfaces usando el editor de

Eclipse, ya que es la forma más rápida y sencilla de diseñar los interfaces de las
aplicaciones.

Pág - 36
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

4.2 Layout
Un layout es contenedores invisibles que determinan la disposición de las vistas en la
pantalla. Los layouts son elementos no visuales destinados a controlar la distribución,
posición y dimensiones de los controles que se insertan en su interior. Existen varios tipos
predefinidos de layout que permiten predefinir cómo se van a colocar los elementos en su
interior, tal y como muestra la siguiente imagen

4.2.1 Tipos de layout

Los layouts más utilizados son los siguientes:

 FrameLayout: coloca todos sus controles hijos alineados con su esquina superior
izquierda, de forma que cada control quedará oculto por el control. Por ello, suele
utilizarse para mostrar un único control en su interior. Los componentes incluidos en
un FrameLayout podrán establecer sus propiedades android:layout_width y
android:layout_height, que podrán tomar los valores “match_parent” (para que el
control hijo tome la dimensión de su layout contenedor) o “wrap_content” (para que el
control hijo tome la dimensión de su contenido).

Pág - 37
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

En el ejemplo anterior, se ha colocado el mensaje en el centro de la pantalla, para ello

se ha definido un FrameLayout y se ha introducido dentro el control del mensaje (ver
pestaña Outline)

 LinearLayout: Este layout apila uno tras otro todos sus elementos hijos de forma
horizontal o vertical según se establezca su propiedad android:orientation. Al igual
que en un FrameLayout, los elementos contenidos en un LinearLayout pueden
establecer sus propiedades android:layout_width y android:layout_height para
determinar sus dimensiones dentro del layout. Pero en el caso de un LinearLayout,
tendremos otro parámetro con el que jugar, la propiedad android:layout_weight.

Pág - 38
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

En este ejemplo se han incluido dos textos diferentes en una lista horizontal. Además se ha
utilizado el color Rojo definido en la sección 3.5. Para añadir un nuevo texto, acceder a la
venta Form Widgets, seleccionar el control Large (marcado en rojo en la figura anterior),
y arrastrar sobre la pantalla, o bien sobre un elemento de la ventana Outline.

 RelativeLayout: El tipo de layout permite especificar la posición de cada elemento de

forma relativa a su elemento padre o a cualquier otro elemento incluido en el propio
layout. De esta forma, al incluir un nuevo elemento (TextView2) podremos indicar por
ejemplo que debe colocarse debajo de otro elemento (TextView1), y alineado a la
derecha, tal y como se muestra en la siguiente figura

Pág - 39
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

 TableLayout: permite distribuir sus elementos hijos de forma tabular, definiendo las
filas y columnas necesarias, y la posición de cada componente dentro de la tabla.

Pág - 40
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

En este ejemplo también se ha introducido un nuevo tipo de control, el botón, que está
situado en la pestala Form Widgets (ver el cuadrado rojo resaltado en la figura anterior).

Pág - 41
Universidad de Extremadura Curso: iniciación a la programación en Android
José Luis Herrero Agustín Capitulo 4º. Interface de usuario I

GridLayout: Este tipo de layout ha quedado obsoleto y se deben instalar librerías

específicas para usarlo. Es muy parecido a TableLayout.

Ejercicio: Realizar el siguiente interface. Es importante que te fijes en la ventana Outline

para comprobar su estructura.

Pág - 42