Unity3D – UGUI Layout Group + Fitter

簡介

由於Alice在之前有寫到關於『Layout Group』相關內容,而我這邊就我所知道的內容在幫其補充之,讓大家可以更完整的使用Layout Group功能,並加上Content Size Fitter,在使用ugui上也可以很簡單且有效率。

Layout Group

ugui提供了三種Layout Group,分別是Gird、Horizontal、Vertical,在Alice之前有講述到Vertical,我就不展示Vertical部分。

Horizontal:這邊我再說一下流程,你要排列的內容可以放在一個容器中,並將該容器掛載Layout Group。要注意的是在同一個容器中只能掛載一種Layout Group。

大家可以看到上圖,紅色框框是控制『Padding』,所有物件或是父物件容器對於阿公物件的設定,而不是子物件喔,這邊要注意。而橙色的『Spacing』才是控制子物件之間的距離。

而關於下面的『Control Child Size』會根據父物件的大小來同步平均縮放子物件的大小,『Use Child Scale』則會是保有子物件的原始大小設定而不會跟著父物件容器改變。

Grid:這功能算是整合了Vertical+Horizontal,在『Padding』也是在設定父物件的參數,而這邊的『Cell Size』是直接給子物件大小的長寬參數,『Spacing』每個子物件的間距,『Start Conrner』是子物件起始對齊位置。

接下來要拆解來說明,『Start Axis』是你要選擇垂直排列或是水平排列,如上圖。

『Constraint』是用來設定你排序的規則,Grid提供了三個選項,『Flexible』會根據你的父物件大小來做最適合的(最擠)的排部。

『Fixed Column Count』依照你所設定的『列數』來平均排列。

『Fixed Row Count』依照你所設定的『行數』來平均排列。

Content Size Fitter

『Content Size Fitter』算是蠻重要的一個功能,通常你透過程式來新增子物件時,並要新增再Scroll View中,你必須Fit Scroll View中的Content大小,他才可以偵測Scroll bar的『母數』。

Fitter有對垂直與水平進行Fit功能,而該功能有提供三個選項,『Unconstrained』不做任何Fit動作,『Min Size』Fit最小化、縮最緊的動作,『Preferred Size』系統會自己設定最適合該父物件配合子物件的大小。

大家可以看到Fit前後的比較圖,設定完成後父物件會完全貼合子物件(我參數選定Preferred)。

小結

這篇所提到的功能都是非常常用也很受用,當你在Unity遇到要規則排列物件,無論是動態排列或是靜態排列,尤其是動態排列,是非常好用的功能。而Fit還有提供另一種元件『Aspect Radio Fitter』,這比較不常用,但是應該也是很適合用在動態Fit的方式,且相較於『Content Size Fitter』更適合用程式來控制。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *