相信很多剛接觸UGUI的開發(fā)者找筝,對(duì)于這套系統(tǒng)中RectTransform里的position,anchor慷吊,pivot都或多或少有些不熟悉袖裕,不知道這些是干嘛用的,為此溉瓶,本篇文章就給大家介紹下這幾個(gè)概念急鳄,不過主要還是會(huì)以Anchor和Pivot為主谤民,position會(huì)帶過介紹。
1疾宏、Pivot軸心
旋轉(zhuǎn)张足、大小和縮放修改發(fā)生在主軸Pivot點(diǎn)周圍,因此Pivot的位置會(huì)影響旋轉(zhuǎn)坎藐、調(diào)整大小或縮放的結(jié)果为牍。當(dāng)工具欄Pivot/Center按鈕設(shè)置為Pivot模式時(shí),可以在場(chǎng)景視圖中移動(dòng)矩形變換的Pivot小圓圈岩馍。
如圖:旋轉(zhuǎn)操作為繞著這個(gè)點(diǎn)旋轉(zhuǎn)碉咆。
注:
Pivot是相對(duì)于自身的,(0,0)為自己左下角蛀恩,(1,1)為自己右上角疫铜。(可以把這個(gè)UI看成這個(gè)點(diǎn))
2、Anchors錨點(diǎn)
如果一個(gè)RectTransform的父物體也是RectTransform双谆,那么子RectTransform可以以各種方式錨定到父RectTransform壳咕。
例如,子節(jié)點(diǎn)可以錨定在父節(jié)點(diǎn)的中心或其中一個(gè)角上佃乘。
錨定也允許孩子與父母的寬度或高度一起伸展囱井。矩形的每個(gè)角都有一個(gè)固定的錨點(diǎn)偏移量驹尼,即矩形的左上角有一個(gè)固定的錨點(diǎn)偏移量趣避,等等。這樣新翎,矩形的不同角就可以固定在父矩形的不同點(diǎn)上程帕。
如:
- 錨點(diǎn)的位置以父矩形寬度和高度的分?jǐn)?shù)(或百分比)來定義。
- 0.0(0%)對(duì)應(yīng)于左側(cè)或底部地啰,0.5(50%)對(duì)應(yīng)于中部愁拭,1.0(100%)對(duì)應(yīng)于右側(cè)或頂部。
- 但錨點(diǎn)并不局限于兩側(cè)和中部;它們可以錨定到父矩形中的任何點(diǎn)上亏吝。
- Min(X,Y)為左下角的點(diǎn)在父物體上的位置岭埠,Max(X,Y)為右上角點(diǎn)在父物體上的位置。
- 您可以分別拖動(dòng)每個(gè)錨蔚鸥,或者如果它們?cè)谝黄鹣郏梢酝ㄟ^單擊它們之間中間的位置并拖動(dòng)將它們拖到一起。如果在拖動(dòng)錨點(diǎn)時(shí)按住Shift鍵止喷,矩形的相應(yīng)角將與錨點(diǎn)一起移動(dòng)馆类。
- 錨柄的一個(gè)有用的特性是,它們會(huì)自動(dòng)吸附到兄弟矩形的錨上弹谁,以實(shí)現(xiàn)精確定位乾巧。
3句喜、Anchor presets錨點(diǎn)預(yù)設(shè)
在Inspector中,可以在Rect Transform組件的左上角找到錨預(yù)置按鈕沟于。單擊該按鈕將彈出錨預(yù)置下拉菜單咳胃。從這里您可以快速地從一些最常見的錨定選項(xiàng)中進(jìn)行選擇。您可以將UI元素錨定到父元素的側(cè)面或中間社裆,或者與父元素大小一起拉伸拙绊。水平和垂直錨定是獨(dú)立的。
錨預(yù)置按鈕顯示當(dāng)前選擇的預(yù)置選項(xiàng)(如果有的話)泳秀。如果將水平軸或垂直軸上的錨設(shè)置為與任何預(yù)設(shè)位置不同的位置标沪,則會(huì)顯示自定義選項(xiàng)。
Anchor Min對(duì)應(yīng)場(chǎng)景視圖中左下方的Anchor handle, Anchor Max對(duì)應(yīng)右上方的handle嗜傅。
矩形的position字段根據(jù)錨頂點(diǎn)是否在一起(產(chǎn)生固定的寬度和高度)或是否分開(導(dǎo)致矩形與父矩形一起拉伸)而不同金句。
方式1:當(dāng)所有的錨柄在一起時(shí),顯示的字段是Pos X吕嘀、Pos Y违寞、寬度和高度。Pos X和Pos Y的值表示pivot相對(duì)于錨點(diǎn)的位置偶房。
方式2:當(dāng)錨被分開時(shí)趁曼,字段可以部分或完全改變?yōu)樽蟆⒂易匮蟆⑸系踩颉⑾隆_@些字段定義錨定義的矩形內(nèi)的填充掰盘。如果錨水平分開摄悯,則使用左字段和右字段,如果錨垂直分開愧捕,則使用頂部和底部字段奢驯。
注意,在anchor或pivot字段中更改值通常會(huì)反向調(diào)整position值次绘,以使矩形保持原位瘪阁。在不需要這樣做的情況下,通過單擊檢查器中的R按鈕啟用原始編輯模式邮偎。這使得anchor和pivot值能夠在不改變?nèi)魏纹渌档那闆r下被改變管跺。這可能會(huì)導(dǎo)致矩形在視覺上移動(dòng)或調(diào)整大小,因?yàn)樗奈恢煤痛笮∪Q于anchor和pivot值钢猛。
看下圖預(yù)設(shè)布局伙菜,可以注意到:布局分為左側(cè)、上側(cè)和右下命迈。
左和上只是方位標(biāo)記贩绕,用啥要選擇右下角部分火的;
右下部分的左上9個(gè)是一個(gè)點(diǎn),所有錨柄在一起淑倾,大小不會(huì)受父物體影響馏鹤,父物體大小變化子物體pivot到錨點(diǎn)位置保持不變; 如上面方式1
其他為2個(gè)點(diǎn),最右下角的為四個(gè)點(diǎn)娇哆,大小會(huì)受父物體影響;如上面方式2
注意區(qū)分:
Pivot是相對(duì)于自身的湃累,(0,0)為自己左下角,(1,1)為自己右上角碍讨。(可以把這個(gè)UI看成這個(gè)點(diǎn))
Anchor為相對(duì)于父物體的治力,(0,0)為父物體左下角,(1,1)為父物體右上角勃黍。
4宵统、Blue Print Mode(藍(lán)圖模式) 、 Raw Edit Mode(原始編輯模式)
參考鏈接:https://mp.weixin.qq.com/s/2VZBlS5K5H-Y-RwKOZCJdQ
http://tsubakit1.hateblo.jp/entry/2014/12/19/033946#BluePrint-Mode%E3%81%A8Raw-Edit-Mode
Blue Print Mode (藍(lán)圖模式)
勾選后覆获,就算UI被調(diào)整Rotation或Scale參數(shù)马澈,UI的矩形框也不變。
Raw Edit Mode (原始編輯模式)
在 Inspector 中調(diào)整 Pivot 和 Anchor 時(shí)弄息,物體會(huì)維持目前的位置與大小(Inspector 中數(shù)值部分)痊班,請(qǐng)注意數(shù)值部分:
Inspector 中調(diào)整 Pivot:
Inspector 中調(diào)整 Anchor:
5、從腳本端操作布局
從腳本端操作uGUI時(shí)摹量,編輯符號(hào)和RectTransform字段不匹配有點(diǎn)復(fù)雜涤伐。沒有諸如Pos X之類的參數(shù),并且寬度/高度也不存在荆永。
在這種情況下废亭,將Inspector更改為Debug模式并公開RectTransform的隱藏參數(shù)国章。通過這個(gè)我們可以看到參數(shù)通常指向的內(nèi)容具钥。