Unity2019學習:常用功能--Unity UI自動佈局相關組件

Unity UI還提供了一些自動佈局相關的組件。

Aspect Ratio Fitter(寬高比適應器)

Aspect Ratio Fitter寬高比適配器組件可以控制佈局對象的大小,Aspect Ratio Fitter有2個屬性,Aspect Mode用於設置適配模式,Aspect Ratio用於設置對象的寬/高比例。

選項Width Controls Height和Height Controls Width可以通過寬度自動設置高度,或者通過高度自動設置寬度。

在這裏插入圖片描述

Fit In Parent選項會根據父遊戲對象的形狀自動填充,但是不會超出父遊戲對象的範圍。

在這裏插入圖片描述

Envelope Parent選項會充滿整個父遊戲對象,如果比例不一致則會超出父遊戲對象的範圍。

在這裏插入圖片描述

Horizontal Layout Group(水平佈局組)組件和Vertical Layout Group(垂直佈局組)組件

Horizontal Layout Group水平佈局組件和Vertical Layout Group垂直佈局組件可以將遊戲對象下的子一級遊戲對象水平或者垂直分佈。

Child Force Expand屬性用於設置子元素擴展。當使用Vertical Layout Group垂直佈局組件的時候,選中Child Force Expand屬性中的Height選項時候,子元素會自動增加間距使其在高度上佈滿父元素。

在這裏插入圖片描述

如果去掉Height選項,則不會自動佈滿。

在這裏插入圖片描述

Control Child Size屬性會強制修改子元素大小,必須配合Child Force Expand屬性同時使用。當選中Control Child Size屬性的Width選項時候,會修改子元素寬度以使用父元素寬度。同樣,當選中Control Child Size屬性的Height選項時候,會修改子元素高度以使用父元素高度。

在這裏插入圖片描述

Grid Layout Group(網格佈局組)組件

Grid Layout Group網格佈局組件可以將遊戲對象下的子一級遊戲對象按照網格進行分佈。

Padding屬性是子元素和父元素之間的填充大小。Spacing是子元素之間的間距,這裏間距分X軸間距和Y軸間距。Cell Size是子元素的大小。使用了Grid Layout Group網格佈局組件以後,子元素大小都是有父節點的Grid Layout Group網格佈局組件控制。

在這裏插入圖片描述

Constraint屬性可以設置具體的行數或者列數,默認“Flexible”是根據父節點大小自動分佈。選擇“Fixed Row Count”爲固定行數,並且需要設置具體多少行。

在這裏插入圖片描述

Content Size Fitter(內容尺寸適應器)組件

Content Size Fitter組件可以根據內容來控制當前元素的大小。

在有Horizontal Layout Group水平佈局組件或者Vertical Layout Group垂直佈局組件或者Grid Layout Group網格佈局組件的遊戲對象上添加以後,設置“Horizontal Fit”屬性或者“Vertical Fit”屬性爲“Min Size”,就可以將所在遊戲對象的大小設置爲根據其子元素內容的大小設定的大小。

在這裏插入圖片描述

在Text文本遊戲對象,添加了Content Size Fitter組件,選擇“Preferred Size”,可以將遊戲對象的大小設置成根據文本內容的多少自動設定大小。

在這裏插入圖片描述

Layout Element(佈局元素)組件

Layout Element組件可以根據父元素大小自動調整大小的組件。

Layout Element組件的Min Width/Min Height是最先分配的值大小。Preferred Width/Preferred Height是在父元素大小足夠的情況下分配的值大小。Flexible Width/Flexible Height是自動充滿父元素大小。

Layout Element組件使用需要父遊戲對象有Horizontal Layout Group水平佈局組件或者Vertical Layout Group垂直佈局組件。

在父遊戲對象添加Vertical Layout Group垂直佈局組件,設置其Child Force Expand高度不強制擴展。設置Control Child Size高度有父元素控制。

在這裏插入圖片描述

設置所有子元素的Layout Element組件的Min Height爲“40”,即最小高度是40。

在這裏插入圖片描述

設置第一個元素的Preferred Height爲100,則第一個元素在高度足夠的情況下,高度會在40-100之間變化。

在這裏插入圖片描述

設置第一個元素的Flexible Height大於0,則第一個元素會自動修改高度充滿父元素。

在這裏插入圖片描述

B站視頻鏈接:https://www.bilibili.com/video/BV1iA411H7H5/

示例場景:https://download.csdn.net/download/wuyt2008/14934069

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章