UGUI基础布局--Pivot和Anchor

参考链接:
https://docs.unity3d.com/2017.4/Documentation/Manual/UIBasicLayout.html

UGUI Basic Layout

1.Pivot轴心

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

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

红圈位置为Pivot位置(0,0)(圆圈为pivot,四个三角为锚点)
红圈位置为Pivot位置(0.5,0.5)

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

2.Anchors锚点

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

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

UI element anchored to the center of the parent. The element maintains a fixed offset to the center.

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

如:
UI element with left corners anchored to lower left corner of the parent and right corners anchored to lower right. The corners of the element maintains fixed offsets to their respective anchors.

  • 锚点的位置以父矩形宽度和高度的分数(或百分比)来定义。

  • 0.0(0%)对应于左侧或底部,0.5(50%)对应于中部,1.0(100%)对应于右侧或顶部。
    但锚点并不局限于两侧和中部;它们可以锚定到父矩形中的任何点上。

  • Min(X,Y)为左下角的点在父物体上的位置,Max(X,Y)为右上角点在父物体上的位置。

  • 您可以分别拖动每个锚,或者如果它们在一起,您可以通过单击它们之间中间的位置并拖动将它们拖到一起。如果在拖动锚点时按住Shift键,矩形的相应角将与锚点一起移动。

  • 锚柄的一个有用的特性是,它们会自动吸附到兄弟矩形的锚上,以实现精确定位。

3.Anchor presets锚点预设

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

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

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

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

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

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

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

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

  • 左和上只是方位标记,用啥要选择右下角部分;
  • 右下部分的左上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的矩形框也不变。

  • Raw Edit Mode (原始编辑模式)

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

    Inspector 中调整 Pivot:

    Inspector 中调整 Anchor:

5.从脚本端操作布局

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

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值