自动布局 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

你可能感兴趣的:(自动布局 Auto layout)