Unity UGUI的自动布局-LayoutGroup(水平布局)组件

Horizontal Layout Group | Unity UI | 1.0.0

1. 什么是HorizontalLayoutGroup组件?

HorizontalLayoutGroup是Unity UGUI中的一种布局组件,用于在水平方向上对子物体进行排列和布局。它可以根据一定的规则自动调整子物体的位置和大小,使它们在水平方向上均匀分布。

Property:Function:
PaddingThe padding inside the edges of the layout group.
SpacingThe spacing between the layout elements.
Child AlignmentThe alignment to use for the child layout elements if they don't fill out all the available space.
Control Child SizeWhether the Layout Group controls the width and height of its child layout elements.
Use Child ScaleWhether the Layout Group considers the scale of its child layout elements when sizing and laying out elements.

Width and Height correspond to the Scale > X and Scale > Y values in each child layout element's Rect Transform component.

You cannot animate the Scale values using the Animator Controller
Child Force ExpandWhether to force the child layout elements to expand to fill additional available space.

2. HorizontalLayoutGroup的工作原理

HorizontalLayoutGroup组件通过以下步骤实现水平布局:

  • 获取所有子物体的RectTransform组件。
  • 根据子物体的大小和布局规则,计算出每个子物体的位置和大小。
  • 调整子物体的位置和大小,使它们在水平方向上均匀分布。

3. HorizontalLayoutGroup的常用属性

  • Spacing:子物体之间的间距。
  • ChildForceExpandWidth:是否强制子物体扩展宽度以填充整个水平布局。
  • ChildForceExpandHeight:是否强制子物体扩展高度以填充整个水平布局。
  • ChildControlWidth:是否控制子物体的宽度。
  • ChildControlHeight:是否控制子物体的高度。

4. HorizontalLayoutGroup的常用函数

  • CalculateLayoutInputHorizontal():计算水平布局的输入。
  • CalculateLayoutInputVertical():计算垂直布局的输入。
  • SetLayoutHorizontal():设置水平布局。
  • SetLayoutVertical():设置垂直布局。

5. 例子代码

例子1:创建一个水平布局,并添加三个子物体

using UnityEngine;
using UnityEngine.UI;public class Example : MonoBehaviour
{public HorizontalLayoutGroup layoutGroup;public GameObject childPrefab;void Start(){for (int i = 0; i < 3; i++){GameObject child = Instantiate(childPrefab, layoutGroup.transform);child.GetComponent<Text>().text = "Child " + (i + 1);}}
}

操作步骤:

  1. 创建一个空物体,并添加HorizontalLayoutGroup组件。
  2. 创建一个子物体预制体,包含一个Text组件。
  3. 将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
  4. 运行游戏,可以看到三个子物体在水平方向上均匀分布。

例子2:设置子物体之间的间距

using UnityEngine;
using UnityEngine.UI;public class Example : MonoBehaviour
{public HorizontalLayoutGroup layoutGroup;public GameObject childPrefab;void Start(){layoutGroup.spacing = 20f;for (int i = 0; i < 3; i++){GameObject child = Instantiate(childPrefab, layoutGroup.transform);child.GetComponent<Text>().text = "Child " + (i + 1);}}
}

操作步骤:

  1. 创建一个空物体,并添加HorizontalLayoutGroup组件。
  2. 创建一个子物体预制体,包含一个Text组件。
  3. 将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
  4. 将layoutGroup的Spacing属性设置为20。
  5. 运行游戏,可以看到子物体之间的间距变为20。

例子3:强制子物体扩展宽度以填充整个水平布局

using UnityEngine;
using UnityEngine.UI;public class Example : MonoBehaviour
{public HorizontalLayoutGroup layoutGroup;public GameObject childPrefab;void Start(){layoutGroup.childForceExpandWidth = true;for (int i = 0; i < 3; i++){GameObject child = Instantiate(childPrefab, layoutGroup.transform);child.GetComponent<Text>().text = "Child " + (i + 1);}}
}

操作步骤:

  1. 创建一个空物体,并添加HorizontalLayoutGroup组件。
  2. 创建一个子物体预制体,包含一个Text组件。
  3. 将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
  4. 将layoutGroup的Child Force Expand Width属性设置为true。
  5. 运行游戏,可以看到子物体的宽度被扩展以填充整个水平布局。

例子4:控制子物体的宽度和高度

using UnityEngine;
using UnityEngine.UI;public class Example : MonoBehaviour
{public HorizontalLayoutGroup layoutGroup;public GameObject childPrefab;void Start(){layoutGroup.childControlWidth = false;layoutGroup.childControlHeight = false;for (int i = 0; i < 3; i++){GameObject child = Instantiate(childPrefab, layoutGroup.transform);child.GetComponent<Text>().text = "Child " + (i + 1);}}
}

操作步骤:

  1. 创建一个空物体,并添加HorizontalLayoutGroup组件。
  2. 创建一个子物体预制体,包含一个Text组件。
  3. 将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
  4. 将layoutGroup的Child Control Width和Child Control Height属性都设置为false。
  5. 运行游戏,可以看到子物体的宽度和高度不受控制,保持原始大小。

例子5:自定义布局规则

using UnityEngine;
using UnityEngine.UI;public class Example : MonoBehaviour
{public HorizontalLayoutGroup layoutGroup;public GameObject childPrefab;void Start(){layoutGroup.childAlignment = TextAnchor.MiddleCenter;for (int i = 0; i < 3; i++){GameObject child = Instantiate(childPrefab, layoutGroup.transform);child.GetComponent<Text>().text = "Child " + (i + 1);}}
}

