Unity3D – Flexible Container

簡介

這篇想跟大家分享一下在Unity3D中製作一個可以依照容器內的物件數量來『自動』的縮放容器內容,這篇想跟大家講到兩個概念,uGUI中的LayoutGroup進階應用以及很重要的『Anchors』。

Container設定

先新增Container,可以把他想是最底層的一個大箱子,在Anchors的設定,由於我們想讓他自由的伸縮,所以我們就不做延展的功能,並且靠左即可,寬度與長度也先不設定,因為之後會透過程式來調節之。

應用Scroll View

在次要容器我們使用uGUI的『Scroll View』,因為它當有物件的變化時他會自動的有Tween的功能。

而Scroll View的內容要放置在Content中,因為我們要讓這之中的物件可以自動水平排列,並且排列完成後要讓他Fit好,產出長寬給予Content產生新的長寬,所以要使用到LayoutGroup的Horizontal+Content Size Fitter,在前一篇有介紹過。大家可以依照上圖設定來作動。

而Content的Anchors的設定必須要靠左上,而且不能使用自動依照父物件長寬延展。

新增子元素

最後要新增最上層的子物件,而我們分成三個部分,並透過LayoutGroup的Gird來應用,在Constraint設定我們分給別不同的Flex模式,這樣才可以看關閉子物件時大容器有什麼差別。Anchorsㄧ樣要至左上,且不延展的模式。

上圖就是我們在上述所介紹的子物件排佈與設定,接著我們就要寫一個簡單的程式來讓我們可以時時的偵測子物件容器。

整合測試

程式方面我們由於要取得Content的長寬,進而改變父物件的長寬,通常你假如Anchors設定延展時,只有父物件可以不寫程式影響控制子物件。所以這邊就要使用程式來改變之。大家可以看到上圖的程式碼,物件的長寬代表程式碼屬性是『RectTransform->sizeDelta』,我們就指定父物件的長寬會等於子物件的長寬。

該程式我們可以附著在父物件上,並且把子物件的Content附著之,一切就大功告成了。

小結

上面是展示影片,可以看到不管你是關閉子物件中的子物件,或是關閉整個子物件,會根據子物件中的子物件LayoutGroup來控制子物件,所有子物件整合起來控制父物件,其實非常的直觀,並透過程式控制即可。

發佈留言

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