基本布局
为了方便布局,每个 UI 元素都用一个矩形表示。在场景视图下,可以使用菜单栏中的 矩形工具 Rect Tool 操作矩形。矩形工具可以用于 Unity 的 2D 功能和 UI,事实上甚至还可以用于 3D 对象。
矩形工具可以用于移动、调整大小和旋转 UI 元素。一旦选中了某个 UI 元素,你可以通过单击矩形内部的任意位置并拖动来移动矩形。你可以通过单击边缘或边角并拖动来调整矩形大小。你可以把鼠标光标移动到稍微远离边角的位置,直到光标变成一个旋转符号,然后单击并向任意方向拖动,来旋转矩形。
就像其他工具一样,矩形工具基于工具栏上设置的当前轴心和空间。当使用 UI 时,通常最好将它们设置为 Pivot 和 Local。
工具栏按钮,设置为 Pivot 和 Local
矩形变换 Rect Transform
矩形变换 Rect Transform 是一个新变换组件,用于所有 UI 元素,而不是常规的 变换 Transform 组件。
Rect Transform 具有位置、旋转和缩放属性,类似于常规的 Transform,但是前者还具有宽度和高度,用于指定矩形的尺寸。
当使用矩形工具改变对象的大小时,对于 2D 系统中的精灵 Sprite 和 3D 对象,将改变本地缩放比例 scale。但是,对于具有矩形变换 Rect Transform 的对象,将改变宽度和高度,保持本地缩放比例不变。并且,调整大小不会影响字体大小、切片图像的边框,等等。
矩形变换包含一个称为 锚点 Anchors 的布局概念。在场景视图中,锚点显示为 4 个小三角形手柄,锚点信息则显示在检视视图中。
如果某个矩形变换的父元素也是一个矩形变换,那么子矩形变换可以通过各种方式锚定到父矩形变换。例如,子矩形变换可以锚定到父矩形变换的中心或某个边角。
UI 元素锚定到父元素的右下角。元素与右下角保持固定的偏移。
锚定还允许子元素随着父元素的宽度或高度一起伸展。矩形的每个边角与相应的锚点具有固定的偏移,例如,矩形的左上角与左上锚点具有固定的偏移,以此类推。这样,矩形的不同边角可以锚定到父矩形的不同点。
锚点的位置用父矩形宽度和高度的分数(或百分比)来定义。0.0(0%)对应左侧或底部,0.5(50%)对应中间,1.0(100%)对应右侧或顶部。但是锚点不限于边框和中间,子矩形可以锚定于父矩形内的任意点。
UI 元素的左侧边角锚定于距父元素左侧特定比例的点,右侧边角锚定于距父矩形右侧特定比例的点。
你可以单独地拖动每个锚点,也可以一次拖动多个。如果在拖动锚点时按下 Shift 键,对应的矩形边角将与锚点一起移动。
锚点手柄的一个很有用的功能是,它们自动对齐到兄弟矩形的锚点,从而可以精确定位。
在检视视图中,在矩形变换组件 Rect Transform 的左上角可以找到预设锚点按钮 Anchor Preset。点击该按钮将显示预设锚点下拉菜单。在这里,你可以快速选择一些最常见的锚点选项。你可以将 UI 元素锚定到父元素的边和中间,或者随父元素的大小伸展。水平和垂直锚定是独立的。
预设锚点按钮显示了当前选择的预设选项,如果有选的话。如果在水平轴或垂直轴上选择了与预设不同的位置,则会显示自定义选项。
点击锚点 Anchors 的展开箭头,可以显示锚点的数值域(如果它们不可见的话)。Anchor Min 对应场景视图中左上角的锚点手柄,Anchor Max 对于右上角的手柄。
矩形位置属性的显示方式取决于锚点是聚集在一起(产生固定的宽度和高度)还是分离的(导致矩形随着父矩形伸展)。
当所有锚点手柄聚集在一起时,数值域显示为 、Pos Y
、Width
和 Height
。 和 Pos Y
的值指示了轴心相对于锚点的位置。
当锚点是分离的,数值域的部分或全部显示为 Left
、Right
、 和 Bottom
。这些数值域定义了锚点矩形的内边距。如果锚点在水平方向上是分离的,则使用 Left
和 Right
域,如果在垂直方向上是分离的,则使用 和 Bottom
域。