Unity UGUI ANCHORS 及屏幕适配

RectTransform 中的 Anchors 用来指定每个UI元素相对于父节点内某个矩形对齐.

在 Inspector 中可看到，AnchorMin 和 AnchorMax 定义了一个矩形（矩形的边可以重合），这个矩形可以在 Scene 里看到（由四个白色三角标识）。

AnchorMin 和 AnchorMax 的值是归一化的，对应表示 AnchorRect 位置在父节点 Rect 中是相对的，在编辑时 UnityEditor 会给出百分比提示。

当调整UI大小时，RectTransform 的 Scale 不会发生改变，改变的是 SizeDelta。当UI大小发生改变时，AnchorRect的四个点会随之发生变化（根据AnchorMin和AnchorMax进行插值），因为子元素的 Rect 和 AnchorRect 每两对应边的相对位移不变，从而实现子元素随着父节点大小和位置改变而改变。（下面是示意图）

换句话说，当父节点 Size 发生改变时，AnchorRect 会随之变化（包括位置和大小），因为子元素的Rect要跟AnchoredRect保持一致性，从而调整大小和位置。

当AnchorRect 双边重合时，不管父节点大小如何改变AnchorRect的大小始终为0，意味着子元素的大小也不会发生改变，这时子元素只是对AnchorPoint(大小为0的AnchorRect)进行位置的对齐。

了解 Anchors 的工作方式后，再做屏幕适配就可以视情况而定了。

UGUI必需要用一个Canvas来做为根节点， 我们可以用 Editor 把Game窗口设置为 Free Aspect形式，然后拖动改变窗口大小来观察适配效果。

这时你会发现，视窗大小发生改变时实际上发生改变的是Canvas的 width 和 height, 这就符合上面讨论的适配方式。在实际操作中，屏幕适配可以根据实际要求针对不同的UI做不同的对齐设置。以下图为例：

这时元素 Anchor 设置可以分为三种：

1、以跟父节点Size比调整大小 (AnchorRect 跟本身 Rect 重合即可)，也就是说父节点 Size 减为0时，子元素Size也刚好减为          0。

2、以非Size比等比调整大小

3、不跟随父节点调整大小

另外，灵活运用父子层级进行相对校正也是很重要的哦。

基于这于思路，上图示例UI布局主要分 左上、左下、右边的Item区。对于左上相对宽松的布局采用不调整大小的方式，左下相对紧凑的布局用Size比的方式，右边Item区，根据不同元素进行调整。设定好对齐方式后一定要在视窗里用不同的比例来测试、验证。比较常见的比例有，16：9，3：2，4：3，5：4等，下面是验证结果：

3：2

4：3

5：4

从验证结果上看，基本按照想像中调整，具体操作中可以根据实际需求来针对个别UI进行调整。

最后，提醒下，Text组件要在调整大小的同时保持完整地显示内容，把 BestFit 设置上。

本文内容为原创，转载请注明出处。

http://www.jianshu.com/users/e1de79abf0ec/latest_articles

[email protected]