UGUI筆記5-自動布局

1.LayoutElement

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


image.png

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

image.png
image.png

Image繼承了ILayoutElement赏半,重寫了虛方法贺归,如果沒有圖片就返回0,如果圖片類型是九宮或者重復平鋪類型断箫,那么就返回圖片的原始大小

2.LayoutGroup

LayoutGroups是用來控制子對象位置的拂酣,實現(xiàn)布局,但它不控制自己仲义;當父對象添加了LayoutGroup婶熬,那么子對象的位置不再由子對象自己控制

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

image.png
  • Horizontal & Vertical Layout Group

水平布局和垂直布局都差不多暂刘,區(qū)別只是一個排列是水平方向饺谬,一個是垂直方向,這里選水平方向來介紹.
 Padding:內(nèi)邊距谣拣,可以設(shè)置距離上下左右四個邊框的偏移量
 Spacing:表示cell之間的距離募寨,也就是整個布局中每個單元之間的距離
 Child Alignment:表示對齊方式
 Control Child Size:是否控制子物體的大小(新版UGUI水平和垂直布局都添加了這個選項森缠,網(wǎng)格布局依舊自動控制拔鹰,老版本三個布局組件都默認控制子對象大小)
 Child Force Expand:表示自適應 寬 高贵涵,勾選上后所有子物體會被拉伸以至填充滿整個布局容器

image.png

image.png
  • Grid Layout Group

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

image.png

一般用空物體來作為布局容器(父物體)然后布局容器下就是很多個格子(cell)了列肢,而一個cell下面可能會放很多圖片,例如說要有一個格子的背景圖片宾茂,然后一個物品圖片瓷马,所以一個cell我們也會用空的gameobject來當父節(jié)點。

image.png

3.LayoutControl

LayoutControl主要用于控制組件附加物體的RectTransform刻炒,ContentSizeFitter就是一個LayoutControl組件决采,LayoutGroup下的子物體大小已被控制了自沧,會沖突所以添加不了ContentSizeFitter

  • 自動布局的實際運用

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

總結(jié)

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

1.1 LayoutElement負責提供該組件所附加的物體的控件大小的信息,不提供位置信息衣盾。只提供大小信息寺旺,并且不直接控制自己的大小爷抓,由其它組件控制.例如,LayoutControl阻塑、LayoutGroups

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

父對象LayoutGroups是如何利用控件提供的大小信息來控制子對象大小和位置,并分配空間的呢私植?
 首先忌栅,父對象獲取控件期望的最小的大小,然后分配最小的大小曲稼,即使父控件的空間比子控件的期望大小要小狂秘,子控件也一樣可以獲得它期望的最小值,也就是最小的大小一定能夠得到滿足.
 其次躯肌,如果父對象還有足夠的空間者春,那就分配控件的最合適(期望)的大小給控件.
 最后,如果父控件分配完最合適(期望)大小之后清女,還有額外空間.則按照控件提供的最大(擴展比率)大小钱烟,按照比率分配額外的空間給控件.

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

總之惠窄,父控件分配子控件的大小是按照先保證子控件滿足最小大小的要求蒸眠;然后,如果父控件還有足夠的空間杆融,就分配給子控件按照合適的大欣憧ā;如果還有額外的空間,則分配給子控件比率空間.

再舉個栗子:有A蒋腮、B兩個子控件淘捡,A設(shè)置寬高最小值為0,0池摧,期望值為0案淋,0,最大值2险绘,2踢京,B設(shè)置寬高最小值為0,0宦棺,期望值為100瓣距,100,最大值1代咸,1蹈丸,父控件的大小為160×160.

  • 第一輪 按照最小值分配給A、B呐芥,得到A逻杖、B控件的大小都為0,0
  • 第二輪 父對象此時空間依然還是160×160思瘟,空間足夠荸百,按照適合大小進行分配,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)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市屈尼,隨后出現(xiàn)的幾起案子册着,更是在濱河造成了極大的恐慌,老刑警劉巖脾歧,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件甲捏,死亡現(xiàn)場離奇詭異,居然都是意外死亡鞭执,警方通過查閱死者的電腦和手機司顿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來兄纺,“玉大人大溜,你說我怎么就攤上這事」来啵” “怎么了钦奋?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疙赠。 經(jīng)常有香客問我付材,道長,這世上最難降的妖魔是什么圃阳? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任厌衔,我火速辦了婚禮,結(jié)果婚禮上捍岳,老公的妹妹穿的比我還像新娘葵诈。我一直安慰自己,他們只是感情好祟同,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布作喘。 她就那樣靜靜地躺著,像睡著了一般晕城。 火紅的嫁衣襯著肌膚如雪泞坦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天砖顷,我揣著相機與錄音贰锁,去河邊找鬼。 笑死滤蝠,一個胖子當著我的面吹牛豌熄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播物咳,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锣险,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起芯肤,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤巷折,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后崖咨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锻拘,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年击蹲,在試婚紗的時候發(fā)現(xiàn)自己被綠了署拟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡歌豺,死狀恐怖芯丧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情世曾,我是刑警寧澤缨恒,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站轮听,受9級特大地震影響骗露,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜血巍,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一萧锉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧述寡,春花似錦柿隙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至螟炫,卻和暖如春波附,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背昼钻。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工掸屡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人然评。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓仅财,卻偏偏與公主長得像,于是被迫代替她去往敵國和親碗淌。 傳聞我的和親對象是個殘疾皇子盏求,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,167評論 25 707
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程抖锥,因...
    小菜c閱讀 6,424評論 0 17
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 我想我可能是一顆橡樹種子 從樹上墜落的那一刻起 我便同時擁有了世間的草原和泥土 我熱愛草原的清新與明亮 卻不想去看...
    又在黎明醒來閱讀 289評論 0 0
  • 《解憂雜貨店》(ナミヤ雑貨店の奇蹟)是東野圭吾眾多著名作品之一风喇,而我之所以想介紹這本是因為最近剛讀完這本書宁改。超強...
    安妮海瑟薇1閱讀 595評論 0 0