Einführung und Verwendung der GridLayoutGroup-Komponente (Rasterlayout) von Unity UGUI

1. Was ist die GridLayoutGroup-Komponente?

GridLayoutGroup ist eine Layoutkomponente in Unity UGUI, die zum Erstellen eines Rasterlayouts in der UI-Schnittstelle verwendet wird. Es kann Unterobjekte automatisch entsprechend der angegebenen Anzahl von Zeilen, Spalten und Abständen anordnen, sodass sie in Form eines Rasters angeordnet sind.

2. Wie GridLayoutGroup funktioniert

Die GridLayoutGroup-Komponente ordnet die untergeordneten Objekte entsprechend der angegebenen Anzahl von Zeilen und Spalten von links nach rechts und von oben nach unten an. Es kann auch den Abstand festlegen und so den Abstand zwischen Unterobjekten steuern. Wenn die Anzahl der Unterobjekte die Kapazität des Rasters überschreitet, erstellt GridLayoutGroup automatisch neue Zeilen oder Spalten, um redundante Unterobjekte aufzunehmen.

3. Gemeinsame Attribute von GridLayoutGroup

Zellengröße: Geben Sie die Größe jeder Zelle an.
Abstand: Gibt den Abstand zwischen Unterobjekten an.
Startecke: Gibt die Startecke des Rasters an.
Startachse: Gibt die Startachse des Rasters an.
Einschränkung: Geben Sie den Einschränkungsmodus des Rasters an, der zeilenweise oder spaltenweise sein kann.
Einschränkungsanzahl: Geben Sie die maximale Anzahl von Unterobjekten pro Zeile oder Spalte an.

4. Gemeinsame Funktionen von GridLayoutGroup

CalculateLayoutInputHorizontal(): Berechnen Sie das Layout in horizontaler Richtung.
CalculateLayoutInputVertical(): Berechnen Sie das Layout in vertikaler Richtung.
SetLayoutHorizontal(): Legt das Layout in horizontaler Richtung fest.
SetLayoutVertical(): Legt das Layout in vertikaler Richtung fest.

5. Beispielcode

Beispiel 1: Erstellen Sie ein 2x2-Rasterlayout

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 2;

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das GridLayoutExample-Skript daran an.
Ziehen Sie im Inspektorfenster die Komponente „GridLayoutGroup“ auf die Variable „gridLayout“.
Erstellen Sie ein Prefab und ziehen Sie es auf die Prefab-Variable.
Führen Sie das Spiel aus. Sie können sehen, dass die Fertighäuser in einem 2x2-Rasterlayout angeordnet sind.

Vorsichtsmaßnahmen:

Das Fertigteil muss im Voraus erstellt und in die Fertigteilvariable gezogen werden.

Beispiel 2: Erstellen Sie ein 3x3-Rasterlayout mit Abständen

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 3;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 9; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das GridLayoutExample-Skript daran an.
Ziehen Sie im Inspektorfenster die Komponente „GridLayoutGroup“ auf die Variable „gridLayout“.
Erstellen Sie ein Prefab und ziehen Sie es auf die Prefab-Variable.
Führen Sie das Spiel aus. Sie können sehen, dass die Fertighäuser in einem 3x3-Rasterlayout mit Abständen angeordnet sind.

Vorsichtsmaßnahmen:

Das Fertigteil muss im Voraus erstellt und in die Fertigteilvariable gezogen werden.

Beispiel 3: Erstellen eines adaptiven Rasterlayouts

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.Flexible;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 10; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das GridLayoutExample-Skript daran an.
Ziehen Sie im Inspektorfenster die Komponente „GridLayoutGroup“ auf die Variable „gridLayout“.
Erstellen Sie ein Prefab und ziehen Sie es auf die Prefab-Variable.
Wenn Sie das Spiel ausführen, können Sie sehen, dass die Fertighäuser in einem adaptiven Rasterlayout mit Abständen angeordnet sind.

Vorsichtsmaßnahmen:

Das Fertigteil muss im Voraus erstellt und in die Fertigteilvariable gezogen werden.

Beispiel 4: Ändern Sie dynamisch die Anzahl der Zeilen und Spalten des Rasterlayouts

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedRowCount;
        gridLayout.constraintCount = 2;

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }

        Invoke("ChangeConstraintCount", 3f);
    }

    void ChangeConstraintCount()
    {
        gridLayout.constraintCount = 3;
    }
}

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das GridLayoutExample-Skript daran an.
Ziehen Sie im Inspektorfenster die Komponente „GridLayoutGroup“ auf die Variable „gridLayout“.
Erstellen Sie ein Prefab und ziehen Sie es auf die Prefab-Variable.
Führen Sie das Spiel aus. Sie können sehen, dass die Fertighäuser in einem 2x2-Rasterlayout angeordnet sind.
Nach 3 Sekunden ändert sich die Anzahl der Spalten im Rasterlayout auf 3 und die Fertighäuser werden in einem 3x2-Rasterlayout angeordnet.

Vorsichtsmaßnahmen:

Das Fertigteil muss im Voraus erstellt und in die Fertigteilvariable gezogen werden.

Beispiel 5: Ändern Sie den Abstand des Rasterlayouts dynamisch

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 2;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }

        Invoke("ChangeSpacing", 3f);
    }

    void ChangeSpacing()
    {
        gridLayout.spacing = new Vector2(20, 20);
    }
}

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das GridLayoutExample-Skript daran an.
Ziehen Sie im Inspektorfenster die Komponente „GridLayoutGroup“ auf die Variable „gridLayout“.
Erstellen Sie ein Prefab und ziehen Sie es auf die Prefab-Variable.
Führen Sie das Spiel aus. Sie können sehen, dass die Fertighäuser in einem 2x2-Rasterlayout mit Abständen angeordnet sind.
Nach 3 Sekunden ändert sich der Abstand des Rasterlayouts auf (20, 20) und die Fertighäuser werden in einem 2x2-Rasterlayout mit größerem Abstand angeordnet.

Vorsichtsmaßnahmen:

Das Fertigteil muss im Voraus erstellt und in die Fertigteilvariable gezogen werden.