En comparación con UIListLayout, UIGridLayout y UITableLayout permiten diseños más estructurados y organizados. Estos son más apropiados para interfaces como un inventario de tienda donde cada artículo puede ser presentado en una cuadrícula de mosaicos del mismo tamaño, o los artículos pueden ser ordenados en filas/columnas relacionadas.
Diseño de cuadrícula
UIGridLayout posiciona GuiObjects hermanos en una cuadrícula de celdas uniformes del mismo tamaño dentro de su contenedor padre. Las celdas se añaden por fila o columna según la FillDirection del diseño hasta que la siguiente celda no quepa, luego comienza una nueva fila o columna. Para un control adicional, puedes usar la propiedad FillDirectionMaxCells para establecer el número máximo de celdas por fila o columna.
Por defecto, UIGridLayout posiciona GuiObjects hermanos en el orden de su LayoutOrder donde los valores más bajos van antes que los valores más altos, y los valores iguales se ordenan dependiendo del orden en que los añadiste. Si cambias la SortOrder del diseño a Enum.SortOrder.Name, los hermanos se ordenan en orden alfabético.
Una vez que insertas un UIGridLayout, este ya sea anula o influye en la Position y/o Size de todos los objetos UI hermanos, por lo que los cambios en esas propiedades dentro de la ventana de Propiedades o dentro de un script no tendrán el efecto normal.
UIGridLayout respeta cualquier restricción que coloques en los objetos dentro de la cuadrícula. Por ejemplo, si un objeto tiene un UISizeConstraint con una propiedad MinSize que es mayor que la propiedad CellSize de la cuadrícula, el objeto abarcará múltiples celdas.
Diseño de tabla
UITableLayout posiciona GuiObjects hermanos y sus hijos en formato de tabla. La FillDirection predeterminada de Vertical significa que los hermanos primero se posicionan en filas, y los hijos de esos hermanos se posicionan horizontalmente para formar columnas, de tal manera que cada celda dentro de una fila tiene la misma altura y cada celda dentro de una columna tiene el mismo ancho.
Este patrón imita la estructura estándar de filas/columnas de HTML:
A menos que habilites las propiedades FillEmptySpaceColumns o FillEmptySpaceRows del diseño, el tamaño de los GuiObjects hermanos determina las dimensiones de las celdas. Por ejemplo, un TextLabel de tamaño UDim2.new(0.25, 0, 0.1, 0) creará una celda de tabla del 25% de ancho y 10% de altura dentro del contenedor padre.
Una vez que insertas un UITableLayout, este ya sea anula o influye en la Position y/o Size de todos los objetos UI hermanos, por lo que los cambios en esas propiedades dentro de la ventana de Propiedades o dentro de un script no tendrán el efecto normal.
UITableLayout respeta y responde a cualquier UISizeConstraint que coloques en los objetos dentro de la tabla. Por ejemplo, si un objeto tiene un UISizeConstraint con una propiedad MinSize dentro de una celda de encabezado, el resto de las celdas dentro de la columna tendrán el mismo tamaño que la celda de encabezado.
Nota que si la propiedad MaxSize restringe el tamaño de una celda de llenar el espacio asignado de una fila o columna que es más ancha que la celda, el objeto se alineará a la parte superior izquierda de la celda.