UGUI中Anchor和Pivot详解

相信很多刚接触UGUI的开发者,对于这套系统中RectTransform里的position,anchor,pivot都或多或少有些不熟悉,不知道这些是干嘛用的,为此,本篇文章就给大家介绍下这几个概念,不过主要还是会以Anchor和Pivot为主,position会带过介绍。

1、Pivot轴心

旋转、大小和缩放修改发生在主轴Pivot点周围,因此Pivot的位置会影响旋转、调整大小或缩放的结果。当工具栏Pivot/Center按钮设置为Pivot模式时,可以在场景视图中移动矩形变换的Pivot小圆圈。

如图:旋转操作为绕着这个点旋转。

image
image

注:

Pivot是相对于自身的,(0,0)为自己左下角,(1,1)为自己右上角。(可以把这个UI看成这个点)

2、Anchors锚点

如果一个RectTransform的父物体也是RectTransform,那么子RectTransform可以以各种方式锚定到父RectTransform。

例如,子节点可以锚定在父节点的中心或其中一个角上。

image

锚定也允许孩子与父母的宽度或高度一起伸展。矩形的每个角都有一个固定的锚点偏移量,即矩形的左上角有一个固定的锚点偏移量,等等。这样,矩形的不同角就可以固定在父矩形的不同点上。

如:

image
  • 锚点的位置以父矩形宽度和高度的分数(或百分比)来定义。
  • 0.0(0%)对应于左侧或底部,0.5(50%)对应于中部,1.0(100%)对应于右侧或顶部。
  • 但锚点并不局限于两侧和中部;它们可以锚定到父矩形中的任何点上。
  • Min(X,Y)为左下角的点在父物体上的位置,Max(X,Y)为右上角点在父物体上的位置。
  • 您可以分别拖动每个锚,或者如果它们在一起,您可以通过单击它们之间中间的位置并拖动将它们拖到一起。如果在拖动锚点时按住Shift键,矩形的相应角将与锚点一起移动。
  • 锚柄的一个有用的特性是,它们会自动吸附到兄弟矩形的锚上,以实现精确定位。

3、Anchor presets锚点预设

在Inspector中,可以在Rect Transform组件的左上角找到锚预置按钮。单击该按钮将弹出锚预置下拉菜单。从这里您可以快速地从一些最常见的锚定选项中进行选择。您可以将UI元素锚定到父元素的侧面或中间,或者与父元素大小一起拉伸。水平和垂直锚定是独立的。

image

锚预置按钮显示当前选择的预置选项(如果有的话)。如果将水平轴或垂直轴上的锚设置为与任何预设位置不同的位置,则会显示自定义选项。

Anchor Min对应场景视图中左下方的Anchor handle, Anchor Max对应右上方的handle。

矩形的position字段根据锚顶点是否在一起(产生固定的宽度和高度)或是否分开(导致矩形与父矩形一起拉伸)而不同。

方式1:当所有的锚柄在一起时,显示的字段是Pos X、Pos Y、宽度和高度。Pos X和Pos Y的值表示pivot相对于锚点的位置。

image

方式2:当锚被分开时,字段可以部分或完全改变为左、右、上、下。这些字段定义锚定义的矩形内的填充。如果锚水平分开,则使用左字段和右字段,如果锚垂直分开,则使用顶部和底部字段。

image
image

注意,在anchor或pivot字段中更改值通常会反向调整position值,以使矩形保持原位。在不需要这样做的情况下,通过单击检查器中的R按钮启用原始编辑模式。这使得anchor和pivot值能够在不改变任何其他值的情况下被改变。这可能会导致矩形在视觉上移动或调整大小,因为它的位置和大小取决于anchor和pivot值。

看下图预设布局,可以注意到:布局分为左侧、上侧和右下。

image

左和上只是方位标记,用啥要选择右下角部分;

右下部分的左上9个是一个点,所有锚柄在一起,大小不会受父物体影响,父物体大小变化子物体pivot到锚点位置保持不变; 如上面方式1

其他为2个点,最右下角的为四个点,大小会受父物体影响;如上面方式2

注意区分:

Pivot是相对于自身的,(0,0)为自己左下角,(1,1)为自己右上角。(可以把这个UI看成这个点)

Anchor为相对于父物体的,(0,0)为父物体左下角,(1,1)为父物体右上角。

4、Blue Print Mode(蓝图模式) 、 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 (蓝图模式)

勾选后,就算UI被调整Rotation或Scale参数,UI的矩形框也不变。

image
image

Raw Edit Mode (原始编辑模式)

在 Inspector 中调整 Pivot 和 Anchor 时,物体会维持目前的位置与大小(Inspector 中数值部分),请注意数值部分:

Inspector 中调整 Pivot:

image

Inspector 中调整 Anchor:

image

5、从脚本端操作布局

从脚本端操作uGUI时,编辑符号和RectTransform字段不匹配有点复杂。没有诸如Pos X之类的参数,并且宽度/高度也不存在。

在这种情况下,将Inspector更改为Debug模式并公开RectTransform的隐藏参数。通过这个我们可以看到参数通常指向的内容。

image
image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,635评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,628评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,971评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,986评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,006评论 6 394
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,784评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,475评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,364评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,860评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,008评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,152评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,829评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,490评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,035评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,428评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,127评论 2 356

推荐阅读更多精彩内容