[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解

布局

UI的布局一般分为几大类：

列表、嵌套、悬浮、不规则排列、下拉框等等

这些布局也根据创作方式分为：

1. 静态布局：直接通过手动拖拽设置 UI 元素的 ​​绝对位置​​ 和 ​​固定尺寸​​，依赖预设分辨率设计。通常搭配 Canvas Scaler 的 ​​Constant Pixel Size​​ 模式（像素大小固定，不自动缩放）。
2. 相对锚点布局：利用 ​​锚点（Anchors）​​ 和 ​​轴心（Pivot）​​ 实现 UI 元素相对于父容器或屏幕的 ​​比例定位​​。
   核心工具：
   ​​锚点预设​​（如 Strech、Middle-Center）。
   ​​偏移量（PosX/PosY）​​ 或 ​​比例偏移（如 Left=10%, Right=20%）​​。
3. 自动动态布局：使用 Unity 的 ​​自动布局组件​​（Horizontal/Vertical/Grid LayoutGroup）动态排列子元素。
   核心组件：
   ​​布局组件​​：控制子元素的位置和间距。
   ​​Content Size Fitter​​：根据内容自动调整容器大小。
4. 混合分层布局：结合 ​​静态定位​​、​​锚点系统​​ 和 ​​自动布局​​，实现复杂 UI 结构的分层管理。
   典型结构：
   外层容器用锚点适配屏幕。
   中层用自动布局排列内容块。
   内层元素手动微调细节。
5. 代码驱动布局：完全通过代码（C#）动态计算位置和尺寸，实现高度定制化布局。
   常用 API：
   RectTransform.anchorMin/anchorMax
   RectTransform.sizeDelta
   LayoutRebuilder.ForceRebuildLayoutImmediate

布局选择决策树​​

根据需求快速匹配布局方案：

​​是否需要动态增减元素？​​
是 → ​​自动动态布局​​ 或 ​​代码驱动布局​​。
否 → 进入下一步。
​​是否需要适配多分辨率？​​
是 → ​​相对锚点布局​​ 或 ​​混合分层布局​​。
否 → ​​静态固定布局​​。
​​是否有特殊视觉效果？​​
是 → ​​代码驱动布局​​。

Unity自带布局组件

任何一个在Canvas下的UI元素都会自动挂载RectTransform以及一层默认的布局属性。

这个属性会被Layout Element 覆盖。

• Horizontal Layout Group
  水平方向自动布局依次排列。
  

  Padding：内边距。
  Spacing：子物体之间的间距。
  Child Alignment：子物体的对齐方式（如居左、居中、居右）。
  Reverse Arrangement : (反向排列)对象排序反转，勾选即表示把默认上下左右颠倒。
  Control Child Size：是否强制子物体的宽/高由布局组控制。注意这个要注意子物体的Layout Element 中的属性，不合适可以覆盖使用Layout Element再布局。
  Use Child Scale ： 如果勾选了这个选项，会在计算布局宽度或者高度的时候把这个Scale也算进去，用这个物体真实的大小，意思就是把自动计算的部分（有些布局会扩充子物体的大小，比如上面这个Control child size）忽视掉，强行使用子物体的真实大小。
  Child Force Expand：是否强制子物体填充剩余空间。子布局元素会填充父物体的RectTransform规定的宽高，并且平均分配大小，用的比较多，其实就是不让子物体挤在一起，而是均匀的分配父物体的尺度。
  

• Vertical Layout Group
  垂直方向自动布局依次排列
  

  属性与Horizontal Layout Group 一致

• Grid Layout Group
  将子物体按照表格网格行列排列
  

  Cell Size：每个网格单元的固定尺寸。
  Spacing：行/列之间的间距。
  Start Corner：排列的起始位置（如左上角）。
  Start Axis：排列方向（水平优先或垂直优先）。
  Child Alignment：子物体的对齐方式（如居左、居中、居右）。
  Constraint：限制行数或列数。
  ​​用途​​：背包系统、图鉴、相册缩略图等网格布局
  

• Content Size Fitter
  内容尺寸适配器
  根据子物体的内容​​自动调整自身尺寸​​。

  Horizontal Fit：水平方向适配模式（Unconstrained/PreferredSize/MinSize）。
  Vertical Fit：垂直方向适配模式。
  ​​用途​​：自适应文本标签、动态增减内容的容器。Unconstrained (自由的)：组件不根据布局元素调整 ，可手动修改长宽的值。
  MinSize（最小值）：根据布局元素的最小值来调整，不能手动修改长宽的值。
  PreferredSize （首选合适的大小）：根据布局元素的内容来调整，不能手动修改长宽的值。注意是内容。contentSizeFitter 这个组件的原理就是会根据子元素的 Min属性 或者 Preferred属性 来装配生成当前物体的大小，
  

• Aspect Ratio Fitter
  宽高比适配器
  强制保持物体的宽高比

  Aspect Mode：适配模式（如按宽度控制高度，或按屏幕比例）。如何调整矩形大小以强制执行宽高比。
  Aspect Ratio：宽高比值（如 16:9 对应 1.777）。宽度除以高度的值
  ​​用途​​：保持图片或视频播放器的比例。None	不要使rect适合宽高比。
  Width Controls Height	高度会根据宽度自动调整。
  Height Controls Width	宽度会根据高度自动调整。
  Fit In Parent	宽度，高度，位置和锚点会自动调整，以使rect适合在父对象的rect内部，同时保持宽高比。可能是父矩形内部的一些空间，该空间未被此矩形覆盖。这里就是强制自己在不突破父物体的情况下，强制执行下面给定的宽高比值。以父物体的大的那个边为参考。
  Envelope Parent	宽度，高度，位置和锚点会自动调整，以使rect在保持宽高比的同时覆盖父对象的整个区域。该矩形的延伸范围可能比父矩形的延伸范围大。就是以父物体的小的那个边为参考。

• Layout Element
  布局元素
  可以覆盖父物体的设置，单独控制子物体的布局参数。

  Ignore Layout ：这个属性是最常用的，可以让子元素忽视父元素的强制布局
  Min Width/Height：最小尺寸
  Preferred Width/Height：首选尺寸
  Flexible Width/Height：可扩展的权重（用于填充剩余空间）
  用途​​: 自定义子物体在布局中的优先级或固定尺寸Min Width 最小宽度，只要设置了值，不管布局组件怎么设置，他永远最小也有这么大
  Min Height 最小高度，结论同上
  Preferred Width 优选宽度，会优先选择这个值作为布局计算参考
  Preferred Height 优选高度，结论同上
  Flexible Width 如果有额外的可用空间，应该分配这个布局元素的额外相对高度。
  Flexible Height 结论同上
  LayoutPriority，这个属性作用是在计算布局的时候进行优先级排序，数字越大的组件布局的优先级的越高
  

布局使用计算

横竖向layout Group计算
另一篇可参考详细文章

组合使用布局

1. 自定义复杂网格布局
   使用多个不同Horizontal Layout Group 嵌套在Vertical Layout Group中，或者反过来互相嵌套。
2. 自适应面板布局
   结合 Content Size Fitter 和 Vertical Layout Group或者Horizontal Layout Group，使面板高度随内容动态调整。
3. 复杂不同子元素大小网格
   Grid Layout Group 配合 Layout Element，设置某些子物体占据多行或多列。

布局注意事项

性能

频繁变化的动态布局是可能影响性能的，所以建议结合对象池（Object Pooling）来优化。

执行顺序

布局组件的上下顺序可能影响结果。

锚点与轴心

子物体的 Anchor 和 Pivot 会影响布局效果，通常设置为左上角（0,1）或中心（0.5,0.5）。

自定义需求

这里简单说一些第三方布局插件，至于特殊的布局需求需要自己写组件代码。