# 学会 UGUI 之 Basic Layout

Unity 官方文档

Basic Layout #

In this section we’ll look at how you can position UI elements relative to the Canvas and each other. If you want to test yourself while reading, you can create an Image using the menu GameObject -> UI -> Image.

在这一节我们会看到 UI 元素相对于画布的位置是怎样的。如果你想要自己在阅读时测试,可以创建Image,使用游戏菜单中的GameObject > UI > Image。

The Rect Tool #

Every UI element is represented as a rectangle for layout purposes. This rectangle can be manipulated in the Scene View using the Rect Tool in the toolbar. The Rect Tool is used both for Unity’s 2D features and for UI, and in fact can be used even for 3D objects as well.

每个 UI 元素被表示为一个矩形布局。在场景视图中使用工具栏中的 Rect Tool,可以操纵此矩形。Rect Tool 用于 unity2D 的 UI 功能特性,事实上甚至也可以用于 3D 对象。

The Rect Tool can be used to move, resize and rotate UI elements. Once you have selected a UI element, you can move it by clicking anywhere inside the rectangle and dragging. You can resize it by clicking on the edges or corners and dragging. The element can be rotated by hovering the cursor slightly away from the corners until the mouse cursor looks like a rotation symbol. You can then click and drag in either direction to rotate.

Rect Tool 可以用于移动、调整 UI 元素大小和对其进行旋转。一旦你选择(有时候我们要在对象列表中选中)了一个 UI 元素,您可以通过在该矩形内的任意位置单击并拖动来移动它。你可以通过在边缘或对角上单击并拖动来调整其大小。该元素可以通过悬停光标稍微离开角落,直到鼠标光标指示旋转符号旋转。然后,您可以单击并拖动任一方向旋转。

Just like the other tools, the Rect Tool uses the current pivot mode and space, set in the toolbar. When working with UI it’s usually a good idea to keep those set to Pivot and Local.

就像其他工具,Rect Tool 使用当前的 pivot 模式和空间,当处理 UI 工作的时候在工具栏中设置 Pivot 和 Local 通常是一个很好的主意。

Rect Transform #

The Rect Transform is a new transform component that is used for all UI elements instead of the regular Transform component.

Rect Transform 是一个新的 transform 组件,用于所有的 UI 元素,替代了对常规变换组件的使用。

Rect Transforms have position, rotation, and scale just like regular Transforms, but it also has a width and height, used to specify the dimensions of the rectangle.

Rect Transforms 有位置 position、旋转 rotation 和缩放 scale 的属性,就像常规变换一样,但是它也有一个宽度和高度属性,用来指定矩形的尺寸。 PS:高宽和缩放 scale 的关系是:通常 UI 元素都是有图片的,那么图片的原像素尺寸我们就设置为这个高宽,缩放就是在这个基础上进行呗。

Resizing Versus Scaling #

When the Rect Tool is used to change the size of an object, normally for Sprites in the 2D system and for 3D objects it will change the local scale of the object. However, when it’s used on an object with a Rect Transform on it, it will instead change the width and the height, keeping the local scale unchanged. This resizing will not affect font sizes, border on sliced images, and so on.

当 Rect Tool 用来更改对象的大小时,通常是 2D 系统中的精灵和 3D 对象,它会改变对象的 local scale。然而,当它在一个对象上用上 Rect Transform,它反而会改变宽度 width 和高度 height,local scale 保持不变。此大小调整不会影响字体大小,切片图像的边界等等。

Pivot #

Rotations, size, and scale modifications occur around the pivot so the position of the pivot affects the outcome of a rotation, resizing, or scaling. When the toolbar Pivot button is set to Pivot mode, the pivot of a Rect Transform can be moved in the Scene View.

旋转 Rotations、尺寸大小 size 和缩放 scale 的修改都是围绕着这个轴 pivot,所以这个轴的位置,就会影响旋转、调整大小或缩放的效果了。当工具栏 Pivot 按钮设置到 Pivot mode 时,在场景视图中就可以移动一个 Rect Transform 的枢纽 Pivot 了,来设置 Pivot 的位置。

