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.rhkb.cn/news/204767.html

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

相关文章

万字详解,和你用RAG+LangChain实现chatpdf

像chatgpt这样的大语言模型(LLM)可以回答很多类型的问题,但是,如果只依赖LLM,它只知道训练过的内容,不知道你的私有数据:如公司内部没有联网的企业文档,或者在LLM训练完成后新产生的数据。(即使是最新的GPT-4 Turbo,训练的数据集也只更新到2023年4月)所以,如果我们…

141.【Git版本控制-本地仓库-远程仓库-IDEA开发工具全解版】

Git-深入挖掘 (一)、Git分布式版本控制工具1.目标2.概述(1).开发中的实际常见(2).版本控制器的方式(3).SVN (集中版本控制器)(4).Git (分布版本控制器)(5).Git工作流程图 (二)、Git安装与常用命令1.Git环境配置(1).安装Git的操作(2).Git的配置操作(3).为常用的指令配置别名 (可…

想成为网络安全工程师该如何学习?

一、网络安全应该怎么学&#xff1f; 1.计算机基础需要过关 这一步跟网安关系暂时不大&#xff0c;是进入it行业每个人都必须掌握的基础能力。 计算机网络计算机操作系统算法与数据架构数据库 Tips:不用非要钻研至非常精通&#xff0c;可以与学习其他课程同步进行。 2.渗透技…

.mat格式文件是什么?及将png,jpg,bmp,gif,tiff,psd等格式图片转为.mat格式(附代码)

很多深度学习网络的输入要求为.mat格式&#xff0c;当然也可以直接修改输入数据的代码&#xff0c;比如修改为使用OpenCV读取图片等&#xff0c;但有些网络修改起来比较麻烦&#xff0c;且.mat数据有很多优势&#xff0c;所以部分网络最好还是用默认的.mat格式数据 目录 一、.…

Gossip协议理解

概述 Gossip协议&#xff0c;又称epidemic协议&#xff0c;基于流行病传播方式的节点或进程之间信息交换的协议&#xff0c;在分布式系统中被广泛使用。 在1987年8月由施乐-帕洛阿尔托研究中心发表ACM上的论文《Epidemic Algorithms for Replicated Database Maintenance》中…

OpenStack云计算平台

目录 一、OpenStack 1、简介 2、硬件需求 3、网络 二、环境搭建 1、安全 2、主机网络 3、网络时间协议(NTP) 4、OpenStack包 5、SQL数据库 6、消息队列 7、Memcached 一、OpenStack 1、简介 官网&#xff1a;https://docs.openstack.org/2023.2/ OpenStack系统由…

RPA机器人如何解决非银企直联网银账户的数据自动采集?

数字时代来临&#xff0c;随着全球信息化水平的不断提升&#xff0c;企业们纷纷向自动化办公、数字化转型靠拢。财务部门作为一个企业的重要部门&#xff0c;承担着管理和监控公司所有项目的重要职责&#xff0c;因而一直被视为企业数字化转型的重要突破口。 由于企业经营理念和…

第二十章多线程

线程简介 java语言提供了并发机制&#xff0c;程序员可以在程序中执行多个线程&#xff0c;每一个线程完成一个功能&#xff0c;并与其他线程并发运行。 一个进程是一个包含有自身地址的程序&#xff0c;每个独立执行的程序都称为进程。也就是说每个正在执行的程序都是一个进程…

C语言错误处理之“非局部跳转<setjmp.h>头文件”

目录 前言 setjmp宏 longjmp函数 使用方法&#xff1a; 实例&#xff1a;测试setjmp与longjmp的使用 前言 通常情况下&#xff0c;函数会返回到它被调用的位置&#xff0c;我们无法使用goto语句改变它的返回的方向&#xff0c;因为goto语句只能跳转到同一函数内的某个标号…

python与机器学习1,机器学习的一些基础知识概述(完善ing)

目录 1 AI ,ML,DL,NN 等等概念分类 1.1 人工智能、机器学习、深度学习、神经网络之间的关系&#xff1a; 1.2 人工智能的发展 2 ML机器学习的分类&#xff1a;SL, USL,RL 2.1 机器学习的分类 2.2 具体的应用举例 2.3 数据分类 3 关于阈值θ和偏移量b的由来 4 不同的激…

中小型工厂如何进行数字化转型

随着科技的快速发展和市场竞争的日益激烈&#xff0c;中小型工厂面临着诸多挑战。为了提高生产效率、降低成本、优化资源配置&#xff0c;数字化转型已成为中小型工厂发展的必经之路。中小型工厂如何进行数字化转型呢&#xff1f; 一、明确数字化转型目标 在进行数字化转型之前…

【Linux下基本指令——(1)】

Linux下基本指令——&#xff08;1&#xff09; 一. ls 指令1.1.语法&#xff1a;1.2.功能&#xff1a;1.3.常用选项&#xff1a;1.4.举例&#xff1a;1.5.Xshell7展示 二. pwd 命令2.1.语法: 2.2.功能&#xff1a;2.3.常用选项&#xff1a;2.4.Xshell7展示 三. cd 指令3.1.语法…

0004Java程序设计-ssm基于微信小程序的校园第二课堂

文章目录 摘 要目录系统设计开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。…

3D模型纹理集合并【Python|C#】

使用 Substance Painter 时&#xff0c;将模型的各个部分分成不同的纹理集非常有用。 这可以帮助遮罩&#xff0c;或者只是保持层栈干净。 不幸的是&#xff0c;Painter 无法将多个纹理集中的所有贴图导出为单个图集&#xff0c;即使在创建单独对象的 UV 时考虑到了这一点。 显…

SpringCloud实用-OpenFeign整合okHttp

文章目录 前言正文一、OkHttpFeignConfiguration 的启用1.1 分析配置类1.2 得出结论&#xff0c;需要增加配置1.3 调试 二、OkHttpFeignLoadBalancerConfiguration 的启用2.1 分析配置类2.2 得出结论2.3 测试 附录附1&#xff1a;本系列文章链接附2&#xff1a;OkHttpClient 增…

Spring Security 6.x 系列(6)—— 显式设置和修改登录态信息

一、前言 此篇是对上篇 Spring Security 6.x 系列&#xff08;5&#xff09;—— Servlet 认证体系结构介绍 中4.9章节显式调用SecurityContextRepository#saveContext进行详解分析。 二、设置和修改登录态 2.1 登录态存储形式 使用Spring Security框架&#xff0c;认证成功…

六、Lua运算符

文章目录 一、Lua 运算符&#xff08;一&#xff09;算术运算符&#xff08;二&#xff09;关系运算符&#xff08;三&#xff09;逻辑运算符&#xff08;四&#xff09;其他运算符 二、运算符优先级 一、Lua 运算符 运算符是一个特殊的符号&#xff0c;用于告诉解释器执行特定…

MSB3541 Files 的值“<<<<<<< HEAD”无效。路径中具有非法字符。

MSB3541 Files 的值“<<<<<<< HEAD”无效。路径中具有非法字符。 一般来说出现这个问题是因为使用git版本控制工具合并代码出现了问题&#xff0c;想要解决也很简单。 如图点击错误后定位到文件&#xff0c;发现也没有什么问题。 根据错误后边的提示&a…

P9242 [蓝桥杯 2023 省 B] 接龙数列(dp+最长接龙序列+分类)

1. 计算0~9为结尾的最长子串长度 2. 对于每个数字&#xff0c;比较其开头可连接子串长度1 与 原来以其末位为末尾的子串长度 3. 更新以其末位为末尾的子串长度 #include<iostream> #include<string.h>using namespace std;// 相当于记录…

如何运行C/C++程序

一、在线运行C/C 码曰 - 让代码在云端多飞一会&#xff1a;这是一个支持C/C&#xff0c;Java&#xff0c;Python等多种语言的在线编程&#xff0c;编译运行&#xff0c;粘贴分享的平台。你可以在这里输入你的代码&#xff0c;点击运行按钮&#xff0c;就可以看到输出结果。你也…