UGUI中Anchor和Pivot詳解

相信很多剛接觸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)碉咆。

image
image

注:

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è)角上佃乘。

image

錨定也允許孩子與父母的寬度或高度一起伸展囱井。矩形的每個(gè)角都有一個(gè)固定的錨點(diǎn)偏移量驹尼,即矩形的左上角有一個(gè)固定的錨點(diǎn)偏移量趣避,等等。這樣新翎,矩形的不同角就可以固定在父矩形的不同點(diǎn)上程帕。

如:

image
  • 錨點(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ú)立的。

image

錨預(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)的位置偶房。

image

方式2:當(dāng)錨被分開時(shí)趁曼,字段可以部分或完全改變?yōu)樽蟆⒂易匮蟆⑸系踩颉⑾隆_@些字段定義錨定義的矩形內(nèi)的填充掰盘。如果錨水平分開摄悯,則使用左字段和右字段,如果錨垂直分開愧捕,則使用頂部和底部字段奢驯。

image
image

注意,在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è)和右下命迈。

image

左和上只是方位標(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的矩形框也不變。

image
image

Raw Edit Mode (原始編輯模式)

在 Inspector 中調(diào)整 Pivot 和 Anchor 時(shí)弄息,物體會(huì)維持目前的位置與大小(Inspector 中數(shù)值部分)痊班,請(qǐng)注意數(shù)值部分:

Inspector 中調(diào)整 Pivot:

image

Inspector 中調(diào)整 Anchor:

image

5、從腳本端操作布局

從腳本端操作uGUI時(shí)摹量,編輯符號(hào)和RectTransform字段不匹配有點(diǎn)復(fù)雜涤伐。沒有諸如Pos X之類的參數(shù),并且寬度/高度也不存在荆永。

在這種情況下废亭,將Inspector更改為Debug模式并公開RectTransform的隱藏參數(shù)国章。通過這個(gè)我們可以看到參數(shù)通常指向的內(nèi)容具钥。

image
image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市液兽,隨后出現(xiàn)的幾起案子骂删,更是在濱河造成了極大的恐慌,老刑警劉巖四啰,帶你破解...
    沈念sama閱讀 218,546評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宁玫,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡柑晒,警方通過查閱死者的電腦和手機(jī)欧瘪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匙赞,“玉大人佛掖,你說我怎么就攤上這事妖碉。” “怎么了芥被?”我有些...
    開封第一講書人閱讀 164,911評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵欧宜,是天一觀的道長。 經(jīng)常有香客問我拴魄,道長冗茸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評(píng)論 1 294
  • 正文 為了忘掉前任匹中,我火速辦了婚禮夏漱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顶捷。我一直安慰自己麻蹋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6 392
  • 文/花漫 我一把揭開白布焊切。 她就那樣靜靜地躺著扮授,像睡著了一般。 火紅的嫁衣襯著肌膚如雪专肪。 梳的紋絲不亂的頭發(fā)上刹勃,一...
    開封第一講書人閱讀 51,598評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音嚎尤,去河邊找鬼荔仁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛芽死,可吹牛的內(nèi)容都是我干的乏梁。 我是一名探鬼主播,決...
    沈念sama閱讀 40,338評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼关贵,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼遇骑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起揖曾,我...
    開封第一講書人閱讀 39,249評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤落萎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后炭剪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體练链,經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3 336
  • 正文 我和宋清朗相戀三年奴拦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了媒鼓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖绿鸣,靈堂內(nèi)的尸體忽然破棺而出瓷产,到底是詐尸還是另有隱情,我是刑警寧澤枚驻,帶...
    沈念sama閱讀 35,731評(píng)論 5 346
  • 正文 年R本政府宣布濒旦,位于F島的核電站,受9級(jí)特大地震影響再登,放射性物質(zhì)發(fā)生泄漏尔邓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3 330
  • 文/蒙蒙 一锉矢、第九天 我趴在偏房一處隱蔽的房頂上張望梯嗽。 院中可真熱鬧,春花似錦沽损、人聲如沸灯节。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽炎疆。三九已至,卻和暖如春国裳,著一層夾襖步出監(jiān)牢的瞬間形入,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評(píng)論 1 270
  • 我被黑心中介騙來泰國打工缝左, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留亿遂,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3 370
  • 正文 我出身青樓渺杉,卻偏偏與公主長得像蛇数,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子是越,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2 355

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