自动布局 Auto layout

这里看一下三种常见的布局方式以及一个布局插件FlowLayout。

Horizontal Layout

它只处理横向排列，只有一排，大小可以不相同

image.png

Padding:内部空间与边界的距离
Spacing:每个元素的间隔，因为只有一排，所以一定是横向的间隔
Child Alignment: 排列起点

以上的内容都很好理解，试验一下就可以体会，这里主要看Child Controls Size和 Child Force Expand。
Child Force Expand 根据名称，表示子物件强制扩展，没有勾选时，会紧密排列，（这里先取消Padding和spacing的影响）

image.png

勾选时，会将剩余的横向空间除以元素个数来扩展排列，例如图中的每个元素的宽度分别是100/200/400 ，边框总长1000，则剩余空间为300，每一个就会被分配100的横向空间。

image.png

如果在Child Force Expand 勾上时再勾上 Child Controls Size，则会让元素横向铺满整个空间，各自横向占据的比例取决于每个元素的Flexible Width，即权重。可以通过如图所示的方式点击 Layout Properties查看

image.png

如果想改变这个值，可以添加Layout Element组件来实现。
然后我们可以看到在Horizontal Layout里，Child Force Expand 的height勾上好像没有什么用，因为它始终只有一排，但是如果Child Controls Size 的height也勾上就可以让元素纵向扩展。

image.png

image.png

。

Vertical Layout

与 Horizontal Layout同理，只是之前试用于横向的要试用于纵向。

Grid Layout

前面2种都只能排列一行或者一列，如果要形成网格状的，就要用到Grid Layout 了，不过它与前两种不同，要是用Grid Layout，每一个元素都是相同大小的，由 Cell Size决定。

image.png

里面的内容都比较好理解，这里介绍下Content Size Fitter，这个组件用于根据子物体大小来改变父物体大小，一个常用的场景就是用在ScrollView里

image.png

我们需要ScrollView里的 Content能够根据内部元素的多少来动态的改变大小，就可以在Content里使用GridLayout时加上一个Content Size Fitter。在需要改变的方向上设置为Preferred Size。

image.png

效果如下：

image.png

一个应用：根据文本内容改变背景图片

我们要想让Text的大小根据文本内容改变，就可以在Text里加上Content Size Fitter，

image.png

但很多场景下本文是有一个背景图片的，希望这个背景图片也跟着拉伸，可以这样操作：将Text作为Image的子物体，Image设置如下：

image.png

这样，随着Text的改变，Image大小也对应的变化。

image.png

Flow Layout

Horizontal Layout 和 Vertical Layout 虽然可以让元素大小各不相同，但是只能排一行或者一列；Grid Layout虽然可以排多列多行，但是元素大小必须相同，如果想要大小不同的多行排列怎么办呢？这里可以用到别人写的一个Compenent:Flow Layout Group,直接把脚本放在父物体里，实现效果如下

image.png

image.png

FlowLayout脚本下载地址：
https://link.jianshu.com/?t=https://pan.baidu.com/s/1jH4qe4e