在本部分,我们将介绍如何相对于画布以及彼此定位 UI 元素。如果希望在阅读时进行自测,可使用菜单 GameObject > UI > Image 创建一个图像。
为了便于布局,每个 UI 元素都表示为矩形。可使用工具栏中的__矩形工具 (Rect Tool)__ 在 Scene 视图中操纵此矩形。矩形工具既可用于 Unity 的 2D 功能,也可用于 UI,实际上甚至还可用于 3D 对象。
使用矩形工具可对 UI 元素进行移动、大小调整和旋转。选择 UI 元素后,可通过单击矩形内的任意位置并拖动来对元素进行移动。通过单击边或角并拖动,可调整元素大小。若要旋转元素,可在稍微远离角点的位置悬停光标,直到鼠标光标看起来像旋转符号。然后,可单击并向任一方向拖动来进行旋转。
与其他工具一样,矩形工具使用工具栏中设置的当前轴心模式和空间。使用 UI 时,通常最好将这些设置保持为 Pivot 和 Local。
__矩形变换__是一种用于所有 UI 元素的新型变换组件,而不是常规的__变换__组件。
与常规变换一样,矩形变换具有位置、旋转和缩放,但还具有宽度和高度,用于指定矩形的尺寸。
使用矩形工具更改对象的大小时,通常对于 2D 系统中的精灵以及对于 3D 对象,该工具将改变对象的局部_缩放_。但是,在带有矩形变换的对象上使用时,该工具改变的是宽度和高度,局部缩放将保持不变。此大小调整不会影响字体大小、切片图像上的边框等。
旋转、大小和缩放修改都是围绕轴心进行的,因此轴心的位置会影响旋转、大小调整或缩放的结果。工具栏 Pivot 按钮设置为轴心模式时,可在 Scene 视图中移动矩形变换的轴心。
矩形变换包含一种称为__锚点__的布局概念。锚点在 Scene 视图中显示为四个小三角形控制柄,锚点信息也显示在 Inspector 中。
如果矩形变换的父项也是矩形变换,则子矩形变换还可通过各种方式锚定到父矩形变换。例如,子项可以锚定到父项的中心,或锚定到一个角。
通过锚定还可以让子项随父项的宽度或高度一起拉伸。矩形的每个角与其对应的锚点都有一个固定的偏移,即矩形的左上角与左上角锚点有一个固定的偏移,以此类推。因此,矩形的不同角可以锚定到父矩形中的不同点。
锚点的位置以父矩形宽度和高度的一个比例(或百分比)定义。0.0 (0%) 对应于左边或下边,0.5 (50%) 对应于中间,1.0 (100%) 对应于右边或上边。但是,锚点不仅限于侧和中间;它们可以锚定到父矩形内的任何点。
可以单独拖动每个锚点,如果这些锚点在一起,可以通过单击这些锚点的中间位置并进行拖动来一起拖动锚点。如果在拖动锚点时按住 Shift 键,矩形的相应角将与锚点一起移动。
锚点控制柄的一种有用功能是可以自动贴靠到同级矩形的锚点,从而进行精确定位。
在 Inspector 中,可在矩形变换组件的左上角找到 Anchor Preset 按钮。单击该按钮将显示 Anchor Presets 下拉选单。从此选单中可以快速选择一些最常用的锚定选项。可将 UI 元素锚定到父项的边或中间,或者与父项大小一起拉伸。水平锚定和垂直锚定是独立的。
Anchor Presets 按钮将显示当前所选的预设选项(如果有)。如果水平轴或垂直轴上的锚点设置为与任何预设不同的位置,则会显示自定义选项。
通过单击 Anchors 扩展箭头可显示锚点数值字段(如果这些字段尚不可见)。Anchor Min 对应于 Scene 视图中的左下角锚点控制柄,而 Anchor Max 对应于右上角控制柄。
根据锚点是在一起(产生固定的宽度和高度)还是分开(使得矩形与父矩形一起拉伸),矩形的位置字段显示不同。
当所有锚点控制柄在一起时,显示的字段为 Pos X、Pos Y、Width 和 Height。Pos X 和 Pos Y 值表示轴心相对于锚点的位置。
当锚点分开时,字段可能部分或完全变为 Left、Right、Top 和 Bottom。这些字段定义了由锚点定义的矩形内的填充。如果锚点在水平方向分开,则使用 Left 和 Right 字段,如果在垂直方向分开,则使用 Top 和 Bottom 字段。
请注意,更改锚点或轴心字段中的值通常会反向调整定位值,以使矩形保持原位。如果不需要此行为,请通过单击 Inspector 中的 R 按钮启用 Raw edit mode。这样,在更改锚点和轴心值时可以不改变任何其他值。因此可能会导致矩形在视觉上出现移动或大小调整,因为矩形的位置和大小取决于锚点和轴心值。
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.