UGUI自动布局Layout

已于 2023-10-23 19:35:43 修改
阅读量397 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： UGUI Unity实战知识模块系统性梳理 文章标签： unity
于 2023-10-23 19:18:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ellis1970/article/details/133980454
本文介绍了Unity中的UGUI自动布局应用，包括动态数量图片和文本的居中处理，详细阐述了矩形变换组件与自动布局组件的关系，以及Content Size Fitter、Aspect Ratio Fitter、Horizontal/Vertical Layout Group和GridLayout Group的用法。通过示例解析了Layout Element组件在调整布局元素尺寸中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一.自动布局的应用

自动布局就是自动设置若干个对象尺寸和位置的功能，在游戏中有广泛应用。做过Cocos的开发感慨到，Unity这方面甩了Cocos两条街，Rect Transform甩了一条街，Layout系列组件甩了一条街。除了各种等间距设置图片位置之外，以下应用情况经常出现

1.1 对于动态数量的图片整体居中(比如抽奖结算界面，从后端获取道具数量)

1.2 若干图像和文本形成的整体动态居中(下图中货币图片和文本需要整体居中，而文本从后端读取，长度是动态的）

Cocos中使用代码来解决这类问题，Unity中使用布局组件来解决。这类问题的出现非常广泛，任何界面都可能出现，因此掌握自动布局是顺利推进开发的必然要求，下面进入正题

二. 矩形变换组件和自动布局组件的关系

如图所示自动布局组件共有六个

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【unity游戏开发入门到精通——UGUI】UGUI自动布局组件
向宇
05-02 1358
虽然UGUI的RectTransform已经非常方便的可以帮助我们快速布局，但UGUI中还提供了很多可以帮助我们对UI控件进行自动布局的组件。他们可以帮助我们自动的设置UI控件的位置和大小等。注意要参与自动布局的布局元素必须包含布局属性，其实也就是指具备RectTransform的UI组件。一般是布局组件放到父对象上，子对象就是被布局的对象。属性翻译功能Padding填充左右上下边缘的偏移位置。Spacing间距子对象之间的间距。子级对齐九宫格对齐方式。控制子对象的大小。
【Unity-UGUI控件全面解析】| Layout自动布局组件详解
热门推荐
努力前行，总会成为自己心中的那道光
06-06 2万+
UGUI中有个自动布局组件Auto Layout，主要包含下面几个模块（点击可进入官方文档下查看描述）： 自动布局 布局元素 (Layout Element) 水平布局组 (Horizontal Layout Group) 垂直布局组 (Vertical Layout Group) 网格布局组 (Grid Layout Group) 内容大小适配器 (Content Size Fitter) 自动布局系统 基于布局元素和布局控制器的概念。一个布局元素是具有矩形变换以及其他可选组件的游戏对象。布局元素对自身
ugui LayoutElement 制作tips
05-25
unity 背包tips 动态增加icon 根据内容背景缩放 详细介绍：https://blog.csdn.net/weixin_41843959/article/details/80447545
[UGUI] Layout
10-11 153
妈天，我这弄个服务器的列表ui弄了一天多 今天长得最重要的教训就是一定要查官方手册。点击组件旁边的小书就行。 不是别的，就是滑动。 但好在总算是想出办法来了 首先，这是个滑动区域，把图中的深色区域作为父区域，创建image，然后将所有的列表grid（空gameobject）添加为子节点，在image中添加scrollrect并添加imagemask可以实现遮挡并滑动的方...
【UGUI】Layout布局
记性太差
02-07 1814
LayoutElement：Layout模式下子元素大小设置。 HorizontalLayout：横向自动排版模式，有容器框概念，能自动比例拉伸缩放、填充等。 VerticalLayout：纵向自动排版模式，同上。 GridLayout：横纵组合格子排版模式，无容器框概念，只做排版，格子子元素大小需一致。 之前的一些想法：  现在grid有几个不一样的： 1.不参与拉伸、压
ugui auto layout
palawind
07-09 847
layout 要实现居中，需要给父类绑定一个自动缩放的contentsize而且pivot 需要是0.5     controlsize 用于迫使子类在一个固定范围内，压缩子类 一般不使用，当使用的时候会添加上contentsize 去适配，实现不压缩子类 而且可以使子孙类item删除后，自动缩小     controlsize 会使item没有设置图片的压缩成很小，一个gameo...
UGUI 源码之 LayoutGroup
NRatel的博客
03-05 4432
一、重点： 1、LayoutGroup 继承自UIBehaviour，可以利用其生命周期方法设置脏标记。 2、LayoutGroup 实现了两个接口 ILayoutElement, ILayoutGroup，说明它既是一个布局元素，又是一个布局控制器。 3、CalculateLayoutInputHorizontal() 为子类提供一个通用的、计算有效的 m_RectChildren（没有实现 ILayoutIgnorer 接口的子物体 和 实现了 ILayoutIgnorer 接口，但 ignor.
UGUI强制刷新Layout（布局）组件
不文不武的禾文
03-11 4526
不久前接到策划的一个需求，做一个自动适配的显示：不固定文本+不固定按钮+不固定文字，类似于： 对于这种需求，首先想到的就是在父物体上添加HorizontalLayoutGroup组件自动管理子物体的布局，在子物体上添加ContentSizeFitter组件通过内容适配文本的大小！ 但代码写出来，文本之间会有重叠，观察发现只要改变父物体或者其中一个子物体的enable，重叠的文本就会显示正常...
UGUI的布局与适配（二）
最新发布
04-08
这时候，自动布局（Auto Layout）功能便成为了实现这些复杂布局需求的关键。 自动布局是基于RectTransform的一个高级布局系统，它支持基于嵌套结构的UI布局，如水平或垂直列表或表格，并允许布局元素根据其包含的子...
Unity UGUI Layout自动排版组件用法介绍
ChinarCSDN的博客
08-31 1万+
Unity UGUI Layout自动排版组件用法介绍 Unity UGUI布局组件 本文提供全流程，中文翻译 助力快速理解 Unity UGUI Layout 布局组件的使用场景 需要将某个板块中的信息，图标给整理，整齐的进行排版 Unity 为我们提供了 Layout 布局组件 可以非常方便的实现此类需求 Grid Layout Group 网格布局 —— 支持竖向、横向排列 Horizontal Layout Group 网格布局 —— 仅支持横向排列 Vertical Layout Group
这是一套完整的 Unity 开发套件，提供 UI 管理、热更新、资源管理等、多线程、数据处理等功能完备的工具集.zip
01-03
这是一套完整的 Unity 开发套件，提供 UI 管理、热更新、资源管理等、多线程、数据处理、定时器、解压缩等功能完备的工具集，目的是为了提高生产力，方便业务开发这套工具集被命名为 KSwordKit
Unity UGUI的自动布局-LayoutGroup（水平布局）组件
leoysq的博客
11-23 3933
i < 3;i++)创建一个空物体，并添加HorizontalLayoutGroup组件。创建一个子物体预制体，包含一个Text组件。将子物体预制体拖拽到layoutGroup的Child Prefab属性中。将layoutGroup的Child Alignment属性设置为Middle Center。运行游戏，可以看到子物体在水平方向上居中对齐。
Unity所有UGUI组件的基础——Layout Element
hacning的博客
10-25 5093
问题背景 在我制作人物背包的过程中，需要当鼠标放在物体上时显示一些字符串表示物品的信息，所以我希望所显示的文本框大小以及背景图片大小都能随我填入的文字多少而变化，并且我需要有一个最小宽度，即超出宽度后应当换行竖向增长而不是无限制的横向变长，并且文本应当在背景的中央。 解决方案 层级关系： 我们先分析一下问题，父物体Inspect Window中包含image背景图，它要能够随着子物体Inspect Text大小变化而变化，Inspect Text大小需要根据组件Text中的文字数目变化，并且Inspect
UGUI源码阅读（二）Layout
qilin598866753的博客
07-04 334
Layout为ugui自动排版实现；
UGUI源码分析：LayoutGroup中的纵横布局组件（HorizontalOrVerticalLayoutGroup）
vin129的博客
05-23 4426
系列 UGUI源码分析系列总览 相关前置： UGUI CanvasUpdateSystem源码分析 UGUI源码分析：LayoutSystem布局系统 文章目录系列UML图一览LayoutGroup属性介绍布局过程 UML图一览 LayoutGroup BaseClass: UIBehaviour Interface: ILayoutElement, ILayoutGroup Intro:布局系统的实施组件的基类 虽然UGUI组件中有一些组件都继承了ILayoutElement接口，但并不会涉及对
UGUI内核大探究（十）Layout与Fitter
凯奥斯的注释
09-17 5997
UGUI内核大探究（七）Graphic中我们讲到Graphic组件SetLayoutDirty里会通知LayoutRebuilder布局需要重建，那么布局是具体是怎样重建的呢？我们知道UGUI有三种布局组，HorizontalLayoutGroup（水平布局组）、VerticalLayoutGroup（垂直布局组）和GridLayoutGroup（格子布局组），为对象添加某一种布局组，就可以让其子对象按照对应布局方法排列。那么这些LayoutGroup与Graphic又有什么关系呢？本文就带着这些问题就探究
UGUI 其它之一（Layout与Fitter）
ttod的博客
12-15 184
UGUI 其它之一（Layout与Fitter）
Unity UGUI Layout自动排版组件用法
Peter的博客
09-24 1645
1 Layout—— 布局组件 我们在做项目的时候，经常有需求 需要将某个板块中的信息，图标给整理，整齐的进行排版 如果我们一个的把方块、或者这种长条形的Ui给逐个创建，工作量十分大，而且容易出错导致位置偏移 Unity为我们提供了Layout布局组件 可以非常方便的实现此类需求 例如这样的效果： 2 Create BG Image—— 创建背景 可以是Image或者 空物体都行 然后在游戏物体上，添加对应的Layout组件 3 Create element...
LayoutGroup自动布局问题
Witness_K的博客
07-31 2630
1.一个文本框，需要随着字数的增加，实现文本框大小的自增长。可以用到ContentSizeFitter。 配合Layout布局，可以实现多个文本框的自增长。 父物体添加Horization Layout Group 和 Content Size Fitter； 子物体添加LayoutElement 此时，在父物体下添加子物体，父物体的大小会自动变化。 2. 增加完子物体后，需要获取...
UGUI自动布局新工具：轻松实现按钮均匀分布
描述中提到的“unity的UGUI自动布局”，是指在Unity引擎中用于UI布局的一种系统。UGUI是Unity的用户界面系统，负责渲染屏幕上的各种界面元素，如按钮、文本框、滑动条等。自动布局则是UGUI中的一项功能，它允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ellis1970

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值