RectTransform屬性一覽

前言

最近要做UI，有時(shí)候需要在代碼中調(diào)整改變UI控件的屬性，比如位置盒卸、大小等，然而在NGUI里面次氨，控制UI控件的位置等屬性的是RectTransform這個(gè)組件蔽介，這個(gè)組件繼承自Transform組件，卻增加許多自己的特性，在不了解這些特性的情況下魯莽的去使用它虹蓄，會(huì)導(dǎo)致出現(xiàn)很多匪夷所思的問(wèn)題犀呼，而且使用起來(lái)也不夠得心應(yīng)手，于是決定研究一下RectTransform到底是如何工作的

你將學(xué)得到什么薇组？

• 什么是Pivot
• 什么是Anchor
• 如何結(jié)合使用Pivot和Anchor來(lái)調(diào)整UI
• 了解RectTransform其他屬性的作用

一外臂、Pivot屬性詳解

首先為了讓大家更好的理解內(nèi)容，我在Unity中創(chuàng)建了兩個(gè)UI控件律胀，一個(gè)Plane控件宋光，作為父對(duì)象，一個(gè)Image控件炭菌，最為子對(duì)象罪佳，如下圖：

兩個(gè)演示用的UI空間

然后我們選中紅框，來(lái)看看它的RectTransform組件的屬性娃兽，如下圖：

紅框的RectTransform組件

你會(huì)看到有一堆的數(shù)據(jù)菇民，那么這些數(shù)據(jù)是如何最終決定UI在屏幕中的位置和大小的呢尽楔？我們首先來(lái)看第一個(gè)重要的屬性Pivot投储，因?yàn)樗斫?strong>RectTransform這套UI布局方案的第一個(gè)關(guān)鍵

Pivot屬性

Pivot我們可以暫且稱它為中心軸（這個(gè)翻譯不太準(zhǔn)確，但為了便于理解阔馋，先這么叫著）玛荞，它是一個(gè)X,Y值范圍是0到1的點(diǎn)，這個(gè)點(diǎn)的會(huì)在Anchor（錨點(diǎn)）計(jì)算位置的時(shí)候會(huì)使用到呕寝，下面用一張圖來(lái)解釋Pivot點(diǎn)的位置

**Pivot**圖解

設(shè)置Pivot的坐標(biāo)系如上圖勋眯，(0,0)表示紅框物體的左下角的點(diǎn)，(1,1)表示紅框物體的右上角的點(diǎn)

二下梢、Anchor屬性詳解

關(guān)于Anchor錨點(diǎn)可能接觸過(guò)UI的朋友都了解一些客蹋，但是Unity中Anchor應(yīng)該稱它為錨框更為合理，因?yàn)樗怯蓛蓚€(gè)錨點(diǎn)(Min孽江，Max)組成的一個(gè)矩形讶坯，當(dāng)然也可以組成一個(gè)點(diǎn)（兩個(gè)點(diǎn)重合）

錨框

而Unity為了方便我們調(diào)整錨框，在編輯視圖給出了錨框的標(biāo)示岗屏，如下圖：

錨框標(biāo)示(重合情況)

當(dāng)然上圖是兩個(gè)錨點(diǎn)重合的情況辆琅，所以看上去是一個(gè)點(diǎn)，下面我們利用兩個(gè)錨點(diǎn)不重合的情況來(lái)說(shuō)明一下：

錨框標(biāo)示

三这刷、Pivot和Anchor的結(jié)合

在了解了Pivot和Anchor分別是什么后婉烟，我們就來(lái)看看Unity是如何使用這個(gè)兩個(gè)東西來(lái)控制UI的布局

第1種情況：兩個(gè)錨點(diǎn)重合時(shí)

我們先來(lái)看看兩個(gè)錨點(diǎn)重合時(shí)的情況，這種情況是我們最常用也是最容易理解的方式

第1種情況

我們將Anchor錨點(diǎn)放在黑框的正中間暇屋，然后將Pivot中心軸放在紅框的正中間似袁，然后我們改變黑框的大小和位置，看看紅框會(huì)有什么變化，如下圖：

變化圖示

