本文节选自洪流学堂公众号专栏《郑洪智的Unity2018课》，未经允许不可转载。

洪流学堂公众号回复专栏，查看更多专栏文章。

小新：“昨天不是说今天学习UI的布局嘛，啥时候开始呀”
大智：“你啥时候变得这么积极了，最近不玩游戏了？”
小新：“游戏玩来玩去都是浪费时间，还不如学点东西实在，而且学习新东西也很有趣啊”
大智：“境界有提升，哈哈，那我们就开始吧”

制作UI的通用流程

大智：“在开始布置UI控件之前，有一个东西需要特别注意的，就是UI的分辨率。一般情况UI都会有一个设计分辨率，在布局时最好根据这个分辨率进行布局。设置的方式就是设置Game窗口的分辨率。”

大智：“一定要使用固定分辨率而不要使用比例，这样才能更好地进行UI布局。如果没有你需要的分辨率，可以点击下面的加号自定义添加。这样不论你如何拖动Game窗口，Canvas的大小不会发生变化，方便你进行UI的布局。”

小新：“这么听只是知道这个比较重要，但是如果不设置Game的分辨率会有什么问题呢？”

大智：“如果不设置Game的分辨率你就没办法在UI设计稿的分辨率下进行UI布局，元素的大小及位置布局好以后可能并不是你需要的位置，可能需要重新调节。总之一句话，最好在进行UI布局前把Game窗口分辨率调成和UI设计稿一样的分辨率。”

小新：“好，回头我要试一试不设置会出现什么幺蛾子，嘿嘿”

UI布局

Rect工具

虽然UI控件可能使用移动、缩放、旋转工具，但是有一个工具更适合它，那就是矩形工具（快捷键：T）。

使用Rect工具可以对UI控件进行移动、旋转和调节大小（不是缩放）。

选中一个UI控件后，拖拽矩形区域的中心可以移动UI元素。

可以拖拽矩形区域的四角或者边缘调整大小，同时按住Shift可以保持宽高比调整大小。

光标离开四角一些距离，光标变成旋转符号时，可以拖拽旋转UI控件。

需要注意的是：Rect工具也会使用当前设置的pivot模式和坐标系。操作UI时一般建议使用Pivot和Local。

RectTransform

UI的布局是通过RectTransform组件实现的，这个组件继承了我们之前常见的Transform，但是UI的布局不仅仅是位置、旋转、缩放这么简单，也有宽度和高度等信息，用来指定矩形的尺寸。

尺寸(Size)和缩放(Scale)的区别

当使用Rect工具改变3D物体和2D系统中的Sprite的大小时，会改变物体的scale（缩放）。但是，对于RectTransform（UI空间），会改变宽度和高度，scale保持不变，这种尺寸的变化不会影响字体的大小，sliced图片(后面讲解Image控件时说明)的边框等等。

Pivot 轴心

旋转，尺寸，缩放会基于UI控件的pivot，所以pivot的位置会影响旋转、调整大小、缩放的结果。工具栏中设置为Pivot模式时，可以拖拽pivot来改变pivot的位置，也可以改变Inspector中的pivot属性的值来改变pivot的位置。注意：只有设置为Pivot模式时才能拖拽修改pivot，Center模式下pivot不能拖动。

Anchor 锚点

RectTransform中有一个概念叫锚点。锚大家应该都熟悉，锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。

在RectTransform中，锚点可以确定UI控件的相对位置。

锚点在Scene中显示为4个小三角，这4个小三角每个都可以单独设置锚定的位置，4个锚点会组成一个矩形。

Anchor的位置是相对于父物体的宽、高比例的形式呈现的，当RectTransform的父物体尺寸发生变化时，Anchor的相对比例不变。

那么Anchor对UI控件的位置有什么影响呢？下面我们看几个例子。

除了能锚定位置，锚点系统也可以让UI控件的尺寸跟随父物体的尺寸变化。UI控件的四个角相对于对应四个锚点的偏移是固定的。

上面说到了，Anchor的位置是以相对于父物体宽高的百分比定义的。Anchor不仅可以放置在角落，它可以放置在父物体矩形范围内的任何位置。

锚点的四个点可以单独拖动，如果锚点的四个点在一起，可以拖动他们的中心同时移动这四个点。如果拖拽Anchor的时候同时按住shift键，UI控件的尺寸也会相应变化。

Anchor Presents

在Inspector中，RectTransform的左上角有一个Anchor Preset按钮。点击这个按钮会弹出一个下拉框，这里面有常用的Anchor位置，可以方便你快速锚定UI。点击对应的按钮可以锚定UI控件到父物体的边缘或者中心，也可以根据父物体的边缘缩放。

Anchor Preset按钮展示了当前选择的Anchor位置，如果没有对应的位置，会显示为custom。

如果点击按钮时同时按下Shift，会同时设置UI元素的pivot的位置到对应位置。比如选择的左上角，同时按shift，pivot也会设置到UI元素的左上角。

如果点击按钮的同时按下Alt，会同时设置UI控件的位置到对应的anchor位置。比如选择的左上角，同时按alt，UI控件的位置也会设置到左上角。

RectTransform的Inspector面板

Inspector中，Anchor Min对应Scene View中的左下角锚点，Anchor Max对应右上角的锚点。

RectTransform显示的位置字段取决于所有锚点是在一起（显示固定的宽度width和高度height）还是分开（矩形与父矩形一起拉伸）。

当所有锚点在一起时，显示的字段是Pos X，Pos Y，Width和Height。Pos X和Pos Y值表示UI的轴心相对于锚点的位置。

当锚点分开时，字段会部分或完全变为Left，Right，Top和Bottom。如果锚点水平分离，则使用Left和Right字段，如果垂直分离，则使用Top和Bottom字段。

右侧有两个小按钮，分别是Blueprint模式和Raw编辑模式。

Blueprint模式会显示一个未旋转、缩放的矩形框。

Raw 编辑模式选中时，编辑pivot和anchor的值会导致物体的位置发生变化，但是anchor或pivot的位置保持不变。

总结

大智：“UI布局说起来简单，但是刚用起来可能会有些容易出错，需要不断地熟练。”
小新：“那就多操作操作UI应该就可以了。”

今日思考题

大智：“是的，现在你去了解了解不同anchor以及pivot设置下，看看UI如何根据父物体变化吧。”
小新：“好，我马上就去试”
大智：“收获别忘了分享出来！也别忘了分享给你学Unity的朋友，也许能够帮到他。”