UGUI筆記5-自動(dòng)布局

1.LayoutElement

這個(gè)組件能提供組件的最大最小和最合適大小信息,比如Text,Image都是實(shí)現(xiàn)了ILayoutElement接口的組件,所以它會(huì)自動(dòng)獲取


image.png

如果一個(gè)RectTransform的物體的其中一個(gè)組件實(shí)現(xiàn)了ILayoutElement接口,同時(shí)這個(gè)RectTransform的物體又添加了Layout Element組件, 那么起作用的是Layout Element

image.png
image.png

Image繼承了ILayoutElement,重寫(xiě)了虛方法,如果沒(méi)有圖片就返回0,如果圖片類(lèi)型是九宮或者重復(fù)平鋪類(lèi)型,那么就返回圖片的原始大小

2.LayoutGroup

LayoutGroups是用來(lái)控制子對(duì)象位置的,實(shí)現(xiàn)布局,但它不控制自己;當(dāng)父對(duì)象添加了LayoutGroup,那么子對(duì)象的位置不再由子對(duì)象自己控制

一共有3種組件如下圖,網(wǎng)格布局(Grid)、水平布局(Horizontal)、垂直布局(Vertical),一個(gè)游戲物體最多只能添加一個(gè)LayoutGroup

image.png
  • Horizontal & Vertical Layout Group

水平布局和垂直布局都差不多,區(qū)別只是一個(gè)排列是水平方向,一個(gè)是垂直方向,這里選水平方向來(lái)介紹.
 Padding:內(nèi)邊距,可以設(shè)置距離上下左右四個(gè)邊框的偏移量
 Spacing:表示cell之間的距離,也就是整個(gè)布局中每個(gè)單元之間的距離
 Child Alignment:表示對(duì)齊方式
 Control Child Size:是否控制子物體的大?。ㄐ掳鎁GUI水平和垂直布局都添加了這個(gè)選項(xiàng),網(wǎng)格布局依舊自動(dòng)控制,老版本三個(gè)布局組件都默認(rèn)控制子對(duì)象大?。?br>  Child Force Expand:表示自適應(yīng) 寬 高,勾選上后所有子物體會(huì)被拉伸以至填充滿(mǎn)整個(gè)布局容器

image.png

image.png
  • Grid Layout Group

Cell Size:子物體大小
 Start Corner: 子物體排列的角度
 Start Axis: 子物體排列的方向
 Constraint: Flexible靈活的( 按照父物體長(zhǎng)寬自動(dòng)橫豎行 ) Fixed Column Count 指定列數(shù) Fixed Row Count 指定行數(shù)

image.png

一般用空物體來(lái)作為布局容器(父物體)然后布局容器下就是很多個(gè)格子(cell)了,而一個(gè)cell下面可能會(huì)放很多圖片,例如說(shuō)要有一個(gè)格子的背景圖片,然后一個(gè)物品圖片,所以一個(gè)cell我們也會(huì)用空的gameobject來(lái)當(dāng)父節(jié)點(diǎn)。

image.png

3.LayoutControl

LayoutControl主要用于控制組件附加物體的RectTransform,ContentSizeFitter就是一個(gè)LayoutControl組件,LayoutGroup下的子物體大小已被控制了,會(huì)沖突所以添加不了ContentSizeFitter

  • 自動(dòng)布局的實(shí)際運(yùn)用

1.創(chuàng)建一個(gè)空物體作為布局容器(父物體),為父物體添加一種布局方式的組件如Grid Layout Group
2.把做好的格子(cell)拖放成Prefab,創(chuàng)建腳本實(shí)例化Prefab,把它設(shè)置為布局容器的子物體即可(setParent),Layout Group會(huì)根據(jù)大小自動(dòng)計(jì)算布局,注意這個(gè)腳本最好掛在布局容器上

總結(jié)

父控件:指的是添加了LayoutGroups組件的GameObject
控件大小信息:指的是控件最小大小,最合適(期望)大小,控件最大大小

1.1 LayoutElement負(fù)責(zé)提供該組件所附加的物體的控件大小的信息,不提供位置信息。只提供大小信息,并且不直接控制自己的大小,由其它組件控制.例如,LayoutControl、LayoutGroups

1.2Text,Image本身就實(shí)現(xiàn)了ILayoutElement接口,提供了控件大小的信息,但它的控件大小信息是系統(tǒng)源碼提供的;如果想修改Text,Image等控件大小的信息,可以給物體添加LayoutElement組件,系統(tǒng)會(huì)讀取LayoutElement組件提供的大小

父對(duì)象LayoutGroups是如何利用控件提供的大小信息來(lái)控制子對(duì)象大小和位置,并分配空間的呢?
 首先,父對(duì)象獲取控件期望的最小的大小,然后分配最小的大小,即使父控件的空間比子控件的期望大小要小,子控件也一樣可以獲得它期望的最小值,也就是最小的大小一定能夠得到滿(mǎn)足.
 其次,如果父對(duì)象還有足夠的空間,那就分配控件的最合適(期望)的大小給控件.
 最后,如果父控件分配完最合適(期望)大小之后,還有額外空間.則按照控件提供的最大(擴(kuò)展比率)大小,按照比率分配額外的空間給控件.

最大值,它是一個(gè)相對(duì)數(shù)值,是0和大于0的數(shù)組成。該值的意思是表示父控件的多個(gè)子控件分配額外空間的一個(gè)比率,最大值設(shè)置是在Layout Element的Flexible Width和Flexible Height.
舉個(gè)栗子:比如一個(gè)父控件下有A、B兩個(gè)子控件,A的最大值是1,B的最大值是2,則表示父控件剩余的空間平分三分,A占用1份,B占用2份,0表示不占用父控件的多余空間.

總之,父控件分配子控件的大小是按照先保證子控件滿(mǎn)足最小大小的要求;然后,如果父控件還有足夠的空間,就分配給子控件按照合適的大?。蝗绻€有額外的空間,則分配給子控件比率空間.

再舉個(gè)栗子:有A、B兩個(gè)子控件,A設(shè)置寬高最小值為0,0,期望值為0,0,最大值2,2,B設(shè)置寬高最小值為0,0,期望值為100,100,最大值1,1,父控件的大小為160×160.

  • 第一輪 按照最小值分配給A、B,得到A、B控件的大小都為0,0
  • 第二輪 父對(duì)象此時(shí)空間依然還是160×160,空間足夠,按照適合大小進(jìn)行分配,A適合大小0,0,B適合大小100,100
  • 第三輪 分配完父容器還剩余60×60,還有額外空間,則按照A、B設(shè)置的最大值平分分配,A最大值2,B最大值1,一共3份,60/3=20,每份20,那么A分到的就是40×40,B分到的就是20×20,加上之前分配的,則A控件大小是40×40,B控件大小120×120,分配完畢.
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,052評(píng)論 25 709
  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線(xiàn)程,因...
    小菜c閱讀 7,334評(píng)論 0 17
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評(píng)論 1 92
  • 我想我可能是一顆種子 從樹(shù)上墜落的那一刻起 便同時(shí)擁有了世間的空氣和泥土 我熱愛(ài)空氣的清新與明亮 不想去看泥土下的...
    又在黎明醒來(lái)閱讀 410評(píng)論 0 0
  • 《解憂(yōu)雜貨店》(ナミヤ雑貨店の奇蹟)是東野圭吾眾多著名作品之一,而我之所以想介紹這本是因?yàn)樽罱鼊傋x完這本書(shū)。超強(qiáng)...
    安妮海瑟薇1閱讀 749評(píng)論 0 0

友情鏈接更多精彩內(nèi)容