SoFunction
Updated on 2025-03-07

Introduction and use of Unity UGUI LayoutRebuilder automatic reconstruction layout

Introduction and use of LayoutRebuilder of Unity UGUI

1. What is LayoutRebuilder?

LayoutRebuilder is a component in Unity UGUI for automatically rebuilding layouts. It can automatically adjust the position and size of its child elements according to changes in UI elements to maintain consistency in the layout.

2. How LayoutRebuilder works

LayoutRebuilder calculates the position and size of the child elements by traversing the child elements of the UI element and according to the layout parameters and constraints of the child elements. It then adjusts the position and size of the child elements based on these calculations to maintain consistency in the layout.

3. Common properties of LayoutRebuilder

  • transform: Gets or sets the Transform component of the UI element to rebuild the layout.
  • layoutRebuildRect: Get or set the RectTransform component of the UI element to rebuild the layout.

4. Common functions of LayoutRebuilder

  • ForceRebuildLayoutImmediate(): Forced to rebuild the layout immediately.
  • MarkLayoutForRebuild(): Tag layouts as needed to be rebuilt.

5. Complete example code

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

using UnityEngine;
using ;
public class Example1 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    private void Start()
    {
        // When the layout changes, call the ForceRebuildLayoutImmediate() function        <RectTransform>().ForceRebuildLayoutImmediate();
    }
}

Operation steps:

  • Mount the Example1 script onto a UI element.
  • Assign the LayoutGroup component of the UI element to the layout to be rebuilt to the layoutGroup variable.
  • Run the game, and the layout will automatically adjust the position and size of the child elements.

Notes:

  • When the layout changes, the ForceRebuildLayoutImmediate() function needs to be called manually.

Example 2: Tagged layout as needed to rebuild

using UnityEngine;
using ;
public class Example2 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    private void Start()
    {
        // Tag layout as needed to be rebuilt        <RectTransform>().MarkLayoutForRebuild();
    }
}

Operation steps:

  • Mount the Example2 script onto a UI element.
  • Assign the LayoutGroup component of the UI element to the layout to be rebuilt to the layoutGroup variable.
  • Run the game, and the layout will automatically adjust the position and size of the child elements.

Notes:

  • After the tag layout is required to be rebuilt, the layout will be automatically rebuilt in the next frame.

Example 3: Get the calculation result of the layout

using UnityEngine;
using ;
public class Example3 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    private void Start()
    {
        // Get the calculation result of the layout        Rect layoutRect = <RectTransform>().rect;
        ("Layout Rect: " + layoutRect);
    }
}

Operation steps:

  • Mount the Example3 script onto a UI element.
  • Assign the LayoutGroup component of the UI element to obtain the layout calculation result to the layoutGroup variable.
  • Run the game and the console will output the layout calculation results.

Notes:

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

Example 4: Custom layout parameters

using UnityEngine;
using ;
public class Example4 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    public float spacing = 10f;
    private void Start()
    {
        // Custom layout parameters         = spacing;
        <RectTransform>().ForceRebuildLayoutImmediate();
    }
}

Operation steps:

  • Mount the Example4 script onto a UI element.
  • Assign the LayoutGroup component of the UI element to the layoutGroup variable to the layoutGroup variable.
  • Set the spacing variable to the desired spacing.
  • When running the game, the layout will be adjusted according to the customized layout parameters.

Notes:

  • Custom layout parameters need to be performed before layout reconstruction.

Example 5: Rebuild the layout after dynamically adding child elements

using UnityEngine;
using ;
public class Example5 : MonoBehaviour
{
    public LayoutGroup layoutGroup;
    public GameObject prefab;
    private void Start()
    {
        // Dynamically add child elements        GameObject newElement = Instantiate(prefab, );
        ();
        // Rebuild the layout        <RectTransform>().ForceRebuildLayoutImmediate();
    }
}

Operation steps:

  • Mount the Example5 script onto a UI element.
  • Assign the LayoutGroup component of the UI element to which the child element is added to the layoutGroup variable.
  • Assign the prefab body of the child elements to be added dynamically to the prefab variable.
  • When running the game, the child elements will be added dynamically and the layout will be automatically adjusted.

Notes:

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

References

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

The above is the detailed introduction and use of the Unity UGUI LayoutRebuilder automatic reconstruction layout. For more information about Unity UGUI LayoutRebuilder, please follow my other related articles!