[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自带布局组件

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

  Padding：内边距。
  Spacing：子物体之间的间距。
  Child Alignment：子物体的对齐方式（如居左、居中、居右）。
  Child Controls Size：是否强制子物体的宽/高由布局组控制。
  Child Force Expand：是否强制子物体填充剩余空间。
  

• Vertical Layout Group
  垂直方向自动布局依次排列
  属性与Horizontal Layout Group 一致
• Grid Layout Group
  将子物体按照表格网格行列排列

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

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

  Horizontal Fit：水平方向适配模式（Unconstrained/PreferredSize/MinSize）。
  Vertical Fit：垂直方向适配模式。
  ​​用途​​：自适应文本标签、动态增减内容的容器。
  

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

  Aspect Mode：适配模式（如按宽度控制高度，或按屏幕比例）。
  Aspect Ratio：宽高比值（如 16:9 对应 1.777）。
  ​​用途​​：保持图片或视频播放器的比例。
  

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

  Min Width/Height：最小尺寸
  Preferred Width/Height：首选尺寸
  Flexible Width/Height：可扩展的权重（用于填充剩余空间）
  用途​​: 自定义子物体在布局中的优先级或固定尺寸
  

组合使用布局

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）。

自定义需求

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