UGUI源码剖析（9）：布局的实现——LayoutGroup的算法与实践

UGUI源码剖析（第九章）：布局的实现——LayoutGroup的算法与实践

在前一章中，我们剖析了LayoutRebuilder是如何调度布局重建的。现在，我们将深入到布局核心，去看看那些具体的组件——LayoutGroup系列组件是如何响应指令，并执行其各自独特的、充满数学细节的布局算法的。这将是一次深入到UGUI自动布局系统“应用层”源码的分析旅程。

1. LayoutGroup：所有布局组的“抽象基石”

LayoutGroup是一个抽象基类，它为所有具体的布局组（Horizontal, Vertical, Grid）提供了共享的基础设施和核心逻辑。

1.1 核心数据成员与属性

• [SerializeField] protected RectOffset m_Padding：定义了布局组内容区域与其RectTransform边界之间的内边距。
• [SerializeField] protected TextAnchor m_ChildAlignment：定义了当子元素未占满全部分配空间时，它们在容器内的对齐方式。
• protected DrivenRectTransformTracker m_Tracker：这是至关重要的一个成员。每一个LayoutGroup都拥有一个自己的DrivenRectTransformTracker实例，用于记录和管理所有被它所控制的子RectTransform的属性。当LayoutGroup被禁用时，它会调用m_Tracker.Clear()，将被驱动的属性**“释放”**，将控制权还给用户。
• private List m_RectChildren：一个用于缓存有效子元素的列表。这个列表在每次布局计算开始时被重新填充，是所有后续算法的操作对象。

1.2 核心方法：CalculateLayoutInputHorizontal() (第一阶段的入口)

这个方法虽然名为Horizontal，但它实际上是所有LayoutGroup第一阶段布局计算的通用入口。

// LayoutGroup.cs
public virtual void CalculateLayoutInputHorizontal()
{m_RectChildren.Clear();var toIgnoreList = ListPool<Component>.Get(); // 使用对象池避免GCfor (int i = 0; i < rectTransform.childCount; i++){var rect = rectTransform.GetChild(i) as RectTransform;if (rect == null || !rect.gameObject.activeInHierarchy)continue;// 查找子对象上所有实现ILayoutIgnorer的组件rect.GetComponents(typeof(ILayoutIgnorer), toIgnoreList);if (toIgnoreList.Count == 0){m_RectChildren.Add(rect); // 如果没有忽略器，直接添加continue;}// 如果有，则遍历检查ignoreLayout属性for (int j = 0; j < toIgnoreList.Count; j++){var ignorer = (ILayoutIgnorer)toIgnoreList[j];if (!ignorer.ignoreLayout){m_RectChildren.Add(rect); // 只要有一个忽略器不要求忽略，就添加break;}}}ListPool<Component>.Release(toIgnoreList);m_Tracker.Clear(); // 在每次计算开始前，清空之前的驱动记录
}

• 子元素筛选：这个方法的核心职责，是准备好本次布局计算所需要处理的、所有有效的子元素列表 m_RectChildren。它会遍历所有子Transform，并排除掉那些inactive的、或者被ILayoutIgnorer组件（如LayoutElement的ignoreLayout属性）标记为应忽略的子对象。
• 驱动器重置：m_Tracker.Clear()这一行至关重要。它确保了在每次布局重建开始时，LayoutGroup都放弃了对子元素的所有旧的控制权，准备根据新的计算结果，建立新的驱动关系。

1.3 核心方法：SetDirty()

当LayoutGroup的任何属性（如padding, spacing）发生变化时，都会调用SetDirty()。

// LayoutGroup.cs
protected void SetDirty()
{if (!IsActive())return;if (!CanvasUpdateRegistry.IsRebuildingLayout())LayoutRebuilder.MarkLayoutForRebuild(rectTransform);elseStartCoroutine(DelayedSetDirty(rectTransform));
}IEnumerator DelayedSetDirty(RectTransform rectTransform)
{yield return null;LayoutRebuilder.MarkLayoutForRebuild(rectTransform);
}

