当前位置:   article > 正文

Unity UGUI的VerticalLayoutGroup(垂直布局)组件的介绍及使用_unity vertical layout group

unity vertical layout group

Unity UGUI的VerticalLayoutGroup(垂直布局)组件的介绍及使用

1. 什么是VerticalLayoutGroup组件?

VerticalLayoutGroup是Unity UGUI中的一种布局组件,用于在垂直方向上自动排列子对象。它可以根据子对象的大小和布局设置,自动调整子对象的位置和大小,实现垂直布局效果。

2. VerticalLayoutGroup组件的工作原理

VerticalLayoutGroup组件通过以下步骤实现垂直布局:

  • 获取所有子对象的RectTransform组件。
  • 根据子对象的大小和布局设置,计算子对象的位置和大小。
  • 调整子对象的位置和大小,使其按照垂直方向上的布局要求进行排列。

3. VerticalLayoutGroup组件的常用属性

  • Padding:内边距,控制子对象与VerticalLayoutGroup之间的间距。
  • Spacing:子对象之间的间距。
  • Child Force Expand:子对象是否自动扩展以填充VerticalLayoutGroup的宽度。
  • Child Control Height:子对象是否自动调整高度以适应VerticalLayoutGroup的高度。
  • Child Alignment:子对象的对齐方式。

4. VerticalLayoutGroup组件的常用函数

  • CalculateLayoutInputHorizontal():计算垂直布局的水平方向上的布局要求。
  • CalculateLayoutInputVertical():计算垂直布局的垂直方向上的布局要求。
  • SetLayoutHorizontal():设置垂直布局的水平方向上的布局。
  • SetLayoutVertical():设置垂直布局的垂直方向上的布局。

5. 例子代码

例子1:创建一个垂直布局的面板

using UnityEngine;
using UnityEngine.UI;

public class VerticalLayoutExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        verticalLayoutGroup.spacing = 10f;
        verticalLayoutGroup.childForceExpandWidth = false;
        verticalLayoutGroup.childForceExpandHeight = false;
        verticalLayoutGroup.childControlHeight = true;
        verticalLayoutGroup.childAlignment = TextAnchor.UpperCenter;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

操作步骤:

  1. 创建一个空物体,并将VerticalLayoutGroup组件添加到该物体上。
  2. 将需要进行垂直布局的子对象添加到VerticalLayoutGroup物体下。
  3. 将VerticalLayoutExample脚本添加到VerticalLayoutGroup物体上。
  4. 在Inspector面板中,将VerticalLayoutGroup的spacing设置为10,childForceExpandWidth和childForceExpandHeight设置为false,childControlHeight设置为true,childAlignment设置为UpperCenter。

例子2:动态添加子对象

using UnityEngine;
using UnityEngine.UI;

public class AddChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    public GameObject childPrefab;

    private void Start()
    {
        for (int i = 0; i < 5; i++)
        {
            GameObject child = Instantiate(childPrefab, verticalLayoutGroup.transform);
            child.GetComponentInChildren<Text>().text = "Child " + (i + 1);
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

操作步骤:

  1. 创建一个空物体,并将VerticalLayoutGroup组件添加到该物体上。
  2. 创建一个子对象的预制体,并将其赋值给AddChildExample脚本的childPrefab变量。
  3. 将AddChildExample脚本添加到空物体上。
  4. 在Inspector面板中,将VerticalLayoutGroup的spacing和其他布局设置进行适当调整。

例子3:动态删除子对象

using UnityEngine;
using UnityEngine.UI;

public class RemoveChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
        {
            Destroy(verticalLayoutGroup.transform.GetChild(i).gameObject);
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

操作步骤:

  1. 创建一个空物体,并将VerticalLayoutGroup组件添加到该物体上。
  2. 将RemoveChildExample脚本添加到空物体上。
  3. 在Inspector面板中,将VerticalLayoutGroup的spacing和其他布局设置进行适当调整。
  4. 运行游戏,所有子对象将被删除。

例子4:动态调整子对象的大小

using UnityEngine;
using UnityEngine.UI;

public class ResizeChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
        {
            RectTransform childRectTransform = verticalLayoutGroup.transform.GetChild(i).GetComponent<RectTransform>();
            childRectTransform.sizeDelta = new Vector2(childRectTransform.sizeDelta.x, 100f);
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

操作步骤:

  1. 创建一个空物体,并将VerticalLayoutGroup组件添加到该物体上。
  2. 将ResizeChildExample脚本添加到空物体上。
  3. 在Inspector面板中,将VerticalLayoutGroup的spacing和其他布局设置进行适当调整。
  4. 运行游戏,所有子对象的高度将被调整为100。

例子5:动态调整子对象的对齐方式

using UnityEngine;
using UnityEngine.UI;

public class AlignChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;

    private void Start()
    {
        verticalLayoutGroup.childAlignment = TextAnchor.MiddleCenter;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

操作步骤:

  1. 创建一个空物体,并将VerticalLayoutGroup组件添加到该物体上。
  2. 将AlignChildExample脚本添加到空物体上。
  3. 在Inspector面板中,将VerticalLayoutGroup的spacing和其他布局设置进行适当调整。
  4. 运行游戏,所有子对象的对齐方式将被调整为MiddleCenter。

注意事项

  • VerticalLayoutGroup组件只能用于垂直布局,如果需要水平布局,请使用HorizontalLayoutGroup组件。
  • 在使用VerticalLayoutGroup组件时,确保子对象的RectTransform组件的锚点和位置设置正确,以便正确计算子对象的位置和大小。

参考资料

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号