Listado completo de tutoriales

19 - Layout (TableLayout)


El Layout de tipo TableLayout agrupa componentes en filas y columnas. Un TableLayout contiene un conjunto de componentes de tipo TableRow que es el que agrupa componentes visuales por cada fila (cada fila puede tener distinta cantidad de componentes visuales)

Problema

Disponer 9 botones en forma de un tablero de TaTeTi. Utilizar un TableLayout, tres TableRow y nueve botones.

Primero creemos el Proyecto021 y vamos a la pestaña Layout, identifiquemos la componente "TableLayout" y la arrastramos a la ventana 'Component Tree', cuando disponemos el objeto dentro de la ventana podemos ver en el "Component Tree" que el TabletLayout contiene 4 objetos de tipo "Table Row", además debemos ubicar el TableLayout respecto al ConstraintLayout:

TableLayout

Como nuestro problema requiere solo tres filas procedemos a borrar un "TableRow" desde la ventana "Component Tree".

Luego de esto tenemos toda la pantalla cubierta con una componente de tipo "TableLayout", ahora tenemos que empezar a disponer cada uno de los botones en cada fila.

La forma más sencilla es arrastrar los botones no a la vista de diseño sino a la ventana "Component Tree" a la fila correspondiente:

TableLayout

Debemos arrastrar cada uno de los 9 botones al TableRow respectivo :

TableLayout

Otra posibilidad que nos da este Layout es que un control se expanda más de una celda.
Disponer un cuarto "TableRow" de la pestaña "Layouts" y agregar un botón en la cuarta fila del TableLayout:

TableLayout

Ahora fijamos la propiedad "layout_span" con el valor 3:

TableLayout

Podemos mejorar la interfaz visual, primero seleccionando los tres primeros controles de tipo TableRow mediante la tecla 'Control' presionando y presionando con el mouse el objeto respectivo. Seguidamente fijando la propiedad 'layout_weight' con el valor 1 (repartimos con esto el espacio sobrante del dispositivo en forma equitativa entre las tres filas):

TableLayout

Ahora seleccionamos los nueve botones y fijamos la propiedad 'layout_height' con el valor 'match_parent' para que se estiren ocupando todo el espacio de la fila:

TableLayout

También estando seleccionado los nueve botones fijamos la propiedad 'layout_weight' con 1:

TableLayout

De esta forma no importa que tan grande sea el dispositivo, los botones se redimensionan y ocupan todo el espacio.

Este proyecto lo puede descargar en un zip desde este enlace: proyecto021.zip


Retornar