錨點(diǎn)Anchors

UGUI為屏幕自適應(yīng)提供了錨點(diǎn)機(jī)制，方便在不同分辨率下的UI元素保持相同的布局格式，本篇將錨點(diǎn)分為聚點(diǎn)型和錨框型，錨點(diǎn)實(shí)現(xiàn)的核心原理為子UI元素四邊距離四個(gè)錨釘?shù)木嚯x是一致的，所以錨框型的錨點(diǎn)和聚點(diǎn)型錨點(diǎn)各有其作用，以下會(huì)以 16 : 9 與 4 : 3 的屏幕比例進(jìn)行測(cè)試?

錨框

錨框型錨點(diǎn)

錨框型錨點(diǎn)設(shè)置的意義在于保證子物體的尺寸根據(jù)錨點(diǎn)設(shè)置可以在不同分辨率下跟隨父物體尺寸變化，即尺寸自適應(yīng)，適用于無(wú)需考慮拉伸UI元素（例如純色的背景圖），藍(lán)色框內(nèi)為設(shè)置錨框型錨點(diǎn)

錨框型錨點(diǎn)設(shè)置

設(shè)置后，16 : 9 以及4 : 3尺寸下UI元素的四個(gè)邊角點(diǎn)距離錨點(diǎn)位置相同，并根據(jù)不同分辨率進(jìn)行不同的填充

16 : 9

4 : 3

聚點(diǎn)型錨點(diǎn)

聚點(diǎn)型錨點(diǎn)設(shè)置的意義在于保持子物體在不同分辨率下在父物體下的位置都一致，即位置自適應(yīng)，適用于需要考慮拉伸并且需要位置固定的元素(例如頭像框）， 圖中紅色框選部分的選取為設(shè)置聚點(diǎn)型錨點(diǎn)

聚點(diǎn)型錨點(diǎn)設(shè)置

我們先查看一下錨點(diǎn)設(shè)置不當(dāng)?shù)姆疵娼滩?/p>

反面教材16:9尺寸下的正方形

反面教材4:3比例下正方形已變形

以下是自適應(yīng)下針對(duì)拉伸位置設(shè)置的聚合性錨點(diǎn)效果

聚合性錨點(diǎn)16:9

聚合性錨點(diǎn)4:3

軸點(diǎn)Pivot

軸點(diǎn)為UI元素的參照坐標(biāo)系原點(diǎn)，嘗試拖動(dòng)軸點(diǎn)會(huì)發(fā)現(xiàn)UI元素的坐標(biāo)在做不停修改，可以在編輯器下進(jìn)行拖動(dòng)和，也可以通過設(shè)置RectTransform組件Pivot屬性進(jìn)行調(diào)整(默認(rèn)（0.5,0.5）)，軸點(diǎn)對(duì)于自適應(yīng)和滾動(dòng)視圖排列意義巨大，后面介紹RectTransform組件時(shí)還會(huì)提到

軸點(diǎn)

RectTransform組件

RectTransform組件是Transform組件的UI再封裝類，常見的我就不介紹了，介紹幾個(gè)比較特殊的用于自適應(yīng)的成員

RectTransform.anchoredPosition：錨點(diǎn)位置

anchoredPosition根據(jù)錨點(diǎn)類型分為兩種情況，聚合性錨點(diǎn)時(shí)anchoredPosition是物體軸點(diǎn)與錨點(diǎn)之間的位置，在錨框型錨點(diǎn)時(shí)，需要參照物體軸心位置計(jì)算錨框內(nèi)的參照點(diǎn)，此時(shí)anchoredPosition代表的時(shí)軸點(diǎn)與參照點(diǎn)的位置，下面時(shí)圖形參照?qǐng)D

聚合型錨點(diǎn)AnchoredPosition：

聚合型錨點(diǎn)anchoredPosition

輸出結(jié)果

錨框型錨點(diǎn)AnchoredPosition：

錨框型錨點(diǎn)anchoredPosition

輸出結(jié)果

AnchoredPosition坐標(biāo)是基于錨點(diǎn)的自適應(yīng)坐標(biāo)，適用于UI列表的嵌套布局設(shè)置和使用，具體的原理計(jì)算在上面圖片中已經(jīng)寫的非常清楚

RectTransform.localPosition：局部坐標(biāo)

相對(duì)于父物體的局部坐標(biāo)，不受錨點(diǎn)影響，結(jié)果為子物體軸點(diǎn)到父物體軸點(diǎn)的距離

局部坐標(biāo)localposition

輸出結(jié)果

localposition坐標(biāo)就不詳細(xì)說了大家感興趣可以自己去測(cè)試一下

RectTransform.anchorMax/anchorMin：錨框范圍

歸一化數(shù)值，代表的是四個(gè)錨釘在父物體的歸一化比例位置，二者x，y分別影響不同錨釘，通過設(shè)置不同參數(shù)，得到不同的錨框范圍

anchorMax/anchorMin

RectTransform.offsetMax/offsetMin：最大最小錨釘位置

通過offsetMax/offsetMin獲取錨釘?shù)竭吔俏恢?/p>

max/min錨釘位置

RectTransform.sizeDelta：聚合性錨點(diǎn)獲取物體尺寸

在錨點(diǎn)類型為聚點(diǎn)型錨點(diǎn)時(shí)可以通過sizeDelta來(lái)獲取物體尺寸，結(jié)果相當(dāng)于offsetMax - offsetMin

RectTransform.rect.(xMin,xMax,yMin,yMax)：完美獲取物體尺寸方式

通過xMin,xMax,yMin,yMax獲取物體尺寸,該點(diǎn)替換了原來(lái)的left，top，bottom，right變量，用來(lái)計(jì)算物體尺寸，在獲得UI尺寸上建議使用下面圖內(nèi)計(jì)算方法來(lái)計(jì)算尺寸，好處是不受錨點(diǎn)類型的影響

xMin,xMax,yMin,yMax計(jì)算物體尺寸