Unity3D说明文档翻译-Basic Layout

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元素.如果你想在阅读后检验你自己.你可以使用菜单游戏对象>UI>图像创建一个图像.

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元素表现为一个矩形用于布局.此矩形可以在场景视图内使用工具条上的矩形工具操纵.矩形工具用于Unity的2D特性和UI,并且事实上甚至可用于3D对象.

Toolbar buttons with Rect Tool selected

工具条按钮带有矩形工具选择

 

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.

矩形工具可用于移动,调整大小和旋转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.

就和其他工具一样,矩形工具使用当前中心点模式和空间,设置在工具条.当在UI上工作时保持设置为中心点和局部模式通常是一个好主意.

Toolbar buttons set to Pivot and Local

工具条按钮设置为中心点和局部模式

 

Rect Transform

矩形转换组件

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

矩形转换组件是一个新的转换组件用于所用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.

矩形转换组件有位置,旋转和缩放和常用转换组件差不多,但它有一个宽和高,用于指定矩形的尺寸.

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.

当矩形工具用于改变一个对象大小时,通常用于2D系统内的精灵和用于3D对象,它将改变对象局部大小.然而,当将矩形转换组件用于一个对象时,它将替换为改变宽和高,保持局部缩放不改变.这里调整大小将不影响字体大小,切片图形边界等.

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.

旋转,大小和缩放改变发生在中心点周围所以中心点的位置影响旋转,调整大小或缩放的结果.当工具条中心点按钮设置为中心点模式,矩形变换组件的中心可以在场景内移动.

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.

矩形转换组件包括一个布局内容叫锚点.锚点表现为四个小三角形控键在场景视图内且锚点信息也显示在检视面板上.

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.

如果一个矩形转换组件的父对象也是一个矩形转换组件,则子对象矩形转换组件可以被锚定到父对象的中心或其中一个角.

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

UI元素锚定到父对象的中心.元素维持一个到中心的固定的偏移.

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

UI元素锚定到父对象的右下角.元素维持一个到右下角固定的偏移.

 

The anchoring also allows the child to stretch together with the width or height of the parent. Each corner of the rectangle has a fixed offset to its corresponding anchor, i.e. the top left corner of the rectangle has a fixed offset to the top left anchor, etc. This way the different corners of the rectangle can be anchored to different points in the parent rectangle.

锚点也允许子对象随着父对象的宽或高伸缩.矩形的每个角有一个固定偏移到它的相应锚点,例如矩形的左上角有一个固定偏移到左上锚点等等.按这种方式矩形的不同角可以被锚定到父矩形对象的不同点.

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.

UI元素的左边角锚定到父对象的左下角而右边角锚定到右下角.元素的角维持固定偏移到它们相应的锚点.

 

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 parect rectangle.

锚点的位置用父矩形对象的分数(或百分数)定义.0.0(0%)相当于左边或底边,0.5(50%)在中间,而1.0(100%)在右边或顶边.但锚点不局限在边或中间,它们能锚定到父矩形对象的内的任何一点.

UI element with left corners anchored to a point a certain percentage from the left side of the parent and right corners anchored to a point a certain percentage from the right side of the parent rectangle.

UI元素的左边角锚定到一个点到父矩形对象左边一定的百分比而右边角锚定到一个点一定的百分比到父矩形对象的右边.

 

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.

在检视面板上,锚点预设按钮可以在矩形转换组件的左上角找到.点击按钮调出锚点预设下拉菜单.从这里你可以快速的从一些最常见锚定选项上选择.你可以锚定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.

你可以点击锚点属性扩展箭头以显示锚点数值字段,如果它们没有显示的话.锚点最小值属性相当于场景视图内左下锚点控键而锚点最大值属性相当于右上控键.

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. The Pos X and Pos Y values indicate the position of the pivot relative to the anchors.

当所有锚点在一起,字段显示为Pos X, Pos Y,宽和高.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.

当锚点分离时,指定可以部分或全部改变为左,右,上,下.这些字段定义填充到由锚点定义的矩形.如果锚点横向分离左和右自动被使用而如果纵向分离上下锚点字段启用.

Note that changing the values in the anchor or pivot fields will normally counter-adjust the positioning values in order to make the rectangle stay in place. If cases where this is not desired, the Raw Mode can be enabled using a small button in the Inspector. This causes the anchor and pivot value to be able to be changed without any other values changing as a result. This will likely cause the rectangle to be visually moved or resized, since its position and size is dependent on the anchor and pivot values.

注意,改变锚点或中心点字段的值通常将相对的调整位置属性值以便使矩形呆在适当位置.如果情况不合适,原始模式可用在检视面板上使用一个小按钮激活.这导致锚点和中心点值可以被修改无需改变任何其他值.这将可能导致矩形可见的移动或调整大小,直到它的位置和大小适合一锚点和中心点的值.