Unity UGUI系列七 Layout、Content Size Fitter、Aspect Ratio Fitter

Posted 2023-03-23

参考技术A 参考
【Unity3D-UGUI原理篇】（五）Auto Layout 自动布局
Unity中UI的自动布局

https://docs.unity.cn/cn/2019.4/Manual/script-LayoutElement.html

Layout Element组件对子对象的分配原则如下：

从以下图片可以看出图片宽度的增长方式：

另外要注意的是，Text、Image Component 会根据内容大小自动分配 Preferred Size。

参考
https://docs.unity.cn/cn/2019.4/Manual/script-HorizontalLayoutGroup.html

Upper,Middle,Lower可以理解为垂直方向上的是否居中

勾上后，父容器变化时，这些Button的宽高会改变

如图，把左侧按钮的Scale.x改为2，如果不勾选Use Child Scale，就是布局组不考虑子元素的缩放，那么就叠到一块了。勾上后，则会自动计算Scale增加的宽度，如图：

Unity UI布局（Layout）与布局元素（Layout Element）
给PanelUp和PanelDown添加布局元素，并分别设置Flexible Height为2和1，这个Flexible Height就是用于设置控件显示比例的

https://docs.unity.cn/cn/2019.4/Manual/script-GridLayoutGroup.html

与其他布局组不同，网格布局组会忽略其包含的布局元素的最小大小、偏好大小和灵活大小属性，而是为所有这些元素分配固定大小，此大小则由网格布局组本身的 Cell Size 属性进行定义。

可以设定如图这种元素，观察不同的Start Corner对应起始位置。

如果我们现在有一个需求，必需要让 “父物件大小” 根据 “子物件大小” 进行缩放:

这时如果增加 Button(子物件)，上面有提到，Horizontal Layout Group 会根据子物件的 Layout Element 进行分配子物件大小，而不会修改父物件本身的大小

Horizontal、Vertical Fit有三个参数：

通过上面实例，我们首先使用 Horizontal Layout Group 排列子物件，并在子物件增加 Layout Element 设置Min Width。最后通过 Content Size Fitter 取得子物件 Layout Element 设定父物件大小。至此父物件大小就会根据子物件大小进行缩放。

当 Width 改变时，Height 会依比例改变：

当 Height 改变时，Width 会依比例改变：

调整父物件大小，物体会依据比例贴齐父物件：

调整父物件大小，物体会依据比例包覆父物件：