【UGUI】布局详解

最新推荐文章于 2023-05-13 09:44:50 发布
最新推荐文章于 2023-05-13 09:44:50 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： UGUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq168213001/article/details/43603557
版权

1.RectTransform:

略。

2.Aspect Ratio Fitter:


Properties

Property:Function:
Aspect Mode根据AspectRatio怎样调节Rect的值。
        NoneRect值与AspectRatio的值无关。
        Width Controls HeightHeight自动被Width调节，比例为1/AspectRatio的值。
        Height Controls WidthWidth自动被Height调节，比例为AspectRatio的值。
        Fit In Parent自动按照AspectRatio比例填充到Parent Rect，即stretch by parent，并且范围在Parent Rect之内。
        Envelope Parent自动按照AspectRatio比例填充到Parent Rect，即stretch by parent，并且范围可以超出Parent Rect。
Aspect Ratio强制宽高比例，即=width/height


注意：1.自动填充到父对象Rect中后，取消该模式并恢复原始尺寸可能位置等信息错误。

             2.无论怎么填充到父对象，不会宽高都超出父对象Rect范围。

             3.修改的AspectRatio是RectTrasform的宽高比例，非对象的Preserve Aspect。

            4.如果设置了伸缩比例模式，则使用对象的SetNativeSize失效。

            5.伸缩时，是根据对象Pivot来进行伸缩的。


左为原始尺寸，右为填充到父对象Rect的情形。

3.Content Size Fitter

Property:Function:
Horizontal FitWidth被LayoutElement怎样控制？
        NoneWidth不被LayoutElement控制
        MinimumWidth被LayoutElement 的Minimum Width控制。
        PreferredWidth被LayoutElement 的Preferred Width控制。
Vertical FitHeight被LayoutElement怎样控制？
        NoneHeight不被LayoutElement控制。
        MinimumHeight被LayoutElement 的Minimum Height控制。
        PreferredHeight被LayoutElement 的Preferred Height控制。

注意：1.Content Size Fitter需要获取LayoutElement的信息，所以他们需要配对使用，对于内置的imag、text等，他们有内置的LayoutElement信息，不过这是用于内部自动管理的，因此我们无法修改它。如果我们要自己定义的话，需要添加LayoutElement组件，然后调节相应的属性。
            2.Layout Element不但可以是LayoutElement组件，还可以是Image、Text、layout groups等。

            3.伸缩时，是根据对象Pivot来进行伸缩的。

4.Layout Element

Properties

Property:Function:
Min WidthLayoutElement的Width的最小值。
Min HeightLayoutElement的Height的最小值。
Preferred Width在LayoutElement被分配大小时，优先分配的Width，如果不够分配则使用上层Layout默认分配的值。
Preferred Height在LayoutElement被分配大小时，优先分配的Height，如果不够分配则使用上层Layout默认分配的值
Flexible Width如果Layout整体分配完成后，仍有剩余空间，则根据这个值在同Layout组中的比例分配剩余Width。
Flexible Height如果Layout整体分配完成后，仍有剩余空间，则根据这个值在同Layout组中的比例分配剩余Height。
最新版本还有一个属性：IngoreLayout，设置子控件不参与Layout布局。


注意：1.LayoutElement只能在控件处于Layout模式下生效。

            2.LayoutElement并不会改变控件的Rect，只是为了提高给上层Layout系统排版布局。

            3.FlexibleWidth和FlexibleHeight，额外自动填充分配，常规情况下是0或者1,1为分配剩下的所有空间，0为不分配任何额外的空间，如果多个子控件都有设置额外空间分配，并且上层Layout禁用Child Force Expand，则分配时按住额外分配设置所占的比例进行分配，如果上层开启了Child Force Expand，则子元素额外分配的值<=1时，值都按照1计算比例。

    4.Layout空间分配顺序：

  • First minimum sizes are allocated.
  • If there is sufficient available space, preferred sizes are allocated.
  • If there is additional available space, flexible size is allocated.

上面3图依次为：上层Layout关闭Expand模式即整体宽度（400）、子控件1自定义宽度100，剩余空间分配权重0.5、子控件2自定义宽度150，剩余空间分配权重2

计算：上层空间优先分配子控件1宽度100，空间足够，则实际分配100，再分配子控件2宽度150，剩余空间（400 - 100 = 300），空间足够，实际分配150；在完成分配后，还有剩余空间400-100-150=150>0，则检测控件的自适应宽度（即额外宽度分配）；子控件1，自适应分配权重0.5，子控件2，只适应分配权重2，则实际子控件1分配比例0.5/(0.5+2)=0.2，实际分配150*0.2=30，子控件2分配比例2/（0.5+2）=0.8，实际分配150*0.8=120；那么子控件1最终分配宽度为100+30=130，子控件2最终分配宽度为150+120=270.



