一 概述

想要使UI控件在屏幕中达到正确的显示效果，比如自适应屏幕尺寸、固定边距等等，首先要理清楚几个基本概念和设置：锚点(anchor)、中心点(pivot)、位置(position)、UI缩放模式、父物件的transform设置

二   Anchor、Pivot与Position

2.1  Anchor （结论anchor以父物件为坐标参考系）

• anchor可以理解为是该控件所在的平面坐标系原点，在屏幕缩放或者形变的过程中，控件本身自始至终都是参照其anchor的位置进行相对移动。就像是船与船锚的关系。
• anchor可以设置一个坐标（x, y），这个坐标的参考系是该控件所属的父层级，比如，如果直接在Canvas层级底下摆放控件，那么整个屏幕就是其父层级。不论这个父层级的比例高矮、像素多大，它的坐标范围都会被钳制在0-1之间，如果希望子物件的锚点位于父物件的正中间，那么子物件的锚点坐标需要设置为(0.5, 0.5)。

2.2 Pivot（结论pivot 以自身为坐标参考系）

• pivot虽然被翻译为中心点，但容易造成误解，因为pivot并不一定在物体中心，甚至可以超出物件的范围。可以理解为轴点（绕该点旋转），或者是吸附点（用该点去吸附目标位置）
• pivot也具有一个坐标 （x, y），这个坐标的参考系是控件本身（子层级），原点位于控件的最左下角，(1, 1)点位于最右上角

2.3 Position（结论 position是pivot与anchor的相对距离）

• position提供的信息是pivot与anchor的相对距离，例如坐标 (50,125)就代表：该控件的pivot位于自身anchor的x轴正方向50像素，y轴正方向125像素处。不论屏幕的比例、像素如何变化，pivot与anchor将始终保持(50, 125)的向量值
• 通过图示可以清楚的看到，anchor以父物件为坐标参考系，pivot 以自身为坐标参考系，position代表二者的距离

三 显示窗口与属性面板

通过图2可以看到：

1. 不论锚点、中心点位于何处，控件的显示位置依然在最中央
2. anchor只能手动拖动到父物件的边界，它的活动范围取决于父物件的大小（如果直接设置坐标，可以超出这个范围）
3. pivot的位置不受限制，所以前面提到，“中心点”的翻译并不贴切
   

                                                  图二

但是令人尴尬的事情发生了，当屏幕的比例发生变化时，控件并没有跟随屏幕自适应（图3）。不过可以注意到：

1. 锚点依然位于父层级的左下角，锚点与父物件的相对位置没有发生改变
2. pivot与锚点的相对位置没有发生改变
3. 控件与pivot的相对位置没有发生改变

通过梳理他们三者的关系，可以尝试这样一种思路：1.设置锚点坐标(0.5, 0.5)，使其处于父物件的中心，不论屏幕如何变化，锚点都在中心位置。2.设置pivot坐标为(0.5, 0.5)，使其处于子物件中心。3.设置PosX=0, PosY=0，使锚点到pivot的向量值归零，吸附到一起。问题解决

点开Transform中的面板（图4），这里可以快速设置锚点的位置，另外两个必须要注意的按键是 shift 和 alt，可以有效提高我们的效率：shift+点击 可以同时设置锚点与pivot；alt+点击 可以同时设置锚点与position；两个键同时按下则可以快速设置三个属性

                                                                 图四

shift+alt+点击，所有属性会快速定位到对应的位置（图5）。如果我们的目标位置在某一个空白处，则可以手动拖拽anchor，然后将PosX,PosY设置为（0, 0），消除pivot与anchor的相对距离，控件便会自动吸附到锚点处。由于pivot默认在控件的中心位置(0.5, 0.5)，所以不需要额外设置。

                                                               图五

四 注意点 check points

4.1 UI缩放模式

找到 Canvas-UI Scale Mode，下拉菜单中有三种选项，分别是：constant pixel size/ scale with screen size/ constant phsical size。也就是保持像素/跟随缩放/保持物理距离，该缩放模式与transform设置可以形成多种排列组合结果，所以就不举例了。如果效果不正确，记得检查该处设置即可

4.2 父物件的transform设置

通常不会将所有的UI控件都放在Canvas层级下，而是会有类似 Canvas-grandpa-father-son 的层级管理，所以应当注意之中的 grandpa、father的尺寸(宽度width*高度height)，如果最底下的son控件需要根据整个屏幕自适应，那么须确保grandpa与father已填充了屏幕尺寸。（如图4所示，可以通过alt+点击最右下角，填充整个屏幕）

五 思考

5.1 题目描述

现在需要在屏幕右下角放置一个button，有两种设计模式，一种是永远保持与屏幕边框20像素；另一种是永远在屏幕右下角1/10距离处，应该如何实现？

5.2 分析方案

对于第一种模式，我们需要将pivot移动到控件的右下角(1, 0)，将anchor移动到屏幕的右下角(1,0)，然后将position（相对距离）设置为 PosX=-20, PosY=20, 使pivot位于锚点x轴负方向20像素，y轴正方向20像素处见下图

对于第二种模式，pivot设置为（1,0），锚点设置为（0.9,0.1），PosX=0, PosY=0，将pivot吸附到锚点如下图