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,一经查实,立即删除!

相关文章

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

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

Jenkins Ansible 参数构建

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

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

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

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

无电源 灯光显示 无障碍扶手型花洒 以上产品图片均来源于淘宝 侵权联系删除 居家适老化卫生间的花洒通常具有以下特点和功能&#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; ◀️ ⏸ ▶️…

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…

C语言数组的距离(ZZULIOJ1200:数组的距离)

题目描述 已知元素从小到大排列的两个数组x[]和y[]&#xff0c; 请写出一个程序算出两个数组彼此之间差的绝对值中最小的一个&#xff0c;这叫做数组的距离 。 输入&#xff1a;第一行为两个整数m, n(1≤m, n≤1000)&#xff0c;分别代表数组f[], g[]的长度。第二行有m个元素&a…

如何在Simulink中使用syms?换个思路解决报错:Function ‘syms‘ not supported for code generation.

问题描述 在Simulink中的User defined function使用syms函数&#xff0c;报错simulink无法使用外部函数。 具体来说&#xff1a; 我想在Predefined function定义如下符号函数作为输入信号&#xff0c;在后续模块传入函数参数赋值&#xff0c;以实现一次定义多次使用&#xf…

最小二乘线性回归

​ 线性回归&#xff08;linear regression&#xff09;&#xff1a;试图学得一个线性模型以尽可能准确地预测实际值的输出。 以一个例子来说明线性回归&#xff0c;假设银行贷款会根据 年龄 和 工资 来评估可放款的额度。即&#xff1a; ​ 数据&#xff1a;工资和年龄&…

LeeCode前端算法基础100题(2)- 最多水的容器

一、问题详情&#xff1a; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;…

案例025:基于微信小程序的移动学习平台的设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

[C++历练之路]优先级队列||反向迭代器的模拟实现

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; 在C的宇宙中&#xff0c;优先队列似乎是一座巨大的宝库&#xff0c;藏匿着算法的珍宝。而就在这片代码的天空下&#xff0c;我们不仅可以探索优先队列的神奇&#xff0c;还能够揭开反向迭…

【【Linux系统下常用指令学习 之 二 】】

Linux系统下常用指令学习 之 二 文件查询和搜索 文件的查询和搜索也是最常用的操作&#xff0c;在嵌入式 Linux 开发中常常需要在 Linux 源码文件中查询某个文件是否存在&#xff0c;或者搜索哪些文件都调用了某个函数等等。 1、命令 find find 命令用于在目录结构中查找文件…