Preface:

  • Do you suffer because you can’t use a row of UI elements, or do you despair because the number of elements changes dynamically? If so, congratulations on finding the perfect medicine

What is Layout Group

Layout GroupA group of elements can be dynamically arranged, in this case when the number of elements in the group changes.Layout GroupIt intelligently helps you to retype, as you can see from the illustration below:



When we add one to the parent elementLayout GroupWhen you change the number of child elements in a component, you have this dynamic effect, so that our typography stays neat whenever appropriate

Two, typesetting several ways

2.1, Horizontal Layout Group:

That is, Horizontal Layout mode, child elements will only be arranged in a Horizontal way, on the operator element too many more than the parent element will not be line break arrangement, about the specific introduction can be seen before written blog Unity Layout component Horizontal Layout Group use

2.2 Vertical Layout Group:

Horizontal Layout Group: Horizontal Layout Group: Horizontal Layout Group: Horizontal Layout Group: Horizontal Layout Group

2.3 Grid Layout Group:

A Grid Layout Group is a Layout that allows elements to wrap on lines. Horizontal Layout Group is a synthesis of Horizontal Layout Group and Vertical Layout Group

First, add the required Layout type to the parent elements that need to be typesetted, and then the properties panel will appear as shown in the picture (take Grid Layout Group as an example) :

Properties Panel:



Specific explanation:

  • Padding: Similar to web design margins
  • Cell Size: The size to use for each layout element in the group
  • Spacing: Spacing of elements between layouts
  • Start Corner: Similar elements center, left, right, etc
  • Start Axis: Which axis to place elements along. Before starting a new row, the level fills the entire row. Before starting a new column, Vertical fills the entire column.
  • Child Alignment: Used for alignment of layout elements if they do not fill all available space
  • Constraint: Limits the grid to a fixed number of rows or columns to aid the automatic layout system