• 防止循环重建：if (!CanvasUpdateRegistry.IsRebuildingLayout())这个判断是防止无限循环重建的关键。如果当前已经处于一个布局重建的流程中，再次立即调用MarkLayoutForRebuild可能会导致循环依赖。
• 延迟重建：为了解决上述问题，当检测到已经在重建循环中时，它会启动一个协程DelayedSetDirty，将本次重建请求，延迟到下一帧执行。这是一个非常精巧的设计，保证了布局系统的稳定性。

2. HorizontalOrVerticalLayoutGroup：线性布局的算法核心

这个抽象基类实现了线性布局（水平或垂直）最核心的计算和应用逻辑。

2.1 CalcAlongAxis：自下而上计算聚合尺寸

这是布局计算阶段的核心算法。

// HorizontalOrVerticalLayoutGroup.cs
protected void CalcAlongAxis(int axis, bool isVertical)
{// ...bool alongOtherAxis = (isVertical ^ (axis == 1));// ...for (int i = 0; i < rectChildren.Count; i++){// ... 获取子元素的min, preferred, flexible尺寸 ...if (alongOtherAxis) // 计算交叉轴{totalMin = Mathf.Max(min + combinedPadding, totalMin);// ...}else // 计算主轴{totalMin += min + spacing;// ...}}// ...SetLayoutInputForAxis(totalMin, totalPreferred, totalFlexible, axis);
}

• alongOtherAxis的精妙判断：isVertical ^ (axis == 1)这个**异或（XOR）**运算，是一种非常高效的逻辑判断。
  • Horizontal (isVertical=false):
    • 计算水平轴(axis=0)时, false ^ false = false -> !alongOtherAxis -> 主轴逻辑。
    • 计算垂直轴(axis=1)时, false ^ true = true -> alongOtherAxis -> 交叉轴逻辑。
  • Vertical (isVertical=true):
    • 计算水平轴(axis=0)时, true ^ false = true -> alongOtherAxis -> 交叉轴逻辑。
    • 计算垂直轴(axis=1)时, true ^ true = false -> !alongOtherAxis -> 主轴逻辑。
• 算法核心：
  • 主轴尺寸：一个线性布局在主轴上所需的总尺寸，等于所有子元素的尺寸之和，加上它们之间的间距（spacing）之和。
  • 交叉轴尺寸：一个线性布局在交叉轴上所需的总尺寸，取决于所有子元素中，尺寸最大的那一个。

2.2 SetChildrenAlongAxis：自上而下应用位置和尺寸

这是布局应用阶段的核心算法，其逻辑非常复杂，可以分解为几步：

1. 计算总空间和剩余空间：

   float size = rectTransform.rect.size[axis]; // 获取父容器的可用空间
   float surplusSpace = size - GetTotalPreferredSize(axis); // 剩余空间 = 可用空间 - 所有子元素首选尺寸之和
   

2. 计算弹性空间分配系数：

   float itemFlexibleMultiplier = 0;
   if (surplusSpace > 0)
   {if (GetTotalFlexibleSize(axis) > 0)itemFlexibleMultiplier = surplusSpace / GetTotalFlexibleSize(axis);
   }
   

   这计算出了每一个flexible单位可以分配到多少像素的额外空间。

3. 计算最小/首选尺寸间的插值系数：

   float minMaxLerp = 0;
   if (GetTotalMinSize(axis) != GetTotalPreferredSize(axis))minMaxLerp = Mathf.Clamp01((size - GetTotalMinSize(axis)) / (GetTotalPreferredSize(axis) - GetTotalMinSize(axis)));
   

   如果父容器的可用空间size不足以满足所有子元素的preferredSize，但又大于minSize，这个minMaxLerp系数就决定了子元素最终尺寸在min和preferred之间的“压缩”程度。

