Unity UGUI的HorizontalLayoutGroup(水平布局)组件

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.mzph.cn/news/165859.shtml

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

相关文章

Shell脚本:Linux Shell脚本学习指南(第二部分Shell编程)二

第二部分&#xff1a;Shell编程&#xff08;二&#xff09; 十一、Shell数组&#xff1a;Shell数组定义以及获取数组元素 和其他编程语言一样&#xff0c;Shell 也支持数组。数组&#xff08;Array&#xff09;是若干数据的集合&#xff0c;其中的每一份数据都称为元素&#…

Navicat 技术指引 | GaussDB服务器对象的创建/设计(编辑)

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…

【华为OD题库-034】字符串化繁为简-java

题目 给定一个输入字符串&#xff0c;字符串只可能由英文字母(a ~ z、A ~ Z)和左右小括号()组成。当字符里存在小括号时&#xff0c;小括号是成对的&#xff0c;可以有一个或多个小括号对&#xff0c;小括号对不会嵌套&#xff0c;小括号对内可以包含1个或多个英文字母也可以不…

Jenkins Ansible 参数构建

首先在Jenkins中创建自由项目 在web端配置完成后在另一台机子上下载nginx 在gitlab端创建项目并创建文件配置代码 在有Jenkins的机器上下载Ansible [rootslave1 ~]# yum -y install epel-release [rootslave1 ~]# yum -y install ansible再进入下载nginx机器中克隆gitlab项目…

Android 框架层AIDL 添加接口

文章目录 AIDL的原理构建AIDL的流程往冻结的AIDL中加接口 AIDL的原理 可以利用ALDL定义客户端与服务均认可的编程接口&#xff0c;以便二者使用进程间通信 (IPC) 进行相互通信。在 Android 中&#xff0c;一个进程通常无法访问另一个进程的内存。因此&#xff0c;为进行通信&a…

卷积神经网络(AlexNet)鸟类识别

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 可视化数据3. 再次检查数据4. 配置数据集 三、AlexNet (8层&#xff09;介绍四、构建AlexNet (8层&#xff09;网络模型五、…

微信小程序image组件图片设置最大宽度 宽高自适应

问题描述&#xff1a;在使用微信小程序image组件的时候&#xff0c;在不确定图片宽高情况下 想给一个最大宽度让图片自适应&#xff0c;按比例&#xff0c;image的widthfiex和heightFiex并不能满足&#xff08;只指定最大宽/高并不会生效&#xff09; 问题解决&#xff1a;使用…

居家适老化设计第二十九条---卫生间之花洒

无电源 灯光显示 无障碍扶手型花洒 以上产品图片均来源于淘宝 侵权联系删除 居家适老化卫生间的花洒通常具有以下特点和功能&#xff1a;1. 高度可调节&#xff1a;适老化卫生间花洒可通过调节高度&#xff0c;满足不同身高的老年人使用需求&#xff0c;避免弯腰或过高伸展造…

【开源】基于Vue.js的固始鹅块销售系统

项目编号&#xff1a; S 060 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S060&#xff0c;文末获取源码。} 项目编号&#xff1a;S060&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…

qgis添加xyz栅格瓦片

方式1&#xff1a;手动一个个添加 左侧浏览器-XYZ Tiles-右键-新建连接 例如添加高德瓦片地址 https://wprd01.is.autonavi.com/appmaptile?langzh_cn&size1&style7&x{x}&y{y}&z{z} 双击即可呈现 收集到的一些图源&#xff0c;仅供参考&#xff0c;其中一…

【C++学习手札】模拟实现list

​ &#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;リナリア—まるりとりゅうが 0:36━━━━━━️&#x1f49f;──────── 3:51 &#x1f504; ◀️ ⏸ ▶️…

聊聊httpclient的staleConnectionCheckEnabled

序 本文主要研究一下httpclient的staleConnectionCheckEnabled staleConnectionCheckEnabled org/apache/http/client/config/RequestConfig.java public class RequestConfig implements Cloneable {public static final RequestConfig DEFAULT new Builder().build();pr…

【ARM 嵌入式 编译 Makefile 系列 18 -- Makefile 中的 export 命令详细介绍】

文章目录 Makefile 中的 export 命令详细介绍Makefile 使用 export导出与未导出变量的区别示例&#xff1a;导出变量以供子 Makefile 使用 Makefile 中的 export 命令详细介绍 在 Makefile 中&#xff0c;export 命令用于将变量从 Makefile 导出到由 Makefile 启动的子进程的环…

qgis添加wms服务

例如添加geoserver的wms服务 左右浏览器-WMS/WMTS-右键-新建连接 URL添加geoserver的wms地址 http://{ip}:{port}/geoserver/{workspace}/wms 展开wms目录&#xff0c;双击相应图层即可打开

Spark---基于Yarn模式提交任务

Yarn模式两种提交任务方式 一、yarn-client提交任务方式 1、提交命令 ./spark-submit --master yarn --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master yarn–client --class org.apache.s…

三菱PLC应用[集锦]

三菱PLC应用[集锦] 如何判断用PNP还是NPN的个人工作心得 10&#xff5e;30VDC接近开关与PLC连接时&#xff0c;如何判断用PNP还是NPN的个人工作心得: 对于PLC的开关量输入回路。我个人感觉日本三菱的要好得多&#xff0c;甚至比西门子等赫赫大名的PLC都要实用和可靠&#xff01…

vulnhub4

靶机地址: https://download.vulnhub.com/admx/AdmX_new.7z 信息收集 fscan 扫一下 ┌──(kali㉿kali)-[~/Desktop/Tools/fscan] └─$ ./fscan_amd64 -h 192.168.120.138 ___ _ / _ \ ___ ___ _ __ __ _ ___| | __ / /_\/____/ __|/ …

LeetCode | 622. 设计循环队列

LeetCode | 622. 设计循环队列 OJ链接 思路&#xff1a; 我们这里有一个思路&#xff1a; 插入数据&#xff0c;bank往后走 删除数据&#xff0c;front往前走 再插入数据&#xff0c;就循环了 那上面这个方法可行吗&#xff1f; 怎么判断满&#xff0c;怎么判断空&#xff1…

模电知识点总结(二)二极管

系列文章目录 文章目录 系列文章目录二极管二极管电路分析方法理想模型恒压降模型折线模型小信号模型高频/开关 二极管应用整流限幅/钳位开关齐纳二极管变容二极管肖特基二极管光电器件光电二极管发光二极管激光二极管太阳能电池 二极管 硅二极管&#xff1a;死区电压&#xf…

今年注册电气工程师考试乱象及就业前景分析

1、注册电气工程师挂靠价格 # 2011年以前约为5万一年&#xff0c;2011年开始强制实施注册电气执业制度&#xff0c;证书挂靠价格开始了飞涨&#xff0c;2013年达到巅峰&#xff0c;供配电15万一年&#xff0c;发输变电20-25万一年&#xff0c;这哪里是证书&#xff0c;简直就是…