我們從上圖可以看出昙衅，不管我們?cè)趺赐蟿?dòng)黑框屋彪，改變他大小和位置愿题，紅框的Pivot點(diǎn)到Anchor點(diǎn)的距離是始終不變的慧起，也就是說(shuō)紅框物體會(huì)參照錨點(diǎn)來(lái)實(shí)時(shí)調(diào)整自己的位置，使自己的Pivot點(diǎn)到錨點(diǎn)的距離始終保持一致挠铲，而且值得一提的是婴谱，在這種情況下蟹但，紅框物體的RectTransform組件中的屬性是Width和Height，這個(gè)屬性在后面的情況中會(huì)發(fā)生變化谭羔，大家需要注意下

Paste_Image.png

總結(jié)下第1種情況的特點(diǎn)就是：子物體的大小不會(huì)隨著父物體的大小變化而變化华糖，但是位置會(huì)根據(jù)Pivot點(diǎn)到Anchor點(diǎn)的距離一致的原則發(fā)生對(duì)應(yīng)的變化

第2種情況：兩個(gè)錨點(diǎn)不重合時(shí)，即錨框的情況

當(dāng)兩個(gè)錨點(diǎn)（AnchorMin和AnchorMax）不重合時(shí)瘟裸，兩點(diǎn)就會(huì)確定一個(gè)矩形客叉，這個(gè)矩形就是我們的錨框，如下圖中的綠框就是我們的錨框區(qū)域

錨框區(qū)域

此時(shí)我們?cè)儆^察一下紅框物體的RectTransform屬性话告，發(fā)現(xiàn)屬性分別變成了Left兼搏、Top、Right沙郭、Bottom

Left佛呻、Top、Right病线、Bottom

那么這4個(gè)屬性分別表示什么呢吓著？我們看看下面的這個(gè)圖

Left和Bottom圖解

從上圖我們看出，Unity以錨框的左下角為坐標(biāo)系的原地(0, 0)送挑，然后紅框的Left和Bottom兩個(gè)數(shù)確定紅框左下角的點(diǎn)在坐標(biāo)系中的位置绑莺，原點(diǎn)和紅框左下角的點(diǎn)確定一段距離（即上圖的綠色箭頭），不管黑框如何變化惕耕，這段距離都保持不變

Right和Top圖解

同理纺裁，如上圖所示，Unity以錨框的右上角為原點(diǎn)(0,0)赡突，然后紅框的Right和Top兩個(gè)數(shù)確定紅框的右上角的在坐標(biāo)系中的位置对扶，原地和紅框的右上角的點(diǎn)確定一段距離（即上圖的綠色箭頭），不管黑框如何邊框惭缰，這段距離都保持不變

在黑框大小和位置變化的時(shí)候浪南，Unity會(huì)保證紅框的左下角到錨框的左下角距離不變，同時(shí)紅框的右上角到錨框的右上角距離不變漱受，來(lái)確定紅框的相對(duì)位置和大小络凿，看下圖來(lái)感受一下變化：

變化圖示

注意上圖中紅框左下角到黑框左下角的距離骡送，以及紅框右上角到黑框右上角的距離，他們都是不變的

三絮记、anchoredPosition屬性詳解

anchoredPosition根據(jù)名字的含義摔踱，我們大概可以猜出他是根據(jù)anchor錨點(diǎn)得出來(lái)個(gè)一個(gè)位置屬性，他本身是一個(gè)點(diǎn)怨愤，如果在AnchorMin和AnchorMax是重合的情況下派敷，anchoredPosition就是表示錨點(diǎn)到Pivot的位置，如下圖所示：

anchoredPosition圖解一

但是如果AnchorMin和AnchorMax不重合的時(shí)候撰洗，anchoredPosition就比較復(fù)雜了篮愉，在這種情況下，Unity會(huì)根據(jù)Pivot差导、AnchorMin和AnchorMax計(jì)算出一個(gè)錨點(diǎn)试躏，然后在通過(guò)Pivot和錨點(diǎn)來(lái)得出anchoredPosition的位置，關(guān)于如何計(jì)算規(guī)則设褐，有興趣的朋友可以自己逆推一下

四颠蕴、offsetMin和offsetMax詳解

offsetMin和offsetMax這兩個(gè)屬性比較好理解，其中offsetMin表示物體（本文中的紅框）左下角相對(duì)AnchorMin的偏移助析，offsetMax表示物體右上角相對(duì)AnchorMax的偏移

anchor(0, 0)

anchorMin(0,0) anchorMax(1,1)

五犀被、sizeDelta詳解

sizeDelta就是offsetMax - offsetMin的值，即物體左下角到右上角的變量貌笨，如下圖所示：

sizeDelta圖解