中文

English

中文

English

Appearance

简介 ​

了解如何在 UI 编辑器中相对于画布以及彼此之间定位 UI 对象。

矩形变换属性 ​

矩形变换（Rect Transform）是 UI 对象（UI Object）所特有的属性类目。 与场景中 游戏对象（Game Object）的 变换（Transform）组件（Component）中的属性相似，矩形变换同样具有位置、旋转和缩放，但还具有宽度和高度，用于指定矩形的尺寸，以及可以设置枢轴和锚点。

【UIEditor_RectTransform001.png】

选中 UI 对象后 检视窗口（Inspector）中显示的矩形变换属性。

UI 矩形工具 ​

出于布局目的，每个 UI 对象（UI Object）都用矩形表示。在 层级窗口（Hierarchy）或 UI 画布窗口（UI）选中 UI 对象，在 UI 画布窗口会默认显示 UI 对象的 UI 矩形工具。UI 矩形变换工具由四个顶点控制点、四个边控制点组成。

【UIEditor_RectTransform002.png】

如图中选中 图片（Image）控件类型的 UI 对象，在 UI 画布窗口中立刻显示了该 UI 对象的 UI 矩形工具。

使用 UI 矩形工具可对 UI 对象进行移动和大小调整，用于可视化调整 UI 矩形变换（Rect Transform）的相关属性。

  • 选择 UI 对象后，可通过单击矩形内的任意位置并拖动来对 UI 对象进行移动。

【UIEditor_RectTransform003.gif】

  • 拖拽 UI 矩形工具的任一顶点控制点，可以在保持对角顶点位置不变的情况下，同时修改 UI 对象的位置和尺寸。

【UIEditor_RectTransform004.gif】

  • 拖拽 UI 矩形工具的任一边控制点，可以在保持对边位置不变的情况下，同时修改 UI 对象的位置和尺寸。

【UIEditor_RectTransform005.gif】

在 UI 对象的排版中，经常会使用 UI 矩形工具 直接精确控制 UI 对象四条边的位置和长度。而对于必须保持原始图片宽高比的 图片（Image）控件类型 UI 对象，通常不会使用 UI 矩形工具 来调整尺寸，而是直接通过矩形变换属性设置。

锚点 ​

使用和设置锚点，以便根据不同的屏幕尺寸和宽高比将 UI 对象（UI Object）保持在固定位置。

您可以使用 锚点（Anchor） 在 UI 画布窗口 上设置 UI 对象的位置。锚点支持根据不同屏幕尺寸和宽高比进行设置。

【UIEditor_RectTransform006.png】

检视窗口（Inspector）中显示锚点相关的属性。

最小（Min）的 X、Y 和 最大（Max）的 X、Y 锚点参数以及偏移参数（如 X、Y、L、T、R、B）决定了每个控件的位置。

可以从多个锚点预设中进行选择，或通过最小（Min）的 X、Y 和 最大（Max）的 X、Y 参数进行手动设置，其中 最小（Min）的 X、Y 和 最大（Max）的 X、Y 参数都为 0 则代表锚点位于画布面板的左上角位置；最小（Min）的 X、Y 和 最大（Max）的 X、Y 参数都为 1 则代表锚点位于画布面板的右下角位置。其中锚点 最大（Max）和最小（Min）属性不同的参数形成了预设锚点中不同的选项。

如果 UI 对象的父级也是 UI 对象，则子 UI 对象还可通过各种方式锚定到父 UI 对象。

由于 SandMod 现有版本没有 锚点图标（Anchor Medallion） 显示出 UI 画布窗口 中的锚点位置。为了方便您的阅读，本章用粉色圆圈代表锚点的 最小（Min）深红色圆圈代表锚点的 最大（Max），灰色虚线框代表锚点的矩形。蓝色圆圈代表 UI 对象（UI Object）的 枢轴（Pivot）。

【UIEditor_RectTransform007.png】

为方便您阅读，如图 1 为描点图标 2 为枢轴的图标。

锚点的工作原理 ​

若要在画布上放置 图片（Image）控件类型 UI 对象（UI Object）。应将该 UI 对象 从 UI 控件窗口（UI Controller） 拖到 UI 画窗口（UI）上。且只使用锚点的默认设置（中心位置）。

【UIEditor_RectTransform008.png】

水平橙色箭头是 UI 对象在 X 轴的偏移。它决定了从锚点图标到 UI 对象之间在 X 方向上的距离（以像素为单位）。

垂直橙色箭头是 UI 对象在 Y 轴的偏移。它决定了从锚点图标到 UI 对象之间在 Y 方向上的距离（以像素为单位）。

偏移的参数（X、Y）会基于 UI 画布窗口 尺寸并会适应尺寸变化。

在设置 UI 对象的锚点和偏移参数时，请务必考虑设备屏幕尺寸和宽高比的差异，避免屏幕差异导致 UI 显示出现问题。您可以在 UI 画布窗口 菜单栏中点击 屏幕分辨率适配 按钮，更改当前画布的尺寸，测试具有不同屏幕尺寸或宽高比的 UI 对象布局并进行相应调整。

在某些屏幕尺寸下，如果锚点设置不当，则可能会发生 UI 对象显示不全等情况，下图便出现了这种情况，图片在当前屏幕上显示不全。

【UIEditor_RectTransform009.png】

如果此时将锚点位置设置到右下角。

【UIEditor_RectTransform010.png】

通过这些设置可以避免 UI 对象被屏幕裁剪。下图便显示了这种情况。

【UIEditor_RectTransform011.png】

