【Unity基礎(chǔ)知識】Unity開發(fā)之自動(dòng)布局組件

在游戲中，很多UI界面中都會使用到自動(dòng)布局組件，使用其可以大大的節(jié)省開發(fā)時(shí)間，Unity中自動(dòng)布局組件有三種:

1：Horizontal Layout Group，水平布局組件，元素會一個(gè)挨著一個(gè)沿著水平方向排過去，如果超過了這個(gè)該Layout Group寬度，并不會換行，而且直接繼續(xù)排下去。

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

3：Grid Layout Group，網(wǎng)格布局組件。

Horizontal Layout Group游戲中最常見的就是技能欄的展示，如下圖：

Vertical Layout Group游戲中最常見的就是任務(wù)列表的展示，如下圖：

Grid Layout Group游戲中最常見的就是背包或者商城欄，如下圖：

我們今天主要介紹Horizontal Layout Group水平布局組件，下面詳細(xì)介紹該組件：

Padding：Layout邊緣的間隙(左，右，上，下)。

Spacing：Layout元素之間的間隙。

Child Alignment：子元素的排列方式，就是對齊的九種樣式。

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

Control Force Expand：是否強(qiáng)制子元素填充滿多余的空間，自適應(yīng)寬高。

下圖中沒在場景中創(chuàng)建了Panel，將Panel位置設(shè)置在右下角，并為Panel添加了水平自動(dòng)布局組件：

接下來為該組件添加子元素，Image,觀察其變化發(fā)現(xiàn)Image布局并不在Panel內(nèi)部

然后我們在給Panel添加Image：

添加可以得知，每次添加后，Panel內(nèi)部的Image組件會自動(dòng)布局，并且布局的方向是水平方向，游戲中的面板，比如技能欄，還有屬性，任務(wù)，商城，背包欄，可以發(fā)現(xiàn)他們一般情況下位置都是差不多的，無非就是換了個(gè)展示的圖片而已，所以使用上邊的水平自動(dòng)布局組件我們只需要簡單的更改下布局位置即可。

接下來我們一起來創(chuàng)建技能欄,如下圖所示：子元素大小為200*200，居中顯示，水平方向上間距為20，距離頂部和底部距離也為20：

圖所示技能條當(dāng)中的技能呈現(xiàn)水平布局形式，所有我們可以先創(chuàng)建技能條的背景ItemBar，ItemBar中的技能呈現(xiàn)為水平布局形式所以應(yīng)該給添加水平布局組件Horizontal Layout Group。Padding的Top值為20，Bottom值為20，Spacing值為20。設(shè)置子元素對齊方式為Upper Center。

接下來給選擇ItemBar，創(chuàng)建UI控件Image，根據(jù)題意可以得知需要?jiǎng)?chuàng)建五個(gè)即可，Image大小修改為200，200即可：

這時(shí)技能框已經(jīng)有了，接下來需要將需要的素材轉(zhuǎn)換成為2D精靈

因?yàn)閳D中底層圖片是技能外框，所以可以將技能外框圖片拖拽到到Image控件的SourceImage處：

效果如圖：

技能外框做好之后，需要添加技能了，因?yàn)榧寄苁强梢渣c(diǎn)擊的所以可以給每一個(gè)Image外框下添加一個(gè)子控件Button，需要自行調(diào)節(jié)Button大小：

Button下方的Text控件不需要所以將其刪除：

其余幾個(gè)控件都需要重復(fù)上述添加Button，調(diào)節(jié)大小，刪除Text操作：

因?yàn)辄c(diǎn)擊Button控件可以看到其身上是有Image組件，所以可以找到想要的技能精靈圖片，將其添加到SourceImage處，對其他控件重復(fù)操作：

如果上述操作沒有問題的話，大家會發(fā)現(xiàn)我們的技能展示欄就大功告成了：

通過上述的操作，想必大家對Unity水平自動(dòng)布局組件有了一定的認(rèn)識，期待下期和大家再會，我們一起來繼續(xù)暢游在Unity的海洋中!