Los elementos contenedores son elementos UI que pueden tener otros elementos como hijos. Estos ocupan un área rectangular en el layout de una vista y todos los hijos de estos elementos están dentro de éste área rectangular en el layout. Con estos contenedores podemos tratar la posición en el layout de cada elemento hijo.
Los contenedores que se pueden usar en WD4A son:
- TransparentContainer: como su propio nombre indica, este es un contenedor transparente que su única función es ordenar los elementos que alberga. El nodo raíz del layout de cualquier vista (ROOTELEMENTCONTAINER) es un contenedor de este tipo.
- ScrollContainer: igual que el anterior con la diferencia que ofrece la posibilidad de tener barras de Scroll para ocultar o mostrar elementos.
- Tray: este contenedor ofrece la posibilidad de dar un título a los elementos que cuelguen de él. Además tiene dos botones, uno para desplegar un menú contextual propio y otro para expandir y contraer el marco, mostrando u ocultando los elementos.
Todos los elementos contenedores definen como sus hijos va a estar colocados en el layout. Para controlar la posición de los elementos primero se debe asignar un layout manager a la propiedad Layout del contenedor. Todos los elementos hijos heredan un conjunto de propiedades que están relacionadas con el valor del layout manager.
La propiedad layout puede adoptar los siguientes valores:
Comportamiento FlowLayout
El FlowLayout es un diseño que coloca los elementos UI de izquierda a derecha en la pantalla. Si hay demasiados elementos y estos no entran en una sola fila, automáticamente se pasan a la siguiente fila, dependiendo de la anchura de la ventana.
Comportamiento RowLayout
Este comportamiento es parecido al anterior, solo que con la propiedad LayoutData del elemento UI, es posible decidir si se coloca en la primera posición de la siguiente fila (RowHeadData), o sigue el flujo de la fila (RowData). Al igual que el FlowLayout, si la ventana es demasiado estrecha para que entren todos los elementos, estos se pasaran a la siguiente fila.
Comportamiento GridLayout
Este es un diseño que organiza los elementos UI en el contenedor en forma de cuadrícula. El número de columnas de la cuadrícula se puede especificar mediante la propiedad colCount. Además se le pueden indicar las siguientes propiedades:
- CellPading: distancia entre el elemento UI y el borde de la celda.
- CellSpacing: distancia entre las celdas de la cuadrícula y la distancia entre las celdas individuales y el borde exterior.
- StretchedHorizontally/ StretchedVertically: especifica si los elementos UI alineados utilizando este diseño están adaptados horizontalmente/verticalmente para el tamaño de la celda, de modo que el contenedor este completamente lleno horizontalmente/verticalmente. Al desactivar esta opción, la anchura/altura del contenedor será determinada por el contenido.
Comportamiento MatrixLayout
El diseño de matriz organiza los elementos UI de una manera similar al comportamiento GridLayout. La diferencia está en que no se indica un número fijo de columnas por línea. Al indicar a un elemento UI que sea MatrixHeadData en su propiedad LayoutData, este diseño hace que este elemento aparezca al principio de cada nueva línea en la primera columna, y los elementos que se indiquen como MatrixData se colocarán en las siguientes columnas. Esto permite tener filas con distinto número de columnas, cosa que con el GridLayout no es posible.