UGUI layout system learning
Article directory
1. RectTransform adaptive layout
Each UGUI control has a RectTransform component (inherited from Transform), which defines the anchor point of the control, the position of the pivot point, width and height, rotation, scaling and other attributes. Primarily used to control layout and alignment.
1.1 Pivot:
-
Take the object itself as the coordinate system, the lower left corner is the coordinate origin (0,0), and the upper right corner is (1,1).
-
The pivot point is the point of reference for object rotation and scaling.
-
When the object's width and height change, the Pivot point determines how the object extends to both sides.
For example, the Pivot point (0.4, 0.8) indicates that the center point of the current UI is at 40% of the width and 80% of the height. When you try to expand the width of the object by Δx, 40% of Δx is allocated to the left of the pivot point, and the rest is allocated to the right of the pivot point.
When you need to dynamically expand a UI, such as a text box, you want the width of the text box to be dynamically expanded according to the pixels occupied by the text, and at the same time the text is horizontally aligned to the left, then you need to set the pivot point on the left border of the UI , i.e. pivot.x = 0, so that when the width of the textbox grows, it only expands to the right, not to the sides.The same goes for scaling objects.
-
The pivot point and the anchor point jointly affect a set of values on the panel, which will be displayed differently due to the setting of the anchor point (PosZ is generally unchanged)
This set of values represents the layout of the object relative to the parent object.
No matter how the parent node changes, this set of values remains unchanged. Correspondingly, when the size of the parent node changes, the position, width and height of the child object will change accordingly in order to maintain this set of values.
1.2 Anchors:
The anchor point determines how the position and size of the UI changes when the size of the parent object changes.
- Each RectTransform has Min and Max two anchor points.
- The anchor point is a normalized two-dimensional vector, with the parent object as the coordinate system, the lower left corner as the coordinate origin (0,0), and the upper right corner (1,1).
- Two anchor points can determine a diagonal line, that is, there is a concept of an anchor box. Depending on the position of the two anchor points, there are three cases:
(1) The two anchor points coincide, that is, both X and Y are the same, and the anchor box degenerates into a point.
This set of values is displayed as: PosX, PosY: the position of the pivot point of the object relative to the anchor point; Width, Height: the width and height of the object.
In this case, it is called an absolute layout. Under absolute layout, the size of the parent object changes, but the size of the child object does not change. In order to maintain the relative position of the pivot point and the anchor point, the position of the child object will change.
(2) Two anchor points are on the same horizontal line or the same vertical line, that is, X and Y have the same set, and the anchor frame degenerates into an anchor line.
For example: Min(0,1) Max(1,1), that is, the anchor box degenerates into the upper boundary of the parent node.
This set of values is displayed as: Left, Right: the horizontal distance between the left and right boundaries of the object and the left and right anchor points; PosY: the vertical distance between the pivot point of the object and the anchor line; Height: the height of the object
In this case, when the width of the parent object is stretched, in order to keep the horizontal distance between the left and right boundaries of the object and the left and right anchor points unchanged, the child object will also be stretched; when the height of the parent object is stretched, in order to keep the object The vertical distance between the pivot point and the anchor point remains unchanged, and the child object will appear higher, but the height will not be stretched.
The situation is similar for other anchor lines.
(3) The two anchor points X and Y are different from each other, forming a rectangular anchor box.
This set of values is displayed as: Left, Right, Top, Bottom: Indicates the distance between the four boundaries of the object and the four sides of the anchor box.
In this case, whenever the size of the parent object changes, the child object will be stretched.
1.3 anchorMin,anchorMax,offsetMin,offsetMax,sizeDelta,anchoredPosition
anchorMin,anchorMax : Normalized anchor vectors.
offsetMin, offsetMax : Represents two vectors pointing from two anchor points to the lower left corner and upper right corner of the object. offsetmin represents the offset of the lower left corner of the current object relative to the anchorMin anchor point, and offsetmax represents the offset of the upper right corner of the current object relative to the anchorMax anchor point.
sizeDelta : The amount of size change, this attribute represents the vector obtained from offsetMax - offsetMin. Absolute layout is the vector from the lower left corner of the picture to the upper right corner.
Since rectTransform.rect is read-only, the width and height of the object can be directly changed by modifying the value of sizeDelta under absolute layout. Relative layout can be better understood by modifying the values of offsetMin and offsetMax.
anchoredPosition : The vector represented by the arrow in the figure below.
Description: Green box: child node; Red box: parent node; Axis: Pivot, the small blue circle pointed by the arrow in the above picture; Anchor point area: a box composed of AnchoredMin and AnchoredMax, four in the above picture The area formed by small white triangles; virtual axis: the point mapped in the anchor point area by the pivot parameter of the child node. Schematic code:
float virtualX = Mathf.Lerp(rect.anchorMin.x, rect.anchorMax.x, rect.pivot.x);
float virtualY = Mathf.Lerp(rect.anchorMin.y, rect.anchorMax.y, rect.pivot.y);
Vector2 virtualPivot = new Vector2(virtualX, virtualY);
Vector2 localPosition2D = new Vector2(rect.localPosition.x, rect.localPosition.y);
Vector2 anchoredPosition = localPosition2D - Vector2.Scale(parent.rect.size, visualPivot - Vector2.one * 0.5f);
1.4 Common API usage:
Change the top of the RectTransform
GetComponent().offsetMax = new Vector2(GetComponent().offsetMax.x, top);
Change the Right of the RectTransform
GetComponent().offsetMax = new Vector2(right, GetComponent().offsetMax.y);
change the RectTransform bottom
GetComponent().offsetMin = new Vector2(GetComponent().offsetMin.x, bottom);
change the left of the RectTransform
GetComponent().offsetMin = new Vector2(left,GetComponent().offsetMin.y);
change the width of the RectTransform , height
GetComponent().sizeDelta = new Vector2(width, height);
change anchoredPosition of RectTransform
GetComponent().anchoredPosition3D = new Vector3(posx,posy,posz);
GetComponent().anchoredPosition = new Vector2(posx,posy);
void GetLocalCorners(Vector3[] fourCornersArray);
This method means to obtain the coordinates of the four corners of the UI in the coordinate system with its own Pivot as the origin. The Vector3 array as a parameter needs to be declared by itself. The order of getting the four corners is lower left, upper left, upper right, lower right.
void GetWorldCorners(Vector3[] fourCornersArray);
This method means to obtain the coordinates of the four corners of the UI in the world coordinate system.
void SetSizeWithCurrentAnchors(RectTransform.Axis axis, float size);
Set the size according to the current anchor information (actually according to the pivot, the setting result has nothing to do with the anchor), there are two parameters, the first is the value of the Axis type, Need to specify a direction, horizontal or vertical; the second parameter is the width and height of itself.
Example: Set the width and height to (100,30).
RectTransform rt = GetComponent();
rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,100);
rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical,30);
void SetInsetAndSizeFromParentEdge(RectTransform.Edge edge, float inset, float size);
Set the distance of the current UI relative to the edge of the parent UI and the size of the current UI. The first parameter is a value of type Edge, which needs to be specified to be the edge of the parent object Benchmark (that is, one of the four values of Top, Bottom, Left, and Right, that is, the alignment); the second parameter is the distance from the specified side; the third parameter is the width or height of itself.
Example: Set the width and height to (100,30), the distance to the right of the parent UI is 0, and the distance to the bottom is 0.
RectTransform rt = GetComponent();
rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, 100);
rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, 30);
2. Layout components: Vertical Layout Group, Horizontal Layout Group and Grid Layout Group
Vertical Layout Group Vertical layout group:
Padding: the distance from the edge of the parent object (adjusted with the alignment)
Spacing: the distance between the child objects
Child Alignment: the
alignment Reverse Arrangeme: the reverse arrangement
Control Child Size: Whether to control the child layout elements Width and height
Use Child Scale: Whether to use the scaled size of the child element for layout
Child Force Expand: Whether to force the child layout element to expand to fill other available space.
Horizontal Layout Group Horizontal Layout Group usage is similar.
Grid Layout Group Grid Layout Group:
Constraint: Constrain the number of rows or columns
Usually used with the Content Size Fitter component to make the size of the parent element self-adaptive.