上面3图依次为：上层Layout开启Expand模式即整体宽度（400）、子控件1自定义宽度100，剩余空间分配权重0.5、子控件2自定义宽度150，剩余空间分配权重2

计算：上层空间优先分配子控件1宽度100，空间足够，则实际分配100，再分配子控件2宽度150，剩余空间（400 - 100 = 300），空间足够，实际分配150；在完成分配后，还有剩余空间400-100-150=150>0，则检测控件的自适应宽度（即额外宽度分配）；子控件1，自适应分配权重0.5<1，则实际权重=1，子控件2，只适应分配权重2>1，则实际分配权重2，最后实际子控件1分配比例1/(1+2)=1/3，实际分配150/3=50，子控件2分配比例2/（1+2）=2/3，实际分配150*2/3=100；那么子控件1最终分配宽度为100+50=150，子控件2最终分配宽度为150+100=250.

5.Horizontal Layout Group


Properties
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.
Child Force ExpandWhether to force the children to expand to fill additional available space.
Description
  • The minimum widths of all the child layout elements are added together and the spacing between them is added as well. The result is the mimimum width of the Horizontal Layout Group.
  • The preferred widths of all the child layout elements are added together and the spacing between them is added as well. The result is the preferred width of the Horizontal Layout Group.
  • If the Horizontal Layout Group is at its minimum width or smaller, all the child layout elements will also have their minimum width.
  • The closer the Horizontal Layout group is to its preferred width, the closer each child layout element will also get to their preferred width.
  • If the Horizontal Layout Group is wider than its preferred width, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible widths.

The Horizontal Layout Group component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:

6.Vertical Layout Group


同横向Layout布局

7.Grid Layout Group