操作步骤:

  1. 创建一个空物体,并添加HorizontalLayoutGroup组件。
  2. 创建一个子物体预制体,包含一个Text组件。
  3. 将子物体预制体拖拽到layoutGroup的Child Prefab属性中。
  4. 将layoutGroup的Child Alignment属性设置为Middle Center。
  5. 运行游戏,可以看到子物体在水平方向上居中对齐。

注意事项

  • HorizontalLayoutGroup组件只能用于水平布局,如果需要垂直布局,可以使用VerticalLayoutGroup组件。
  • 子物体的RectTransform组件的锚点和位置会影响布局效果,需要根据实际需求进行调整。

参考资料

  • Unity官方文档 - HorizontalLayoutGroup



作者:AlianBlank
链接:https://www.jianshu.com/p/c5cdb16a7562
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/218168.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

⑧【HyperLoglog】Redis数据类型:HyperLoglog [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis HyperLoglog ⑧Redis HyperLoglog基本操…

03_MySQL基本SQL语句讲解

#课程目标 能够创建、删除数据表能够对表里的数据记录进行增加、删除、修改、查询操作能够创建、删除用户能够给用户授权并回收权限了解delete和truncate语句的区别 #一、数据库基本操作 ##1、查看数据库相关信息 mysql> show databases; 查看所有数据库 mysql>…

基于单片机压力传感器MPX4115检测-报警系统proteus仿真+源程序

一、系统方案 1、本设计采用这51单片机作为主控器。 2、MPX4115采集压力值、DS18B20采集温度值送到液晶1602显示。 3、按键设置报警值。 4、蜂鸣器报警。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /*********************************…

LED面板显示屏驱动芯片

一、基本概述 TM1638是一种带键盘扫描接口的LED&#xff08;发光二极管显示器&#xff09;驱动控制专用IC,内部集成有MCU数字接口、数据锁存器、LED驱动、键盘扫描等电路。本产品质量可靠、稳定性好、抗干扰能力强。 二、主要应用场合 主要适用于家电设备(智能热水器、微波炉…

postman自动化运行接口测试用例

做过接口测试的人&#xff0c;应该都知道postman &#xff0c;我们在日常的时候都可以利用postman做接口测试&#xff0c;我们可以把接口的case保存下来在collection里面&#xff0c;那么可能会有这样的需求&#xff0c;我们怎么把collection的用例放到jenkins中定时执行呢&…

【数据结构实验】排序(一)冒泡排序改进算法 Bubble及其性能分析

文章目录 1. 引言2. 冒泡排序算法原理2.1 传统冒泡排序2.2 改进的冒泡排序 3. 实验内容3.1 实验题目&#xff08;一&#xff09;输入要求&#xff08;二&#xff09;输出要求 3.2 算法实现 4. 实验结果5. 实验结论 1. 引言 排序算法是计算机科学中一个重要而基础的研究领域&…

模拟退火算法应用——求解二元函数的最小值(极小值)

仅作自己学习使用 一、问题 二、代码 clear clcT1 cputime; xmax 5; xmin -5; ymax 5; ymin -5; L 20; % 马尔科夫链长度 dt 0.998; % 降温系数 S 0.02; % 步长因子 T 200; % 初始温度 TZ 1e-8; % 容差 Tmin 0.01;% 最低温度 P 0; % Metropolis接受…

MATLAB 之 M 文件和程序控制结构(顺序、选择、循环)

文章目录 一、M 文件1. M 文件的建立与打开1.1 建立新的 M 文件1.2 打开已有的 M 文件 2. M 文件的分类 二、 程序控制之顺序结构1. 数据的输入2. 数据的输出3. 程序的暂停 三、程序控制之选择结构1. if 语句2. switch 语句3. try 语句 四、程序控制之循环结构1. for 语句2. wh…

LeetCode78.子集

这道题如果用暴力法几乎是不可能解出来的&#xff0c;因为情况太复杂了&#xff0c;但是一旦用上递归回溯就会轻松很多&#xff0c;先上代码&#xff1a; class Solution {List<List<Integer>> result new ArrayList<List<Integer>>();List<Integ…

mysql多表重复数据只保留一行的思路

一、问题描述 假设有3个表&#xff0c;test_a&#xff0c;test_b&#xff0c;test_c&#xff1b; test_a和test_b中有些重复数据&#xff1b; 现在要把这2个表的数据同步到表c&#xff0c;但是重复数据只保留1行。 样例如下&#xff1a; 具体要求如下&#xff1a; 1.tes…

人工智能|机器学习——循环神经网络的简洁实现

循环神经网络的简洁实现 如何使用深度学习框架的高级API提供的函数更有效地实现相同的语言模型。 我们仍然从读取时光机器数据集开始。 import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2lbatch_size, num_steps 32, 35 t…

2023年最新IntelliJ IDEA下载安装以及Java环境搭建教程(含Java入门教程)

文章目录 写在前面Java简介IntelliJ IDEA简介IntelliJ IDEA下载安装JDK简介JDK下载教程 Java入门IntelliJ IDEA使用教程 写在后面 写在前面 2023年最新IntelliJ IDEA下载安装教程&#xff0c;内含JAVA环境搭建教程&#xff0c;一起来看看吧&#xff01; Java简介 Java是一门…