Android 1 19

Interfaz de usuario en Android: Layouts
En el artículo anterior del curso, donde desarrollamos una sencilla aplicación Android desde cero, ya hicimos algunos comentarios sobre los layouts. Como ya indicamos, 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. Estos componentes extienden a la clasebase ViewGroup, como muchos otros componentes contenedores, es decir, capaces de contener a otros controles. En el post anterior conocimos la existencia de un tipo concreto de layout, LinearLayout, aunque Android nos proporciona algunos otros. Veámos cuántos y cuáles.
FrameLayout
Éste es el más simple de todos los layouts de Android. Un FrameLayout coloca todos sus controles hijos alineados con suesquina superior izquierda, de forma que cada control quedará oculto por el control siguiente (a menos que éste último tenga transparencia). Por ello, suele utilizarse para mostrar un único control en su interior, a modo de contenedor (placeholder) sencillo para un sólo elemento sustituible, por ejemplo una imagen.
Los componentes incluidos en un FrameLayout podrán establecer suspropiedadesandroid: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). Veamos un ejemplo:
Ejemplo:
1
2
3
4
5
6
7
8
9
10
11
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"    android:layout_height="match_parent">
 
             android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="text" />
 

Con el código anterior conseguimos un layout tan sencillo como el siguiente:

LinearLayout
El siguiente tipo de layout en cuanto a nivel de complejidad es el LinearLayout.Este layout apila uno tras otro todos sus elementos hijos en sentido horizontal o vertical según se establezca su propiedadandroid: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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
             android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
             android:layout_width="wrap_content"        android:layout_height="match_parent" />
 

Pero en el caso de un LinearLayout, tendremos otro parámetro con el que jugar, la propiedadandroid:layout_weight. Esta propiedad nos va a permitir dar a los elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Esto es más dificil de explicar que de comprender con un ejemplo. Si incluimos enun LinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos un layout_weight=”1″ y al otro un layout_weight=”2″ conseguiremos como efecto que toda la superficie del layout quede ocupada por los dos cuadros de texto y que además el segundo sea el doble (relación entre sus propiedades weight) de alto que el primero.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
             android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="text"
        android:layout_weight="1" />