Layout: used to manage and control the arrangement and automatic adjustment of UI elements
1. Aspect Ratio Fitter: used to automatically adjust the size of UI elements according to the aspect ratio
Aspect Mode: Used to define the behavior of aspect ratio adaptation. The Aspect Mode property has the following options:
(1) None (none): Aspect Ratio Fitter will not adjust the size of UI elements, and the aspect ratio will not be maintained.
(2) Width Controls Height (width control height): Aspect Ratio Fitter will maintain the aspect ratio by changing the height of the UI elements. Changes in width will control changes in height to maintain the specified aspect ratio.
(3) Height Controls Width (height control width): Aspect Ratio Fitter will maintain the aspect ratio by changing the width of the UI elements. The change in height will control the change in width to maintain the specified aspect ratio.
(4) Fit In Parent (adapt to the parent): Aspect Ratio Fitter will automatically adjust the size of the UI element so that it will fully adapt to its parent container. This will maintain the original aspect ratio and ensure that the UI element does not exceed the visible area of its parent container.
(5) Envelope Parent (surrounding the parent): Aspect Ratio Fitter will automatically adjust the size of the UI elements to completely surround the parent container. This will maintain the original aspect ratio and ensure that the UI element fills the visible area of its parent container.
2. Canvas: a container for rendering UI elements
Render Mode: Defines how the Canvas is rendered. Divided into three modes:
(1) Screen Space - Overlay (screen space - overlay): Canvas is directly rendered on the screen and does not change with the camera movement.
Pixel Perfect: When enabled, the canvas will snap to the pixel grid, ensuring elements appear without distortion. This is useful for 2D games or UIs that require pixel-accurate rendering.
Sort Order: Sets the drawing order of the canvas. By changing the Sort Order value, you can control the hierarchy of the canvas above or below other objects in the scene.
Target Display: Specifies on which display the canvas should be rendered. If your game supports multiple monitors, use this property to choose which monitor to render the canvas on. (You can set different monitor displays in the Game view)
(2) Screen Space - Camera (screen space - camera): Canvas changes with the camera movement, using Render Camera for projection.
(Pixel Perfect): When enabled, the canvas will snap to the pixel grid to keep elements displayed without distortion. Same as Screen Space - Overlay rendering mode, this is very useful for 2D games or UIs that require pixel-accurate rendering.
(Render Camera): Specifies the camera used to render the canvas. You can choose a camera from your project as the rendering camera for the canvas. The canvas will be rendered in that camera's view.
(Layer Order): Set the layer order of the canvas in the camera view. This affects the drawing order of canvas elements. Elements with lower Order in Layer values will be rendered before elements with higher Order in Layer values.
(3) World Space (world space): Canvas exists as a 3D object, it moves with the camera and the object, and can also be placed on the surface of the 3D object.
Event Camera: Specifies the camera used to handle UI events (such as clicks, hovers, etc.). When the user interacts with UI elements on the canvas, the specified event camera will be used to respond to these events.
Sorting Layer (sorting layer): defines the rendering order of the Canvas. Canvas can be assigned to different ordering layers to control the rendering order between it and other UI elements.
Order in Layer: Defines the rendering order of Canvas in its sorting layer. Canvases with larger values will be rendered before Canvases with smaller values.
Additional Shader Channels: Defines any additional shader channels associated with the Canvas. These channels can be used to pass other information during Canvas rendering.
3. Canvas Group: used to control the visibility and interactivity of UI elements on Canvas
Alpha (transparency): Specifies the transparency of the UI elements contained in the Canvas Group. The value ranges from 0 (fully transparent) to 1 (fully opaque).
Interactable: Defines whether UI elements can be interacted with by user input. If set to false, the element will not receive any interaction events, such as mouse clicks or touches.
Blocks Raycasts: Determines whether UI elements block raycasts. If set to true, the element will prevent the ray from interacting with other objects below it, but only with the element itself.
Ignore Parent Groups (ignore the parent group): Determines whether the UI element will ignore the transparency and interactivity settings in its parent Canvas Group. If set to true, the UI element will ignore the transparency and interactivity settings of its parent Canvas Group and use its own independent settings.
4. Canvas Scaler: Used to control the scaling and adaptation of UI elements on Canvas. Dynamically calculate the size and scaling of UI elements according to the actual resolution of the screen and the reference resolution. It converts game units in the game world to pixel units on the screen, thus ensuring consistent performance of UI elements at different resolutions.
Dynamic Pixels Per Unit: Defines the scaling of the user interface in pixel units. This attribute specifies the screen pixel size corresponding to each game world unit, and the initial value is 1. By adjusting Dynamic Pixels Per Unit, you can control the display size of UI elements.
Reference Pixels Per Unit: Defines the reference pixel unit at a specific resolution. This property specifies the reference pixel size for each game world unit. It is used to convert the dimensions of UI elements from the reference resolution to the actual screen resolution.
5. Content Size Fitter: Used to adjust the size of UI elements according to the content of their child objects
Horizontal Fit: Defines how a UI element fits its content horizontally. It has the following options:
(1) Unconstrained (unrestricted): The width of the UI element will be adjusted freely according to its content, which can exceed the scope of the parent container.
(2) Preferred Size: The width of the UI element will be adjusted according to the preferred size of its content, which means it will automatically expand or shrink according to the minimum size of the content.
(3) Min Size (minimum size): The width of the UI element will be adjusted according to its content and the minimum size, which will limit the minimum width of the UI element.
Vertical Fit: Defines how the UI element fits its content vertically. It has the following options:
(1) Unconstrained (unrestricted): The height of the UI element will be adjusted freely according to its content, which can exceed the scope of the parent container.
(2) Preferred Size (preferred size): The height of the UI element will be adjusted according to the preferred size of its content, which means that it will automatically expand or shrink according to the minimum size of the content.
(3) Min Size (minimum size): The height of the UI element will be adjusted according to its content and the minimum size, which will limit the minimum height of the UI element.
6. Grid Layout Group: Used to arrange and control the position of sub-objects in the layout
Padding (inner margin): Defines the edge inner margin of the sub-objects in the GridLayout Group layout. It determines the space between child objects and the edges of the GridLayout Group.
Cell Size: defines the size of each cell. In the GridLayout Group layout, child objects will be arranged according to this size.
Spacing: Defines the spacing between sub-objects. It controls the spacing of child objects in the GridLayout Group layout.
Start Corner (starting corner): defines the starting corner of the GridLayout Group layout. You can choose the top left, bottom left, top right, or bottom right as the starting position.
Start Axis (starting axis): defines the starting axis direction of the GridLayout Group layout. Either horizontal or vertical axis can be selected.
Child Alignment: Defines the alignment of child objects within each cell. You can choose top-left, center, or bottom-right.
Constraint (Constraint): Defines the constraints in the GridLayout Group layout. It can be Flexible (adaptive), indicating that the child object can be resized according to the needs of the layout; it can also be Fixed Column Count (fixed number of columns) or Fixed Row Count (fixed number of rows), indicating that the layout will have a fixed number of columns or the number of rows, cannot be adjusted automatically.
Seven, Horizontal Layout Group: used to arrange sub-objects in the horizontal direction
Padding: Defines the edge padding of sub-objects in a horizontal layout. It determines the space between child objects and the edges of the layout.
Spacing: Defines the horizontal spacing between sub-objects. It controls the spacing of sub-objects in the horizontal layout.
Child Alignment: Defines the alignment of child objects in a horizontal layout.
Reverse Arrangement: Determines whether to arrange sub-objects in reverse order. If on, sub-objects flow from right to left instead of left to right.
Control Child Size (control child object size): defines the size control method of child objects in the horizontal layout.
Use Child Scale: Determines whether to apply the child object's scale value. If this option is enabled, the scale value of sub-objects will affect the horizontal layout.
Child Force Expand: Defines whether child objects should be forced to expand to fill the entire space in a horizontal layout. If enabled, sub-objects will expand as far as possible to fill the remaining space.
8. Layout Element: Used to control the size constraints and priorities of elements in the UI layout
Ignore Layout: Defines whether the element should ignore the calculations of the layout system. If this option is enabled, all Layout Element component settings will be ignored and the element will be laid out freely.
Min Width (minimum width): defines the minimum width of the element. The layout system will use this value to calculate the size of the element.
Min Height (minimum height): defines the minimum height of the element. The layout system will use this value to calculate the size of the element.
Preferred Width (preferred width): defines the preferred width of the element. The layout system will try to satisfy this value to determine the size of the element.
Preferred Height (preferred height): Defines the preferred height of the element. The layout system will try to satisfy this value to determine the size of the element.
Flexible Width (scalable width): defines the width range that the element can expand. The layout system can adjust the size of the element according to this value.
Flexible Height (scalable height): defines the height range that the element can expand. The layout system can adjust the size of the element according to this value.
Layout Priority (layout priority): Defines the priority order of elements in the layout system. Higher priority will be prioritized for layout.
Nine, Rect Transform: used to control the position, size, rotation and scaling of UI elements
Pos X (X position): defines the position of the UI element in the X-axis direction.
Pos Y (Y position): defines the position of the UI element in the Y axis direction.
Pos Z (Z position): defines the position of the UI element in the Z axis direction. In 2D UI, it is usually set to 0.
Width (width): defines the width of the UI element.
Height (height): defines the height of the UI element.
Anchors (anchor): Defines the anchor point position of the UI element, which determines how the UI element is positioned in the parent container.
Min (minimum anchor point): defines the minimum position of the UI element relative to the anchor point. It is used to determine the stretching and shrinking behavior of UI elements.
Max (maximum anchor point): defines the maximum position of the UI element relative to the anchor point. It is used to determine the stretching and shrinking behavior of UI elements.
Pivot (center point): defines the center point position of the UI element. Used to determine the rotation and scaling behavior of UI elements.
Rotation: defines the rotation angle of the UI element.
Scale (zoom): defines the zoom ratio of UI elements.
10. Vertical Layout Group: Used to arrange sub-objects in the vertical direction
Attribute information can refer to the Horizontal Layout Group component