本文节选自洪流学堂公众号专栏《郑洪智的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的朋友，也许能够帮到他。”
洪流学堂公众号回复专栏，查看更多专栏文章。
《郑洪智的Unity2018课》，倾尽我8年的开发经验，结合最新的Unity2018，带你从入门到精通。
