uGUI之AutoLayout

最新推荐文章于 2023-10-07 16:53:05 发布

BND_109

最新推荐文章于 2023-10-07 16:53:05 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏： Unity

本文链接：https://blog.youkuaiyun.com/JohnBlu/article/details/90720541

Unity 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析Unity中uGUI的布局机制，重点介绍HorizontalLayoutGroup组件的工作原理，包括minWidth、preferredWidth、flexibleWidth参数的作用及计算公式。通过实例演示不同条件下UI元素的尺寸调整策略。

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

创建一个ui对象Root，添加HorizontalLayoutGroup组件，在此对象下创建三个子对象，并分别添加LayoutElement组件，按照上图分别赋值MinWidth、PreferredWidth、FlexibleWidth，这里拿宽度(width)距离，height同理。

并勾选Root对象上的HorizontalLayoutGroup的ChildControlsSize的Width;

为了帮助理解，我们先定义几个概念。我们把当前UI所有同级并参与自动布局的组件的minWidth的总和称为totalMinWidth，preferredWidth总和称totalPreferredWidth，flexibleWidth的总和称为totalFlexibleWidth，父UI的真实高度称为realWidth。

以这套数据来举例即为：

totalMinWidth = 100 + 100 + 100 = 300

totalPreferredWidth = 200 + 150 + 150 = 500

totalFlexibleWidth = 2 + 1 + 1 = 4

接下来问题就来了，uGUI是如何通过以上参数来具体设置每个参与自动布局ui的大小的呢？这里要分为三种情况来讨论：

条件：当realWidth<totalMinWidth的时候，参与自动布局ui的宽度即为他们各自的minWidth。
条件：当totalMinWidth<realWidth<totalPreferredWidth的时候，参与自动布局ui的宽度依照下列公式来计算： width = minWidth + (preferredWidth - minWidth)/(totalPreferredWidth - totalMinWidth) * (realWidth - totalMinWidth)
条件：当realWidth>totalPreferredWidth的时候，参与自动布局ui的宽度依照下列公式来计算： width = (上一情况算出来的width) + flexibleWidth / totalFlexibleWidth * (realWidth - totalPreferredWidth)

公式看起来复杂，但是其中三个参数分别是有具体意义的:min可以理解为ui最小的尺寸，preferred可以理解为ui最佳的尺寸，flexible可以理解为在没有瓜分完父节点ui尺寸的情况下ui灵活填充父节点ui剩下尺寸的权重比例。根据realWidth处于不同的区间（即以上三种情况），来决定这三个尺寸是否使用以及如何使用。

建议自己在unity中真实地调节一下这几个参数，从而看看参数对大小的真实影响，如此你会发现公式其实并不需要死记。

Image和Text组件本身也是具有LayoutElement的这些属性的，Image和Text默认的minWidth/minHeight为0，flexibleWidth/flexibleHeight为-1（-1的意义即为不瓜分父节点ui剩下的尺寸），Image的preferredWidth/preferredHeight依然为0，而Text的preferredWidht/preferredHeight为Text内容字体最适合的尺寸。我们添加在具有Image或者Text组件对象上的LayoutElement组件，事实上是为了重写这几个数据的，它是否重写是依据layoutPriority字段来决定优先级，Image和Text默认的优先级为0，我们新加的LayoutElement组件的layoutPriority属性为1，即为重写Image和Text这部分的数据。

HorizontalLayoutGroup还有一个ChildForceExpand可以勾选，

1)ChildForceExpand不勾选意味着子节点都不启用flexible（即flexibleWidht/flexibleHeight为-1）

2)ChildForceExpand勾选意味着子节点都启用flexible并且flexibleWidht/flexibleHeight为1

3)然而，子节点的LayoutElement组件一旦启用了flexible，那么一定是override 1)和2)两种情况的