Multicolumn Layouts in Unity
Unity’s RectTransform can be used to achieve a couple of common multi-column UI patterns. I describe here how to achieve these using only anchors, offsets, and pivots—and not any layout groups.
Percentage-based N-column Layout
If your layout requires multiple columns and each column is apportioned a percentage of the total display, set each column’s X anchors according to the percentages allotted to each. If the columns consume 50%, 30%, and 20% of the parent, then the X anchors should be set to [0, 0.5], [0.5, 0.8], and [0.8, 1].
Fill the parent vertically by setting the Y anchors of all columns to [0, 1].
If the child elements of each column should fill the column, then set the left, top, right, and bottom properties to 0.
Fixed-width Two-column Layout
If your layout requires two columns and one column is apportioned a fixed number of pixels W and the other column should fill the remaining space, you will need to adjust both the anchors and pivots.
First, fill the parent vertically by setting the Y anchors of both columns to [0, 1].
Fixed Right
If the fixed-width column is on the right, set its X anchors to [1, 1]. This makes the reference point the right edge of the parent. We want to align the right edge of the column with the right edge of the parent, so set the pivot to [1, ?]. Finally, set the width of the fixed column to W pixels. Set the X position, top, and bottom to 0.
On the variable-width column, have it fill the parent horizontally by setting the X anchors to [0, 1]. The value of the pivot is irrelevant—but changing it after the other properties have been set will likely undesirably alter them. Set left, top, bottom to 0, and right to W.
Fixed Left
If the fixed-width column is on the left, set its X anchors to [0, 0]. This makes the reference point the left edge of the parent. We want to align the left edge of the column with the left edge of the parent, so set the pivot to [0, ?]. Finally, set the width of the fixed column to W pixels. Set the X position, top, and bottom to 0.
On the variable-width column, have it fill the parent horizontally by setting the X anchors to [0, 1]. The value of the pivot is irrelevant—but changing it after the other properties have been set will likely undesirably alter them. Set top, right, and bottom to 0, and left to W.
Fixed-width Three-column Layout
If your layout requires three columns, with the fixed width columns on the left and right and a variable-width column in the middle, you can combine the fixed right and fixed left patterns described above.
Padding
If you want a fixed amount of padding within a column, then set left, top, right, and bottom to the desired number of pixels. If you want a percentage-based amount of padding, then add the proportion to the minimum X anchor and subtract it from the maximum X anchor.