UGUI技术之基本布局使用_Unity3D开发_蓝鸥

【uGUI】基本布局文／宋小波啊（作者）本节我们来学习如何相对 Canvas 和其他元素来布局我们的 UI。我们可以先创建一个 Image 用来测试，在 GameObject 菜单中选择 UI -> Image 来创建。

Rect 工具

每个 UI 元素都会用一个矩形表示，这样方便布局。在工具栏中选择 Rect 工具之后，我们就能在 Scene 视图中操作这个矩形。Rect 工具既能用于 Unity 中的 2D 物体和 UI 系统，对 3D 物体也同样能够使用。


选择工具栏中的 Rect 工具Rect 工具能够移动、缩放、旋转 UI 元素。一旦选择了一个 UI 元素，我们就可以点击矩形内任意位置进行拖拽，来移动 UI 元素。我们也可以点击并拖动矩形的边界或者四个角，来调整元素的大小。把鼠标停留在稍微远离矩形的四个角的位置，鼠标光标会变成一个旋转的图标，然后我们可以单击并拖拽，进行任意方向上的旋转。和其他工具一样，Rect 工具需要使用当前元素的中心点和局部坐标，我们需要在工具栏中进行设置。当我们需要对 UI 进行操作时，最好先设置成 Pivot 和 Local。

在工具栏中设置 Pivot 和 Local

RectTransform 组件

RectTransform 是一个新的 Transform 组件，它用于所有的 UI 元素，和常规的 Transform 组件不一样。

RectTransform 组件RectTransform 拥有常规 Transform 中的 Position、Rotation 和 Scale 属性，也拥有一个 Width 和 Height 属性，用于确定矩形的大小。[b]1、调整尺寸或比例[/b]当我们使用 Rect 工具改变对象大小时，对于 2D 精灵和 3D 对象来说，会改变对象的 LocalScale，但是当它用于一个 RectTransform 对象时，会直接改变宽度和高度，保持 LocalScale 不变。这样就不会影响字体大小、Sliced 图片的边界等。[b]2、Pivot - 枢轴点[/b]Pivot 的位置会影响旋转、大小调整和缩放的效果。当我们在工具栏中设置为了 Pivot 模式时，就可以在 Scene 视图中移动 RectTransform 的 Pivot。

绕 Pivot 旋转[b]3、Anchors - 锚点[/b]RectTransform 引入了锚点这个布局概念。锚点在 Scene 视图中显示为四个小三角形手柄，并且锚点的信息会在 Inspector 视图中显示。如果 RectTransform 的父对象也是一个 RectTransform，子对象可以以各种方式锚定到父对象。例如，将子对象锚定到父对象的中心，或者某个角。

UI 元素的锚点设置在父对象的中心之后，该元素距离中心保持固定的偏移量

UI 元素锚定到父对象的右下角，该元素距离父对象的右下角保持固定的偏移量锚定了之后，子对象也可以随着父对象宽高的变化一起伸缩。矩形的每个角到对应的锚点都有固定偏移量，也就是说，矩形的左上角到左上方锚点的偏移量是固定的。这样，矩形的不同角就能够锚定在父矩形中的不同点。

UI 元素左边的角锚定在父对象的左下角，右边的角锚定在父对象的右下角，该元素的每个角到各自的锚点都是固定的距离锚点在父矩形宽高方向上的位置定义出了一个百分比，0% 对应左侧或底部，50% 对应中间，100% 对应右侧或顶部。但锚点并不只限定于两边或中间，它们可以锚定在父矩形内任意一点。

UI 元素将左侧顶点锚定到距离父对象左边某个百分点，右侧顶点锚定到距离父对象右边某个百分点我们可以分别拖动每一个锚点，或者，如果它们在一起的话，我们可以点击并拖拽它们的中间整体移动他们。如果我们拖拽锚点的同时按下 Shift 键，UI 元素矩形上相应的角会一起移动。锚点另外一个方便的功能就是，他能够和 UI 元素同级的矩形锚点自动对齐，方便精确定位。[b]4、Anchor Presets - 预设锚点[/b]在 Inspector 视图中，我们可以点击 RectTransform 组件左上角的预设锚点按钮打开预设锚点。里面包含了一些最常用的锚点选项，我们可以选择一个快速设置锚点。我们可以将锚点设置到父对象的边上或者中心，或者随着父对象的大小变化进行伸缩。可以分别设定水平方向和垂直方向的锚点。

预设锚点预设锚点面板会显示当前所选的锚点预设值，如果当前的锚点设置在面板中存在的话。如果锚点在水平轴和垂直轴上的位置同预设位置都不一样，会显示为自定义锚点。[b]5、Inspector 视图中的锚点和位置属性[/b]在 Inspector 视图中我们能够找到锚点的属性设置，如果没有的话，点击 Anchor 前的扩展箭头展开属性。Min 属性对应的是场景视图中锚点的左下方，Max 属性对应的是右上方。Position 属性的显示会根据锚点位置的不同而发生变化，如果锚点都在一块会产生固定的宽度或高度，如果锚点分开会使矩形随父矩形一起伸缩。

RectTransform 组件当所有的锚点在一起时，会显示 PosX、PosY、Width 和 Height 属性。PosX 和 PosY 的值是 Pivot 相对于锚点的位置。当锚点分开时，属性会有一部分变为 Left、Right、Top 和 Bottom，这些属性根据锚点定义出矩形的大小和位置。锚点被水平分离时会出现 Left 和 Right 属性，垂直分离时会出现 Top 和 Bottom 属性。需要注意的是，改变 Anchor 或 Pivot 属性的值通常将反向调整 Position 的属性值，这样能够使矩形停留在原本的位置上来改变锚点或 Pivot。如果我们希望在改变属性值的时候矩形也会同步发生变化，那么我们可以选择 Raw 模式（选中右边的 R 按钮），在 Raw 模式下会使锚点和 Pivot 的值在改变时不会改变其他属性的值，而是会使矩形本身的位置和大小发生变化。