Unity新UI系统概述——Basic Layout

这个章节中我们来看看你应该如何将UI元素放置到相对于Canvas和其它元素的位置上。如果你想在阅读的时候测试效果，你可以用菜单GameObject->UI->Image创建一个UI。

The Rect Tool（矩形工具）

为了布局方便，每个UI元素都用一个矩形来表示。这个矩形可以在场景窗口中用工具栏上的Rect Tool来操纵。这个矩形工具可以用于Unity 2D模式和UI，事实上也可以用于3D对象。

矩形工具可以用来移动、缩放和旋转UI元素，这些都集中在这个工具上。一旦你选择了一个UI元素，你可以点击矩形内部任何位置并拖动来移动它。你可以点击边或角并拖动来缩放它。将鼠标在稍微远离角点的位置移动直到指针变成了旋转符号时就可以旋转UI元素。然后你可以点击并在任何方向上拖动来旋转。

就像其它工具一样，矩形工具使用当前在工具栏上设置的中心点和空间模式。当设置UI时，设置为Pivot和局部空间是比较合适的。

Rect Transform（矩形变换）

Rect Trasform是UI元素专用的组件，不同于一般的Transform组件。

就像一般的Transform组建一样，Rect Transform含有位置、旋转和缩放，但是它也有专门用于矩形尺寸的宽度和高度。

Resizing VS Scaling（调整大小VS缩放）

当矩形工具用于改变对象的大小时（一般是在2D系统或者3D对象），它将会改变对象的local scale。但是当用于Rect Transform时，它就是用来改变宽和高，而不会影响local scale。这种改变大小不会影响到字体的大小或切片图像的边界等等。

Pivot（中心点）

旋转、调整尺寸和缩放修改都是围绕着中心点进行的，因此中心点的位置会影响到旋转、调整尺寸或缩放的最后结果。当工具栏上的中心点按钮被设置到Pivot模式时，矩形变换的中心点就可以在场景窗口中移动。

Anchors（锚点）

矩形变换包含了一个布局的概念，叫做锚点。锚点在场景窗口中显示为4个小三角形的权柄，而锚点信息显示在观察窗口中。

如果矩形变换的父对象也是一个矩形变换，子对象就可以用多种方式锚在父对象上。例如，子对象可以锚在父对象的中心或者一个角点上。

将UI元素锚在父对象的中心。元素会相对于重心保持一个固定的偏移值。

将UI元素锚在父对象的右下边。元素就会相对于右下角保持一个固定的偏移。

锚点也允许子对象和父对象的宽或高一起伸缩。矩形的每一个角都会跟它关联的锚点保持一个固定偏移量，例如矩形左上角相对于左上的锚点有固定偏移，等等。这样，矩形不同的角可以锚在父对象矩形的不同位置上。

UI元素的左边角点锚在父对象的左下角而右边的角点锚在父对象的右下角。元素的角跟它们各自的锚点保持者固定的距离。

 

锚点的位置用父对象矩形宽和高的小数（或百分比）来定义。0.0(0%)对应左边或下边，0.5(50%)对应着中间，而1.0(100%)表示右边或上边。但是锚点并不限于边上或中间；他们可以锚在父对象矩形内的任意位置。

左边锚在离父对象左边一定百分比位置的锚点上，右边锚在离父对象右边一定百分比的锚点上。

 

你可以单独拖动每一个锚点，或者点击它们的中间来一起拖动。如果你拖动的时候按住Shift，相关联的UI元素也会跟着一起移动。

锚点权柄一个有用的特点是它可以自动吸附到相邻矩形的锚点上，方便精确对位。

预设锚点

在观察窗口中，可以在Rect Transform组件的左上角找到锚点预设按钮。点击按钮后会出现锚点的预设下拉列表。在这里，你可以从大多数通用的锚点选项中快速选择。你可以锚定UI元素到父对象的边上或中间，或者和父对象一起伸缩。水平和垂直的锚点是独立的。

锚点预设按钮会显示当前选择的预设选项。如果锚点在设置的值在水平或垂直轴上和所有预设的都不同，就会显示为自定义（Custom）。

观察窗口中的锚点和位置域

展开Anchors的按钮就可以看到锚点的数值。Min表示场景窗口中锚点权柄的左下值，而Max关联的是右上值。

矩形的位置域会根据锚点是否在一起显示不同的值。

如果所有的锚点在一起，会显示为Pos X, Pos Y, Width和Height。PosX和PosY值指示出中心点相对于锚点的位置。

当锚点是分离的，会部分或全部显示为Left, Right, Top和Bottom。这些域定义了矩形离锚点的空当。如果锚点水平分开，Left和Right就会显示出来，如果是垂直分离，Top和Bottom就会显示出来。

注意：如果改变了锚点或者中心点域中的值，一般都会反向更新位置值。如果你不希望出现这个变化，可以使用观察窗口中的小按钮来开启原始模式(Raw Mode)。这个功能会让锚点和中心点值改变时不引起其它值的变化。这可能会导致矩形框移动或大小的改变，因为它的位置和大小是与锚点和中心点值相关的。