Lumberyard
Guía del usuario (Version 1.20)

LayoutGrid

Puede utilizar un componente de cuadrícula de diseño para organizar elementos secundarios en una cuadrícula uniforme. Para utilizar esta característica, añada el componente de cuadrícula de diseño a un elemento y, a continuación, añada elementos secundarios. El sistema de interfaz de usuario coloca los elementos secundarios siguiendo un patrón de cuadrícula. Puede elegir si los elementos secundarios se colocarán de izquierda a derecha o de derecha a izquierda y de abajo arriba o de arriba abajo. Los elementos secundarios pueden contener una textura o una imagen, texto, un botón, una casilla de verificación, más columnas, filas, cuadrículas, etc. El tamaño de cada uno de los elementos secundarios se determina en función de la propiedad Cell Size (Tamaño de celda) y es independiente del contenido de cada elemento secundario.

Para ver un ejemplo en el juego de un lienzo terminado con el componente LayoutGrid (Cuadrícula de diseño), abra el nivel UiFeatures en el proyecto SamplesProject. Pulse Ctrl+G para jugar y, a continuación, elija Components (Componentes), Layout Components (Componentes de diseño) y Layout Grid (Cuadrícula de diseño). Puede ver ejemplos de diferentes patrones de relleno. Pulse Esc para salir del juego.

Para ver este mismo lienzo en UI Editor, navegue al directorio \Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Layout y abra el archivo SimpleGrid.uicanvas.

Puede agregar un elemento Layout Grid (Cuadrícula de diseño) creado previamente desde la biblioteca de sectores. Al hacerlo, se creará automáticamente una cuadrícula de diseño simple que quedará anidada en el panel Hierarchy (Jerarquía).

Para agregar un elemento Layout Grid desde la biblioteca de sectores

  • En UI Editor, seleccione New (Nuevo), Element from Slice Library (Elemento de biblioteca de sectores) y LayoutGrid (Cuadrícula de diseño).

Para editar un componente de cuadrícula de diseño

En el panel Properties (Propiedades) UI Editor, expanda LayoutGrid (Cuadrícula de diseño) y realice las acciones siguientes, según corresponda:

Rellenado

Escriba los valores en píxeles en relación con los bordes del elemento.

Spacing

Escriba los valores en píxeles para ajustar el espacio entre elementos.

Cell size (Tamaño de celda)

Escriba los valores en píxeles para especificar el tamaño de los elementos secundarios.

Servicio

Realice las acciones siguientes, según corresponda:

  • En Horizontal (Horizontal), seleccione Left-to-Right (De izquierda a derecha) o Right-to-Left (De derecha a izquierda) para determinar el orden en el que aparecerán los elementos horizontalmente.

  • En Vertical (Vertical), seleccione Top-to-Bottom (De arriba abajo) o Bottom-to-Top (De abajo arriba) para determinar el orden en el que aparecerán los elementos verticalmente.

  • En Starting With (Empezando desde), seleccione Horizontal (Horizontal) o Vertical (Vertical) para determinar si los elementos aparecen primero de manera horizontal o vertical.

Child Alignment (Alineación de elementos secundarios)

Si los elementos secundarios del diseño no ocupan todo el espacio de diseño disponible, esta opción determina cómo se alinean los elementos secundarios.

En Horizontal (Horizontal), seleccione Left (Izquierda), Center (Centro) o Right (Derecha) para determinar cómo se alinean horizontalmente los elementos secundarios.

En Vertical (Vertical), seleccione Top (Arriba), Center (Centro) o Bottom (Abajo) para determinar cómo se alinean verticalmente los elementos secundarios.