martes, 4 de marzo de 2014

Capítulo 3. Layout: LinearLayout, RelativeLayout, TableLayout y FrameLayout. (II)

Accesos rápidos:
Vimos en el post anterior que la apariencia de nuestras pantallas se definía mediante archivos XML que situaremos en la carpeta res/layout.Si vamos al nuevo proyecto que creamos en capítulos anteriores y abrimos esta carpeta veremos un fichero activity_main.xml con un contenido como vemos a continuación:


 Lo primero que podemos ver dentro de este fichero es que tenemos un componente RelativeLayout y dentro un componente TextView. En este tema vamos a centrarnos en explicar los elementos contenedores, es decir, elementos en los que introduciremos otros componentes. Estos elementos contenedores son LinearLayout, RelativeLayout, FrameLayout y TableLayout. 
Estos elementos son llamados contenedores ya que en su interior se añaden el resto de elementos como botones, etiquetas de texto, imágenes, etc. Vamos a hacer una pequeña descripción de cada uno de estos elementos para posteriormente explicar con detalle sus principales características:

  • FrameLayout: es el contenedor primario y más básico de todos. Si empleamos este contenedor, cada uno de los componentes que añadamos se van solapando uno encima de otro. Por lo tanto, tendremos que pensarnos muy bien el usar este contenedor si deseamos introducir más de dos componentes en su interior
  • LinearLayout: los elementos que vamos situando en su interior se van colocando una a continuación del otro. Este elemento tiene una propiedad llamada orientation, que explicaremos en detalle más adelante, mediante la que seleccionamos si los elementos se van añadiendo uno a continuación de otro de forma vertical o de forma horizontal.
  • RelativeLayout: mediante el empleo de este contenedor podemos indicarle a los elementos que situemos en su interior la posición con respecto a los otros elementos o con respecto al contenedor donde los estamos situando. Este contenedor tiene una serie de variables que nos permiten especificar si queremos situar los elementos a la derecha, izquierda, encima o debajo del resto de elementos.
  • TableLayout: los componentes que se introducen dentro de este contenedor se distribuyen en filas y columnas. Se tienen propiedades que nos permiten definir el tamaño de las filas y de las columnas. 
 Vamos a ir cambiando ahora el archivo activity_main.xml para ir viendo como funcionan los contenedores que hemos explicado anteriormente más en detalle. Para este primer ejemplo vamos a usar un FrameLayout, añadiendo en su interior dos componentes del tipo TextView. Para ello vamos a sustituir el código que  tiene el archivo por el siguiente:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Otro texto"/> </FrameLayout> 
Como hemos dicho, tenemos un componente FrameLayout con dos componentes del tipo TextView en su interior. Al usar este componente, como hemos dicho anteriormente, vamos a ver un texto encima del otro tal y como mostramos en la imagen siguiente. 
Ahora vamos a poner un ejemplo con el componente LinearLayout. Vamos a usar este contenedor y dentro vamos a insertar los mismos TextView que en el ejemplo anterior. El código que va a tener nuestro archivo activity_main.xml va a ser el siguiente:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Otro texto"/> </LinearLayout>

Como podemos ver estamos usando un componente LinearLayout con el atributo android:orientation="horizontal" por lo que los EditText se colocarán uno a continuación del otro tal y como vemos en la imagen siguiente:
Si cambiamos el atributo android:orientation="horizontal" por android:orientation="vertical", veremos como los EditText se colocan uno debajo de otro tal y como os mostramos en la imagen siguiente:
Ahora vamos a mostrar un ejemplo del componente RelativeLayout. En este caso vamos a usar los mismos EditText. Vamos a escribir el siguiente código que explicaremos a continuación:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/textView1" android:text="Otro texto"/> </RelativeLayout>


Podemos ver que ahora le hemos añadido a cada elemento TextView un id para poder referirnos a ellos. Si nos fijamos en el textView2 podemos ver que estamos empleando el atributo android:layout_below="@id/textView1" para indicar que queremos situar este elemento debajo. Lo que veremos será entonces lo siguiente:
Además de below podemos usar toRightOf, toLeftOf or above, para situar un componente a la derecha, a la izquierda o encima de otro. En la imagen siguiente vemos el resultado de usar a android:layout_toRightOf="@id/textView1":
Y ahora por último vamos a explicar el contenedor TableLayout, explicando como se crean las filas y las columnas dentro de la tablas. Para ello vamos a usar este contenedor de la siguiente forma:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TableRow> <TextView android:layout="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </TableRow> <TableRow> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Otro texto"/> </TableRow> </TableLayout>
Podemos ver que dentro del contenedor TableLayout tenemos dos componentes TableRow. Cada uno de estos componentes nos va a describir el número de filas que va a tener nuestra tabla. El número de columnas que va a tener la misma va a venir determinada por los elementos que haya en su interior, de modo que si añadimos varios elementos dentro del TableRow tendremos varias columnas. Lo que podemos ver si volcamos el siguiente código en un terminal es lo siguiente:

Con esto damos por cerrado el post. Ya hemos hecho una primera introducción a los contenedores. En la siguiente entrada vamos a dar una explicación más detallada sobre el funcionamiento de los mismos, las alineaciones de componentes y la distribución de los mismos dentro de los contenedores. Hasta el siguiente post y si te es de utilidad, ya sabes, no dudes en compartir ;-)

No hay comentarios :

Publicar un comentario