此示例显示了锚点对画布内 UI 对象位置的影响，具体影响将取决于屏幕宽高比。还可以将锚点的 最小（Min）和 最大（Max）属性分别设置，这样一来就可以设置更多偏移选项来定义如何显示能适应不同屏幕尺寸和宽高比的 UI 对象。有关更多信息，请参阅    手动锚点 小节。

预设锚点 ​

预设锚点是最常用的 UI 对象（UI Object）锚点设置方法。预设锚点可以满足您在设置 UI 对象位置方面的大部分需求。

点击 检视窗口（Inspector）的锚点图示，在弹窗中选择预设。每个预设决定了相应的锚点位置。此位置用橙色高亮框进行标记。

【UIEditor_RectTransform012.png】

  • 选择 UI 对象的预设锚点选项，UI 对象可以锚定到父 UI 对象（或者画布）的中心，或锚定到一个角甚至是一条边的中点。

【UIEditor_RectTransform013.png】

--------------
比如将 图片（Image）控件类型的 UI 对象锚定到父级 UI 对象的右下角。
【UIEditor_RectTransform014.png】

UI 对象与父级 UI 对象右下角保持固定偏移。水平橙色箭头是 UI 对象在 X 轴的偏移，垂直橙色箭头是 UI 对象在 Y 轴的偏移。
【UIEditor_RectTransform015.png】

即使父级 UI 对象尺寸发生变化，该 UI 对象与父级 UI 对象右下角的偏移数值是不变的。
【UIEditor_RectTransform016.gif】
--------------
  • 锚点图标还有预设的拉伸方法，这些选项下锚点的 最小（Min）和 最大（Max）属性值会不完全一致。
【UIEditor_RectTransform017.png】【UIEditor_RectTransform018.png】【UIEditor_RectTransform019.png】
水平拉伸垂直拉伸水平和垂直拉伸

可以将 UI 对象设置为根据屏幕尺寸随画布一起拉伸，或者随父级 UI 对象一起拉伸。

【UIEditor_RectTransform020.png】

--------------
比如将 滚动条（Scroll Bar）控件类型的 UI 对象锚定到父级 UI 对象的 底部拉伸（Buttom）。
【UIEditor_RectTransform021.png】

UI 对象与父级 UI 对象底部保持 左（Left）和 右（Right）的固定值缩进。水平橙色箭头是 UI 对象在左侧和右侧的缩进。
【UIEditor_RectTransform022.png】

即使父级 UI 对象尺寸发生变化，该 UI 对象与父级 UI 对象底部拉伸且缩进值是不变的。
【UIEditor_RectTransform023.gif】
--------------

手动锚点 ​

锚点并不局限于两侧和中间，它们可以锚定到父级 UI 对象矩形内的任何点，手动在 枢轴（Povit）属性中调整即可。在锚点的位置以父级 UI 对象（UI Object）的矩形宽度和高度的百分比定义的情况下，需要手动设置锚点。

UI 对象的左上角锚定到距离父级 UI 对象矩形左上角一定百分比的点，而 UI 对象的右下角锚定到距离父级 UI 对象矩形右下角一定百分比的点。

最小（Min）和 最大（Max）的 X 和 Y 属性值为 0.0 (0%) 对应于左侧或顶部，0.5 (50%) 对应于中间，1.0 (100%) 对应于右侧或底部。

【UIEditor_RectTransform024.png】

--------------
比如将 图片（Image）控件类型的 UI 对象锚定到父级 UI 对象，并设置 最小（Min）的 X 和 Y 属性值为 0.2 (20%) ，最大（Max）的 X 和 Y 属性值为 0.8 (100% - 20% = 80%) 。
【UIEditor_RectTransform025.png】

即使父级 UI 对象尺寸发生变化，该 UI 对象都会保持和父级 UI 对象保持相对于父级 UI 对象尺寸（分别上下左右方向） 20% 的缩进。
【UIEditor_RectTransform026.png】
--------------

锚点和位置属性 ​

当锚点属性中 最小（Min）和 最大（Max）的 X、Y 属性值一致，则位置属性显示的字段为 X、Y、W（Width）和 H（Height）。X 和 Y 属性指示枢轴相对于锚点的偏移。

【UIEditor_RectTransform027.png】

当锚点属性中 最小（Min）和 最大（Max）的 X 属性值不一致时，则 X 和 W（Width）属性会变为 L（Left）和 R（Right）属性，代表左侧和右侧矩形边距像素值。

【UIEditor_RectTransform028.png】

当锚点属性中 最小（Min）和 最大（Max）的 Y 属性值不一致时，则 Y 和 H（Height）属性会变为 T（Top）和 B（Bottom）属性，代表顶部和底部矩形边距像素值。

【UIEditor_RectTransform029.png】

缩放 ​

缩放（Scale）属性是用于设置 UI 对象（UI Object）及其子对象在 X 或 Y 轴上的缩放比例。缩放属性的设置调整不会影响字体大小或切片图片的边框。

【UIEditor_RectTransform030.png】

枢轴与旋转 ​

枢轴除了在锚点的 最小（Min）和 最大（Max） X、Y 属性一致时起到了定义 UI 对象（UI Object）矩形的偏移和宽高。旋转和缩放修改都是围绕枢轴进行的，因此枢轴的位置会影响旋转或缩放的效果。

【UIEditor_RectTransform031.png】

可在 枢轴（Pivot）属性中设置枢轴的位置，枢轴的位置以该 UI 对象（UI Object）的矩形宽度和高度的百分比定义。枢轴（Pivot）属性的 X 和 Y 属性值为 0.0 (0%) 对应于该 UI 对象的左侧或顶部，0.5 (50%) 对应于中间，1.0 (100%) 对应于右侧或底部。