Table Layout

The qc.TableLayout component can be added to any game object. The TableLayout component will figure out the row count, column count, and the cell size, according to the count and size of the node's visible children, then it will place the visible children to the right cell where they belong.

var tableLayout = node.addScript('qc.TableLayout');

Size Provider

Before layouting, the TableLayout component needs to determine the size for cell, it will use the cellWidth and cellHeight of the TableLayout('Cell Size' in Inspector).

tableLayout.cellWidth = 200;
tableLayout.cellHeight = 160;

If the value cellWidth or cellHeight is 0, then it will use the visible children's size to figure out the size of cell. There are two ways to get the size of child node:

RectTransformJust the node's raw width and raw height, don't consider the rotation and scale effect. So if the rotation or scale value are changed, they will not effect the layout result.

tableLayout.contentSizeProvider = qc.TableLayout.USE_RECTTRANSFORM

RealBoundsThe real bounds that contians the whole node considering rotation and scale. So if the rotation or scale value are changed, they will effect the layout result.

tableLayout.contentSizeProvider = qc.TableLayout.USE_BOUNDS

See the difference:

RectTransform

RealBounds

Layout Style

After figuring out the size for child node, there are two ways to place them:

Wrap ElementKeeping the child node's original size. If the child node's size is smaller then the cell size, there will be some blank space left.

tableLayout.style = qc.TableLayout.STYLE_WRAP_ELEMENT

Resize ElementResizing the child node's size to make them fit into the cell size.

tableLayout.style = qc.TableLayout.STYLE_RESIZE_ELEMENT

Notice: In 'Resize Element' mode if the node is rotated, then the result is uncertain.

Constraint

The constraint determines how to layout the cells.

FlexibleIn this constraint, the 'Cell Size' must be confiured, and the cells are layouted and limited inside the node's bounds.

tableLayout.constraint = qc.TableLayout.CONSTRAINT_FLEXIBLE;

Fix Column CountThe column count is fixed, and the row count is dynamic. In this case, the stride property means the column count, and the startAxis should be set as qc.TableLayout.AXIS_HORIZONTAL.

Layout Cells

After the constraint value is determined, the tableLayout will figure out the whole bounds for layouting all the cells, then it begin to layout the cells row by row (or column by column) according to the startCorner and startAxis.

Start Corner

Top Left: Start layout the first cell from the top left corner

tableLayout.startCorner = qc.TableLayout.CORNER_TOP_LEFT;

Top Right: Start layout the first cell from the top right corner

tableLayout.startCorner = qc.TableLayout.CORNER_TOP_RIGHT;

Bottom Left: Start layout the first cell from the bottom left corner

tableLayout.startCorner = qc.TableLayout.CORNER_BOTTOM_LEFT;

Bottom Right: Start layout the first cell from the bottom right corner

tableLayout.startCorner = qc.TableLayout.CORNER_BOTTOM_RIGHT;

Start Axis

Horizontal: Layout out cells row after row

tableLayout.startAxis = qc.TableLayout.AXIS_HORIZONTAL;

Vertical: Layout out cells column after column

tableLayout.startAxis = qc.TableLayout.AXIS_VERTICAL;

In the sample below, we layout 5 element in a tableLayout of 3*2, see the results:

Top Left

Top Right

Bottom Left

Bottom Right

Horizontal

Vertical

Content Alignment

Noramlly the table content's size is different to the node's size, then the contentAlignment can be used to determine the align mode relative to the node.

Top: The top side of the table is align to the top of the node

Middle: The vertical middle of the table is align to the vertical middle of the node

Bottom: The bottom side of the table is align to the bottom of the node

Left: The left side of the table is align to the left of the node

Center: The horizontal center of the table is align to the horizontal center of the node

Padding

If the table content need to have some space left after aligning, you can use 'Padding' to adjust.

Left: The offset relative to the left side of the node

tableLayout.paddingLeft = 5;

Right: The offset relative to the right side of the node

tableLayout.paddingRight = 5;

Top: The offset relative to the top side of the node

tableLayout.paddingTop = 5;

Bottom: The offset relative to the bottom side of the node

tableLayout.paddingBottom = 5;

Cell Alignment

If the tableLayout's style is qc.TableLayout.STYLE_WRAP_ELEMENT, The child node's size may be smaller then the cell's size, then the cellAlignment can be used to determine the align mode relative to the cell.

Top: The top side of the child node is align to the top of the cell

Middle: The vertical middle of the child node is align to the vertical middle of the cell

Bottom: The bottom side of the child node is align to the bottom of the cell

Left: The left side of the child node is align to the left of the cell

Center: The horizontal center of the child node is align to the horizontal center of the cell

Right: The right side of the child node is align to the right of the cell