In the previous chapter, I added a Horizontal Layout Group component to the parent element Panel, and added two Text elements.
We found that the two Text UI elements are placed on top of the Panel one by one in the horizontal direction. Since the width of the Panel is 300, and the total width of the two Texts is 160 + 160 = 320, the two Texts are beyond the scope of the Panel. In this case, we have two solutions, one is to directly modify the Width property in the Rect Transform of Text. Another way is to modify the layout. For example, we modify the Horizontal Layout Group component of the Panel,
We checked the Control Child Size property, that is, let the Panel control the size of the two Text.
Please note that Child Force Expand in the picture above is also checked by default (this is very important).
At this point, we found that the size of the two Texts has become 150*300.
We can also see that the value of Width has changed in the Rect Transform of Text2. And this Width value is gray and we are not allowed to modify it manually. Similarly, the positions PosX and PosY do not allow us to modify it manually. To put it bluntly, the position and width of the child element Text will be controlled by the parent element Panel. What are the benefits of this approach? We change the width value of the Panel from 300 to 400, as shown below
Let's see what happened to Text
We found that the width of Text also increases, which is the effect of automatic layout.
In the properties of Text2, we also see that the value of Width has changed from 150 to 200. This effect is completely controlled by the Horizontal Layout Group component of the parent element Panel and its Control Child Size property. By default, the child element Text will allocate the space of the parent element Panel in proportion. This is determined by the Child Force Expand item of the Horizontal Layout Group component (checked by default). Child Force Expand Indicates whether to force the child to expand to fill the extra available space. Divides the remaining controls of the container into the number of sub-controls, each sub-control is at the beginning of each equal part. If Control Child Size is checked at the same time, the excess space of the container will be directly allocated to the child elements according to the ratio of Flexible Width. Let's cancel it and see the effect
We found that the two Texts are closely arranged together, they maintain their respective "content size", and no longer occupy the remaining space of the parent element Panel. We found that the current width of Text2 has become 59 pixels, which is the content width of the text "New Text". So, how do we further control the width of Text? We need to use the Layout Element component. Please note that this Layout Element component is to be added to the child element. As follows:
We found that this Layout Element component consists of three different sets of Width and Height.
Minmum Width and Minmum Height are the minimum width and height.
Preferred Width and Preferred Height are the preferred width and height.
Flexible Width and Flexible Height are flexible width and height.
Remarks: When we check the corresponding options, we can set the corresponding width and height values.
If we set the corresponding values in these three groups of sizes, what kind of influence relationship do they have? First of all, the minimum width and height must specify the minimum width and height of UI elements, which is easy to understand. The preference width and height come into play if there is still excess space in the parent UI element. If the parent UI element still has extra space after the above two sets of sizes are allocated, then flexible width and height will be enabled. Please note that the attribute values set by Layout Element need to be used by Layout Group to work, and Layout Group includes Horizontal Layout Group horizontal layout components, Vertical Layout Group vertical layout components and Grid Layout Group grid layout components. Next, let's set the property values of the two Text Layout Element components.
We let the minimum width of Text be 100, and then the preferred width is 150. It can be understood that the maximum width of Text is 150
We let the minimum width of Text2 be 100, and then the preference width is 250. It can be understood that the maximum width of Text2 is 250
The final effect is as shown above. Text occupies a space of 150 and Text2 occupies a space of 250. Finally, we explain the use of flexible width. Flexible width is not a pixel value, but a relative unit. Suppose we set the flexible width of two Texts to 1 and 2. That is to say, if the Panel still has remaining space, the two Texts will occupy the remaining space in a ratio of about 1:2. You can set it yourself and see the final effect.
To sum up, there are two ways to use horizontal layout components, one is to use layout components to control the size of sub-elements, and the other is to use Layout Element components to control the size of sub-elements.
Next, let's introduce the Vertical Layout Group component. The Vertical Layout Group component places child UI elements vertically (vertically). The height of child UI elements is determined according to their respective minimum height, preferred height, and flexible height. In addition, the properties of the vertical layout group are the same as those of the horizontal layout group above, so we will not introduce them in detail.
The content involved in this course has been shared to Baidu Netdisk: https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id