4. 遍历并设置子元素：

   for (...)
   {// ...// 核心公式：计算子元素最终尺寸float childSize = Mathf.Lerp(min, preferred, minMaxLerp);childSize += flexible * itemFlexibleMultiplier;if (controlSize){// 如果LayoutGroup控制尺寸，则应用计算出的childSizeSetChildAlongAxisWithScale(child, axis, pos, childSize, scaleFactor);}else{// 如果不控制尺寸，则只设置位置，并考虑对齐float offsetInCell = (childSize - child.sizeDelta[axis]) * alignmentOnAxis;SetChildAlongAxisWithScale(child, axis, pos + offsetInCell, scaleFactor);}pos += childSize * scaleFactor + spacing; // 更新下一个元素的起始位置
   }
   

最终尺寸公式：childSize的计算是整个算法的精华。它首先在min和preferred之间进行插值（处理空间不足的情况），然后再叠加上根据flexible权重分配到的额外空间（处理空间富余的情况）。

SetChildAlongAxisWithScale: 这个辅助方法，最终会调用m_Tracker.Add(…)来记录LayoutGroup正在驱动子元素的哪些RectTransform属性，并将计算出的pos和size应用到子元素的anchoredPosition和sizeDelta上。

3. GridLayoutGroup：二维网格的布局算法

GridLayoutGroup的算法更为独立，它不使用HorizontalOrVerticalLayoutGroup的基类方法。

3.1 尺寸计算阶段 (CalculateLayoutInput…)
其核心是根据约束（Constraint）模式，来推算出网格的行列数，进而计算出整个组的总尺寸。

• FixedColumnCount: 列数固定，总宽度固定。总高度则取决于总行数（总元素数 / 列数）。
• Flexible: 在灵活模式下，它会尝试根据当前父容器的可用宽度，来计算出每行能放下的单元格数量，再由此推算出总行数，并以此来计算总的首选高度。

3.2 布局应用阶段 (SetLayoutVertical)
GridLayoutGroup巧妙地将所有位置和尺寸的设置，都放在了SetLayoutVertical这一个阶段。

// GridLayoutGroup.cs
public override void SetLayoutHorizontal()
{// 在水平布局阶段，只设置所有子元素的尺寸为固定的cellSizefor (int i = 0; i < rectChildrenCount; i++){// ...rect.sizeDelta = cellSize;}
}public override void SetLayoutVertical()
{// 在垂直布局阶段，此时所有子元素的尺寸都已确定// 1. 根据约束和可用空间，计算出最终的行列数 (cellCountX, cellCountY)// ...// 2. 循环遍历所有子元素for (int i = 0; i < rectChildrenCount; i++){// 3. 根据startAxis和索引i，通过取模(%)和整除(/)运算，计算出该元素的二维网格坐标(positionX, positionY)// ...// 4. 根据网格坐标、cellSize和spacing，计算出最终的本地位置// ...// 5. 调用SetChildAlongAxis，将位置和尺寸应用到子元素SetChildAlongAxis(rectChildren[i], 0, ...);SetChildAlongAxis(rectChildren[i], 1, ...);}
}

这种“先在Horizontal阶段统一尺寸，再在Vertical阶段统一位置”的策略，完美地契合了UGUI的两遍式布局管线。它确保了在计算最终位置时，所有子元素的尺寸都已经是一个已知的、固定的值，从而大大简化了布局算法的复杂性。

总结：

通过对LayoutGroup系列组件的源码级分析，我们得以一窥UGUI自动布局系统强大功能背后的算法实现。

• Horizontal/VerticalLayoutGroup 的核心，是一套基于主轴/交叉轴概念的、分别进行累加和取最大值的聚合算法，并通过一个精密的插值与弹性分配公式，来最终确定每一个子元素的位置和尺寸。
• GridLayoutGroup 则通过约束模式，预先计算出网格的维度，然后在水平布局阶段统一设置尺寸，在垂直布局阶段再根据行列坐标，统一设置位置。

理解了这些组件在CalculateLayoutInput和SetLayout这两个核心阶段的不同算法和行为，不仅能帮助我们更精确地使用它们，更能让我们在面对布局相关的性能问题时，清晰地知道其背后高昂的遍历、查询和计算代价究竟从何而来，从而做出更明智的优化决策。