【Unity基础知识】Unity开发之自动布局组件

在游戏中，很多UI界面中都会使用到自动布局组件，使用其可以大大的节省开发时间，Unity中自动布局组件有三种:

1：Horizontal Layout Group，水平布局组件，元素会一个挨着一个沿着水平方向排过去，如果超过了这个该Layout Group宽度，并不会换行，而且直接继续排下去。

2：Vertical Layout Group，垂直布局组件，垂直布局组件。

3：Grid Layout Group，网格布局组件。

Horizontal Layout Group游戏中最常见的就是技能栏的展示，如下图：

Vertical Layout Group游戏中最常见的就是任务列表的展示，如下图：

Grid Layout Group游戏中最常见的就是背包或者商城栏，如下图：

我们今天主要介绍Horizontal Layout Group水平布局组件，下面详细介绍该组件：

Padding：Layout边缘的间隙(左，右，上，下)。

Spacing：Layout元素之间的间隙。

Child Alignment：子元素的排列方式，就是对齐的九种样式。

Control Child Size：是否可以控制子元素的宽高。

Control Force Expand：是否强制子元素填充满多余的空间，自适应宽高。

下图中没在场景中创建了Panel，将Panel位置设置在右下角，并为Panel添加了水平自动布局组件：

接下来为该组件添加子元素，Image,观察其变化发现Image布局并不在Panel内部

然后我们在给Panel添加Image：

添加可以得知，每次添加后，Panel内部的Image组件会自动布局，并且布局的方向是水平方向，游戏中的面板，比如技能栏，还有属性，任务，商城，背包栏，可以发现他们一般情况下位置都是差不多的，无非就是换了个展示的图片而已，所以使用上边的水平自动布局组件我们只需要简单的更改下布局位置即可。

接下来我们一起来创建技能栏,如下图所示：子元素大小为200*200，居中显示，水平方向上间距为20，距离顶部和底部距离也为20：

图所示技能条当中的技能呈现水平布局形式，所有我们可以先创建技能条的背景ItemBar，ItemBar中的技能呈现为水平布局形式所以应该给添加水平布局组件Horizontal Layout Group。Padding的Top值为20，Bottom值为20，Spacing值为20。设置子元素对齐方式为Upper Center。

接下来给选择ItemBar，创建UI控件Image，根据题意可以得知需要创建五个即可，Image大小修改为200，200即可：

这时技能框已经有了，接下来需要将需要的素材转换成为2D精灵

因为图中底层图片是技能外框，所以可以将技能外框图片拖拽到到Image控件的SourceImage处：

效果如图：

技能外框做好之后，需要添加技能了，因为技能是可以点击的所以可以给每一个Image外框下添加一个子控件Button，需要自行调节Button大小：

Button下方的Text控件不需要所以将其删除：

其余几个控件都需要重复上述添加Button，调节大小，删除Text操作：

因为点击Button控件可以看到其身上是有Image组件，所以可以找到想要的技能精灵图片，将其添加到SourceImage处，对其他控件重复操作：

如果上述操作没有问题的话，大家会发现我们的技能展示栏就大功告成了：

通过上述的操作，想必大家对Unity水平自动布局组件有了一定的认识，期待下期和大家再会，我们一起来继续畅游在Unity的海洋中!