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
wenbocode@126.com
网友评论