Properties
Property:Function:
PaddingThe padding inside the edges of the layout group.
Cell SizeThe size to use for each layout element in the group.
SpacingThe spacing between the layout elements.
Start CornerThe corner where the first element is located.
Start AxisWhich primary axis to place elements along. Horizontal will fill an entire row before a new row is started. Vertical will fill an entire column before a new column is started.
Child AlignmentThe alignment to use for the layout elements if they don’t fill out all the available space.
横纵组合布局，格子大小需固定
jx_T
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UGUI-- 自动布局组件
Go_Accepted的博客
05-03 603
1、自动布局是什么 虽然UGUI中的RectTransform已经非常方便地可以帮助我们快速布局，但是UGUI中还提供了很多可以帮助我们对UI控件进行自动布局的组件，可以帮助我们自动的设置UI控件的位置和大小等 自动布局的工作方式一般是： 自动布局控制组件+布局元素=自动布局 自动布局控制组件：Unity提供了很多用于自动布局的管理性质的组件用于布局 布局元素：具备布局属性的对象们，这里主要是指具备RectTransform的UI组件 2、布局元素的布局属性 例如：图片最下方，选择Lay.
UGUI讲解.zip
03-13
9. **Rect Transform**：UI元素的变换组件，与常规的Transform组件类似，但专为2D布局设计，包含锚点、偏移、拉伸等属性。 10. **Event System**：负责处理用户输入事件，如鼠标点击、触摸滑动等，通过EventTrigger...
UGUI组件（7）布局型组件
12-24 169
布局型组件: https://docs.unity3d.com/Manual/comp-UIAutoLayout.html Layout Element 布局元素。可以自定义修改自动布局中某个元素的尺寸。 参数，以下值仅能取正数(value >= 0,AvailableWidth表示该布局的最大宽度值) Min Width : 该元素的最小宽度(任意情况都生效，即便MinW...
UGUI布局
rainwavezhao的专栏
12-16 332
Horizontal Layout Group（水平布局） 对象填充总个父物体，水平会填充 Vertical Layout Group（垂直布局） 垂直（高度）会填充 Grid Layout Group （网格布局）：以表格的形式布局，不会填充父物体 padding，cell 等就不说了。 Startcorner 从哪个角开始。例如左上角，那么子物体就会从左往右（1，2，3）。右上角，那么子
UGUI自动布局
鳄鱼泪的博客
10-13 1442
UGUI Auto Layout Rect Transform layout系统足够灵活，可以处理许多不同类型的布局，还允许以完全自由的方式放置元素。然而，有时需要一些更结构化的东西。 自动布局系统提供了将元素放置在嵌套布局组(如水平组、垂直组或网格)中的方法。它还允许根据包含的内容自动调整元素的大小。例如，可以动态调整按钮的大小，使其完全适合其文本内容和一些填充。 自动布局系统是在矩形变换布局系...
UGUI 之 LayoutGroup布局
陈言必行 -- Unity游戏开发领域优质博主
09-28 2868
UGUI之布局的使用 unity的LayoutGroup分为三种，对象填充总个父物体，水平会填充 Vertical Layout Group（垂直布局）：
uGUI源文件unity3D
01-04
《Unity3D中的uGUI系统详解》 Unity3D作为一款强大的游戏开发引擎，其用户界面（UI）系统——uGUI，自2014年引入以来，为开发者提供了高效、灵活的界面构建工具。uGUI是Unity在早期OnGUI系统基础上的重大升级，旨在...
UGUI轮播图组件实现方法详解
08-26
UGUI轮播图组件实现方法详解 本资源主要为大家详细介绍了UGUI轮播图组件的实现方法，支持自动轮播、手势切换等功能，具有一定的参考价值。下面是对此组件的详细知识点解释： 1. 轮播图组件的基本概念 UGUI轮播图...
UGUI优化技巧
11-08
### UGUI优化技巧详解 #### 一、UI开销分析 在游戏开发中，用户界面（UI）作为玩家与游戏互动的重要桥梁，其性能优化至关重要。以下是对UI开销进行细致分析的一些关键点： ##### UI元素更新 1. **Instantiate/...
PSD转ugui工具.rar
12-06
《PSD转Unity uGUI工具详解》 在游戏开发领域，Unity3D因其强大的功能和易用性，已经成为许多开发者首选的游戏引擎。特别是在UI设计方面，Unity的Unity Graphic Interface（UGUI）系统提供了丰富的界面元素和灵活的...
ugui LayoutElement 制作tips
05-25
unity 背包tips 动态增加icon 根据内容背景缩放 详细介绍：https://blog.csdn.net/weixin_41843959/article/details/80447545
Unity UGUI（三）布局系统
qq_41044598的博客
05-13 1487
Unity UGUI布局系统
Unity3d Ugui 18 LayoutElement
HexianWHH的专栏
08-03 4622
布局元素：布局元素不会变动自己的大小，而是由布局组（水平、垂直、网格）根据布局元素设置的属性来分配对应的尺寸及所在位置。 属性 IgnoreLayout:是否忽略布局，本布局元素不参与布局组的布局 MinWidth:最小的宽，宽度不能小于这个值 MinHeight:最小的高，高度不能小于这个值 PreferredWidth:最适宜的宽，如果有足够的空间，该布局元素的首选宽度。 PreferredHeight:最适宜的高，如果有足够的空间，该布局元素的首选高度。 FlexibleWidt..
UGUI源码解析——LayoutElement
L的博客
06-16 894
继承了ILayoutElement和ILayoutIgnorer接口，作为布局元素组件 挂载了Layout Element组件的对象，布局并不会生效，它是受到实现了布局组的控制(HorizontalLayoutGroup、VerticalLayoutGroup、GridLayoutGroup)——继承自ILayoutElement的属性 ——Min Width：最小宽度，只要设置了值，不管布局组件怎么设置，最小宽度不能小于这个值 ——Min Height：最小高度，只要设置了值，不管布局组件怎么设置，最小
Unity3D——关于UGUI系统的布局组件
virus2014的专栏
03-12 615
UGUI自动布局时获取某个子控件的坐标时要延迟一帧去获取
【Unity3D】UGUI之布局组件
little_fat_sheep
07-17 2521
布局组件主要有水平布局（HorizontalLayoutGroup）、垂直布局（VerticalLayoutGroup）、网格布局（GridLayoutGroup），用于约束子控件的布局方式，这些布局都有以下共同属性Padding边距，父控件向内收缩的空间，子控件只能在此收缩空间内布局，避免子控件太贴边Spacing间距，子控件向外延申的空间，避免子控件间挨得太紧凑子控件对齐方式。...
【UGUI】UGUI 常用布局组件
阿黄的博客
07-04 2026
原文地址：http://blog.csdn.net/u012322710/article/details/53200911 一. Grid Layout Group 横竖布局 Padding —— 间隔 CellSize —— 子物体大小 Spacing —— 子物体之间的间隔 Start Corner —— 子物体排列的角度 Start Axis ——
unity UGUI系统梳理 - 基本布局
LuckyMechanic的博客
03-05 996
偷懒了，部分节选unity API。
Unity3d中UGUI组件精简复盘（十七）LayoutElement组件
qq_1628941121的博客
08-28 1348
LayoutElement组件 意义：只能作用在被排列组件管理的子物体item上才能起来相应的作用，搭配LayoutGroup组件。可能需要另外添加一些东西，区别于排列元素之外的东西。 Ignore Layout：忽略Group的管理即忽略自动排列 Min Width：最小宽度 Min Height：最小高度 Preferred Width：首选宽度，不能违背Min Width Preferred Height：首选高度，不能违背Min Height Flexible Width：灵活宽度，会将所有item
unity 控制ugui布局
最新发布
10-19
UGUI布局主要有以下几种方式： 1. 相对位置布局：使用锚点（Anchor）来设置物体相对于父级容器的位置。通过设置锚点的最小和最大值来确定物体的偏移位置，使用比例来自动适应不同屏幕分辨率。 2. 绝对位置布局：直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值