Anchors #

Rect Transforms include a layout concept called anchors. Anchors are shown as four small triangular handles in the Scene View and anchor information is also shown in the Inspector.

Rect Transforms 包括一个称为 anchors 锚点的布局概念。锚点如下所示在场景视图中的四个小三角形手柄和锚点的信息也显示在 Inspector 检查器。

If the parent of a Rect Transform is also a Rect Transform, the child Rect Transform can be anchored to the parent Rect Transform in various ways. For example, the child can be anchored to the center of the parent, or to one of the corners.

如果父对象的 Rect Transform 也是一个 Rect Transform,那么子对象可以以各种方式把自己的 Rect Transform 锚定到父对象的 Rect Transform上。例如,子对象可以锚定到父对象的中心,或到一个角落。锚定还允许子对象拉伸到相对于父宽度或高度的一定比例。

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


UI element anchored to the lower right corner of the parent. The element maintains a fixed offset to the lower right corner.



The positions of the anchors are defined in fractions (or percentages) of the parent rectangle width and height. 0.0 (0%) corresponds to the left or bottom side, 0.5 (50%) to the middle, and 1.0 (100%) to the right or top side. But anchors are not limited to the sides and middle; they can be anchored to any point within the parent rectangle.

You can drag each of the anchors individually, or if they are together, you can drag them together by clicking in the middle in between them and dragging. If you hold down Shift key while dragging an anchor, the corresponding corner of the rectangle will move together with the anchor.

你可以拖动锚点的单独一个,或者如果他们在一起时你可以将它们一起拖动,在它们之间的中间单击并拖动。如果你拖动锚点的同时按住 Shift 键,矩形相应的角将和锚点一起移动。

A useful feature of the anchor handles is that they automatically snap to the anchors of sibling rectangles to allow for precise positioning.

Anchor presets

In the Inspector, the Anchor Preset button can be found in the upper left corner of the Rect Transform component. Clicking the button brings up the Anchor Presets dropdown. From here you can quickly select from some of the most common anchoring options. You can anchor the UI element to the sides or middle of the parent, or stretch together with the parent size. The horizontal and vertical anchoring is independent.

在 Inspector 检查器中,可以在矩形变换组件的左上角中发现的锚点预设按钮。单击按钮会弹出的锚点预设下拉列表。从这里您可以快速选择从一些最常用的锚固选项。你可以把UI元素锚定到父级的两侧或中间的,或者和父级对象一起拉伸。水平和垂直的锚固是独立的。

The Anchor Presets buttons displays the currently selected preset option if there is one. If the anchors on either the horizontal or vertical axis are set to different positions than any of the presets, the custom options is shown.


Anchor and position fields in the Inspector

You can click the Anchors expansion arrow to reveal the anchor number fields if they are not already visible. Anchor Min corresponds to the lower left anchor handle in the Scene View, and Anchor Max corresponds to the upper right handle.

可以单击小扩展箭头下方的锚点预设按钮以显示锚点和 pivot 字段数。Min 和 Max 对应于四个小三角形。选项 Lock Rect 可以发现右边的扩展的信息,如果没有锁定,它有相同的功能在场景视图中移动锚点时按住 Shift 键。

The position fields of rectangle are shown differently depending on whether the anchors are together (which produces a fixed width and height) or separated (which causes the rectangle to stretch together with the parent rectangle).

When all the anchor handles are together the fields displayed are Pos X, Pos Y, Width and Height.

当所有的锚柄点在一起的时候显示的字段会是 Pos X、 Pos Y、宽度和高度

When the anchors are separated the fields can change partially or completely to Left, Right, Top and Bottom. These fields define the padding inside the rectangle defined by the anchors. The Left and Right fields are used if the anchors are separated horizontally and the Top and Bottom fields are used if they are separated vertically.