This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

The purpose of this series of articles is to document and analyze the various principles of UGUI:

  • UGUI rendering mode.
  • UGUI zoom calculation.
  • UGUI anchor location.
  • UGUI hierarchy rendering process.
  • UGUI event triggering principle.
  • UGUI layout automatic layout mode.

This article shares the use of automatic layout components for UGUI elements.

The Add Componet – > Layout:UGUI has a lot of automatic layout components, For example, Layout Element, Horizontal Layout Group, Vertical Layout Group, Grid Layout Group, Layout Fitter, Aspect Ratio Fitter.

So how these components are used, let’s look at them in detail.

Automatic Layout Element

attribute introduce
Min Width Minimum width
Min Height The minimum height
Preferred Width Preferred width
Preferred Height High priority
Flexible Width The elastic width
Flexible Height Elastic height
Layout Priority Layout priority

The Layout Element allocates child objects as follows:

First, assign Min Width and Min Height

Allocate Flexible Width and Flexible Height if there is enough space

The following image shows how the width of the image increases: First allocate Min Width (300, red)

If there is enough space, assign Preferred Width (300 to 500, green)

If there is extra space, assign Flexible Width: 1 (500-700, blue)

If the Flexible is set to 0.3 and 0.7 for two objects under Layout, the ratio will be as follows:Note also that the Text and Image components are automatically assigned Preferred Size based on content Size.

Horizontal Layout Group

attribute instructions
Padding Fill the interior space
Spacing Each element interval
Child Alignment Child objects are aligned when not all space is filled
Child Controls Size Fill the space according to the child control size
Child Force Expand Force control child controls to fill space

Here is an example to understand each parameter:

(1) Create a scene, create a Canvas, and add an empty object named Layout Controllers to the Canvas. Add Horizontal Layout Group to empty object: Horizontal Layout Group < AddConpent > Layout > Horizontal Layout Group < AddConpent > Layout > Horizontal Layout Group < AddConpent > Layout > Horizontal Layout Group(4) At this point, the Rect Transform Component of Button cannot be adjusted because we have allocated space through the Horizontal Layout Group. The Rect Transform will show which Layout Group is currently controlled by:(5) Adjust the Padding value as shown in the figure to see the filling area

(6) Adjust Spacing as shown in the diagramUncheck the Child Force Expand Width property of the Horizontal Layout Group component on the parent of each Button to not Force the Child to fill the extra space. Instead, you set it manually through the Layout Element. (8) Change the Layout Element Min Width of 5 buttons to 20, 30, 40, 50 and 60 respectively. At this time, it can be seen that the Width of each Button is distributed. Changing the size of the parent object does not change the size of the child object, because only the Min Width is allocated. No additional effective space is allocated:Change the Horizontal Layout Group Child Alignment to see the element Alignment:Object Layout Properties Min Width = 5 button Width (20+30+40+50+60=200) + Spacing(40) + Padding Left, Right(20) = 260:(9) Adjust the Layout Element value of the first Button as shown in the figure below:

Set Preferred Width to 100. Set Min Width to 20

(10) When the space is sufficient, the remaining Preferred Size (20-100 space) will be allocated, as shown below:(11) Adjust the Layout Element value of the first Button as shown in the figure belowSet Flexible Width to 1

1. First allocate Min Width(20)

2. If there is enough space, the remaining Preferred Size (20~100 space) will be allocated.

3. If there is additional space, allocate the remaining Flexible Size, as shown below:Horizontal Layout Group Child Force Expand Width check Horizontal Layout Group Child Force Expand Width check Horizontal Layout Group Child Force Expand Width check Horizontal Layout Group

  • First allocate Min Width(20)

  • If there is enough space, the remaining Preferred Size (20 to 100 Spaces) will be allocated.

  • If there is extra space, allocate the remaining element Flexible Size and Child Force Expand Width

Conclusion:As seen above, all elements will be allocated Min Width first, then there is enough space, the remaining Preferred Size will be allocated, and finally the Flexible Size and Child Force Expand Width will be allocated

So far we have seen how the Horizontal Layout Group allocates child objects based on Layout Element size.

A: Vertical Layout Group

The Vertical Layout Group attributes are as follows:

attribute instructions
Padding Fill the interior space
Spacing Each element interval
Child Alignment Child objects are aligned when not all space is filled
Child Controls Size Fill the space according to the child control size
Child Force Expand Force control child controls to fill space

The use of attributes for vertical and horizontal layouts is basically the same, but the difference between horizontal and vertical is not repeated here.

Arrange the components in a Grid Layout Group

First, let’s take a look at the Grid Layout Group:

attribute instructions
Padding Fill the interior space
Cell Size Width and height of each element
Spacing Each element is spaced, up and down, left and right
Start Corner The beginning corner (position) is divided into “upper left”, “upper right”, “lower left” and “lower right”.
Start Axis The first axis of alignment, “horizontal” or “vertical”
Child Alignment Child objects are aligned when not all space is filled
Constraint Alignment restrictions

Here’s how each parameter works:

Cell Size Sets the width and height of each element The Start Corner is the place where you Start to line up. Start Axis: The Axis on which the alignment begins, “horizontal” or “vertical”

Content Size Fitter assembly components

First, take a look at the component’s properties:This component controls the size of the parent object itself, depending on the size of the child object, or a set size ratio.

attribute introduce
Horizontal Fit Horizontal adaptation adjustment
Vertical Fit Vertical adaptation

Horizontal and Vertical Fit have three parameters:

parameter introduce
None Do not adjust
Min Size Adjust according to the Min Width size of the child object
Preferred Size Adjust according to the Preferred size of the child object

Next, use an example to demonstrate the use of this component:

If we now have a requirement, we must scale the parent object size according to the child object size, as follows:(1) Create a scene, create a Canvas, add an empty object under the Canvas, and add a Horizontal Layout Group to the empty object.

The Horizontal Layout Group allocates the size of the child object based on the Layout Element of the child object and does not change the size of the parent object, as shown below:(2) Add Button(child object) under parent object, add Layout Element component, change Min Width to 100. (3) Increase the Content Size Fitter component of the parent object, adjust the Horizontal Fit to Min Size, and adjust the Size of the parent object through the Min Width of the child object.(4) If the Button copy increases, the size of the parent object itself will also change, as shown below:(5) Adjust the pivot of the parent object to control the zoom direction, as shown below:Using the above example, we first use a Horizontal Layout Group to row the child objects and add a Layout Element to the child object to set the Min Width.

Finally, set the Size of the parent object by getting the Layout Element of the child object with the Content Size Fitter.

At this point the parent object size is scaled according to the child object size.

7, Aspect Ratio Fitter assembly components

First, let’s look at the attributes of the Aspect Ratio Fitter assembly component:Properties:

attribute introduce
Aspect Mode Adjust the pattern
Aspect Ratio The ratio is width/height

Introduction to adjustment mode:

Adjust the pattern introduce
None Do not adjust
Width Controls Height Based on Width, change Height according to proportion
Height Controls Width Change Width to scale based on Height
Fit In Parent Anchors automatically adjust the width, height, position, and size so that this figure fits perfectly in the parent object, depending on the proportion. This mode may not cover all spatial adjustments
Envelope Parent Anchors automatically adjust the width, height, position, and size so that the graphic size completely covers the parent object, depending on the scale. This mode may be out of place

Here is a demonstration of the various adjustment modes:Width Controls Height: Scale the Height based on Width When Width changes, Height changes proportionally:

Height Controls Width: Scale the Width based on Height When Height changes, Width changes proportionally:

Fit In Parent: Anchors automatically adjust the width, height, position, and size so that this figure fits perfectly In the Parent object. This mode may not cover all spatial adjustments Adjust the size of the parent object, the object will be proportionally aligned with the parent object:

Envelope Parent: Anchors automatically adjust the width, height, position, and size of this image to fully cover the Parent object, which may exceed the spatial scaling Resize the parent object, the object will scale over the parent object:Now let’s talk about the difference between Content Size Fitter and Aspect Ratio Fitter.

Differences between Content Size Fitter and Aspect Ratio Fitter:

Content Size Fitter is automatically resized by child objects

Aspect Ratio Fitter is adjusted by numerical value (Aspect Ratio)

Eight, after the speech

Auto Layout System can quickly and conveniently arrange multiple UIs. When the size changes, it will automatically adjust the content. It can also be applied in multi-layer nesting, which is very convenient and intuitive in the future adjustment and modification.