Unity UGUI的VerticalLayoutGroup（垂直布局）组件的介绍及使用 ...

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：创建一个垂直布局的面板

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class VerticalLayoutExample : MonoBehaviour
5. {
6.     public VerticalLayoutGroup verticalLayoutGroup;
8.     private void Start()
9.     {
10.         verticalLayoutGroup.spacing = 10f;
11.         verticalLayoutGroup.childForceExpandWidth = false;
12.         verticalLayoutGroup.childForceExpandHeight = false;
13.         verticalLayoutGroup.childControlHeight = true;
14.         verticalLayoutGroup.childAlignment = TextAnchor.UpperCenter;
15.     }
16. }

复制代码

操作步骤：

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

例子2：动态添加子对象

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class AddChildExample : MonoBehaviour
5. {
6.     public VerticalLayoutGroup verticalLayoutGroup;
7.     public GameObject childPrefab;
9.     private void Start()
10.     {
11.         for (int i = 0; i < 5; i++)
12.         {
13.             GameObject child = Instantiate(childPrefab, verticalLayoutGroup.transform);
14.             child.GetComponentInChildren<Text>().text = "Child " + (i + 1);
15.         }
16.     }
17. }

复制代码

操作步骤：

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

例子3：动态删除子对象

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class RemoveChildExample : MonoBehaviour
5. {
6.     public VerticalLayoutGroup verticalLayoutGroup;
8.     private void Start()
9.     {
10.         for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
11.         {
12.             Destroy(verticalLayoutGroup.transform.GetChild(i).gameObject);
13.         }
14.     }
15. }

复制代码

操作步骤：

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

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

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class ResizeChildExample : MonoBehaviour
5. {
6.     public VerticalLayoutGroup verticalLayoutGroup;
8.     private void Start()
9.     {
10.         for (int i = 0; i < verticalLayoutGroup.transform.childCount; i++)
11.         {
12.             RectTransform childRectTransform = verticalLayoutGroup.transform.GetChild(i).GetComponent<RectTransform>();
13.             childRectTransform.sizeDelta = new Vector2(childRectTransform.sizeDelta.x, 100f);
14.         }
15.     }
16. }

复制代码

操作步骤：

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

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

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class AlignChildExample : MonoBehaviour
5. {
6.     public VerticalLayoutGroup verticalLayoutGroup;
8.     private void Start()
9.     {
10.         verticalLayoutGroup.childAlignment = TextAnchor.MiddleCenter;
11.     }
12. }

复制代码

操作步骤：

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

注意事项

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

参考资料

• Unity官方文档：VerticalLayoutGroup
  
• Unity官方教程：Layout Groups
  

            本文作者：                            Blank                            
        本文链接：        
        版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
        声援博主：如果您觉得文章对您有帮助，可以点击文章右下角            【                推荐】                    一下。您的鼓励是博主的最大动力！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！