Introduction and use of LayoutRebuilder of Unity UGUI

Introduction and use of LayoutRebuilder of Unity UGUI

1. What is LayoutRebuilder?

LayoutRebuilder is a component in Unity UGUI, which is used to automatically rebuild the layout. It can automatically adjust the position and size of its child elements according to the changes of UI elements to maintain the consistency of the layout.

2. How LayoutRebuilder works

LayoutRebuilder traverses the sub-elements of the UI element, and calculates the position and size of the sub-elements according to the layout parameters and constraints of the sub-elements. Then, based on these calculations, it adjusts the position and size of child elements to keep the layout consistent.

3. Common properties of LayoutRebuilder

• transform: Gets or sets the Transform component of the UI element whose layout is to be reconstructed.
• layoutRebuildRect: Gets or sets the RectTransform component of the UI element whose layout is to be reconstructed.

4. Common functions of LayoutRebuilder

• ForceRebuildLayoutImmediate(): Forces an immediate rebuild of the layout.
• MarkLayoutForRebuild(): Marks the layout as requiring rebuild.

5. Complete sample code

Example 1: Automatically adjust the position and size of child elements

using UnityEngine;
using UnityEngine.UI;

public class Example1 : MonoBehaviour
{
    public LayoutGroup layoutGroup;

    private void Start()
    {
        // 在布局发生变化时，调用ForceRebuildLayoutImmediate()函数
        layoutGroup.transform.GetComponent<RectTransform>().ForceRebuildLayoutImmediate();
    }
}

Steps:

1. Attach the Example1 script to a UI element.
2. Assign the LayoutGroup component of the UI element whose layout is to be rebuilt to the layoutGroup variable.
3. Run the game, the layout will automatically adjust the position and size of the child elements.

Precautions:

• When the layout changes, you need to manually call the ForceRebuildLayoutImmediate() function.

Example 2: Marking a Layout as Requires Rebuild

using UnityEngine;
using UnityEngine.UI;

public class Example2 : MonoBehaviour
{
    public LayoutGroup layoutGroup;

    private void Start()
    {
        // 标记布局为需要重建
        layoutGroup.transform.GetComponent<RectTransform>().MarkLayoutForRebuild();
    }
}

Steps:

1. Attach the Example2 script to a UI element.
2. Assign the LayoutGroup component of the UI element whose layout is to be rebuilt to the layoutGroup variable.
3. Run the game, the layout will automatically adjust the position and size of the child elements.

Precautions:

• After marking a layout as needing rebuilding, the layout will be automatically rebuilt on the next frame.

Example 3: Get the calculation result of the layout

using UnityEngine;
using UnityEngine.UI;

public class Example3 : MonoBehaviour
{
    public LayoutGroup layoutGroup;

    private void Start()
    {
        // 获取布局的计算结果
        Rect layoutRect = layoutGroup.transform.GetComponent<RectTransform>().rect;
        Debug.Log("Layout Rect: " + layoutRect);
    }
}

Steps:

1. Attach the Example3 script to a UI element.
2. Assign the LayoutGroup component of the UI element whose layout calculation result is to be obtained to the layoutGroup variable.
3. Run the game, and the console will output the calculation results of the layout.

Precautions:

• Obtaining the calculation results of the layout needs to be done after the layout is rebuilt.

Example 4: Custom layout parameters

using UnityEngine;
using UnityEngine.UI;

public class Example4 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    public float spacing = 10f;

    private void Start()
    {
        // 自定义布局参数
        layoutGroup.spacing = spacing;
        layoutGroup.transform.GetComponent<RectTransform>().ForceRebuildLayoutImmediate();
    }
}

Steps:

1. Attach the Example4 script to a UI element.
2. Assign the LayoutGroup component of the UI element whose layout parameters are to be customized to the layoutGroup variable.
3. Set the spacing variable to the desired spacing.
4. Run the game, the layout will be adjusted according to the custom layout parameters.

Precautions:

• Custom layout parameters need to be done before layout rebuild.

Example 5: Rebuild layout after dynamically adding child elements

using UnityEngine;
using UnityEngine.UI;

public class Example5 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    public GameObject prefab;

    private void Start()
    {
        // 动态添加子元素
        GameObject newElement = Instantiate(prefab, layoutGroup.transform);
        newElement.transform.SetAsLastSibling();

        // 重建布局
        layoutGroup.transform.GetComponent<RectTransform>().ForceRebuildLayoutImmediate();
    }
}

Steps:

1. Attach the Example5 script to a UI element.
2. Assign the LayoutGroup component of the UI element to add child elements to the layoutGroup variable.
3. Assign the prefab of the child element to be dynamically added to the prefab variable.
4. Run the game, child elements will be dynamically added, and the layout will be adjusted automatically.

Precautions:

• After dynamically adding child elements, you need to manually call the ForceRebuildLayoutImmediate() function.

6. References

• Unity official documentation: LayoutRebuilder
• Unity official tutorial: Layout Components