UI How Tos – Designing UI for Multiple Resolutions

本文翻译自Unity官方文档(UGUI部分) :docs.unity3d.com/Packages/co…

#Designing UI for Multiple Resolutions

现代化的游戏和应用通常需要支持多样化的屏幕分辨率 ， 所以 ， 让UI能自动适应差异化的屏幕分辨率 ，是十分必要的 。 Unity的UI系统提供了一套的工具集 ，通过工具之间因需求而产生的不同组合 ，以便实现在不同屏幕分辨率下的显示一致性 ；

在这个 how-to(“怎样做”)里 ， 我们将使用一个简单的例子来 学习&观摩&比较 不同的工具组合所产生的不同效果 ；在我们的示例中 ，有三个按钮 ，分别位于屏幕的三个不同角落 ，我们的目标是使得这个UI布局能自动适应不同的屏幕分辨率 ，如下图所示 ：

在本文中 ， 我们将会使用以下的屏幕分辨率用于演示 ：
Phone HD in portrait (640 x 960) and landscape (960 x 640) and Phone SD in portrait (320 x 480) and landscape (480 x 320).
用作设计UI的标准屏幕分辨率是 : Phone HD Portrait resolution

#Using anchors to adapt to different aspect ratios

UI元素的各个锚点默认都是指向父对象矩形边界的中心的 , 这意味着UI元素将始终保持一个相对于该中心的常向量(起始于UI元素的轴心点，终止于父对象的矩形边界框中心) ；

这会导致一个问题 , 即分辨率若由竖向改变为了横向 ， 那么这些按钮将可能不会出现在rectangle的内部 ：

在像素密度相同的情况下 ， 分辨率便决定了屏幕物理尺寸的大小 ，所以下图中当分辨率从 640*960 变为 320*480 的时候 ， 屏幕的大小便发生了成比例的变化 。值得注意的是 ，由于按钮的锚点被设置为聚焦在相应的顶点 ， 所以按钮便会始终保持相对于顶点的位置 ，无论屏幕的实际尺寸如何变化 。在这种情况下 ， 我们会发现按钮始终保持着它们的原始像素大小，因此会在不同屏幕尺寸下显得太大或太小 ，这对审美而言或许会是非常突兀的不适感 。但是这实际上也取决于你的个人喜好 ，因人而异！！！

我们应该明确 ，在像素密度不一致的情况下 ， 并不是说分辨率越大 ， 屏幕尺寸就越大 ； 例如分辨率是 Phone SD Portrait(320480) 和 Phone SD Landscape(320480) 的屏幕 ， 并不意味着它的尺寸就比对应分辨率是Phone HD 的屏幕小 。它们的尺寸完全可以一致 ， 只不过 Phone SD 相对于 Phone HD 的像素密度低而已 ；在这中情况下 ，即使分辨率低 ， 但是由于屏幕尺寸是一致的 ， 按钮的大小在两个屏幕中就应该保持一致 ， 即按钮的大小应该取决于屏幕的实际尺寸 ， 而不是分辨率 ；

这意味着 ，按钮如果变小的比率 ， 应该要和屏幕尺寸变小的比率保持一致 。换句话说 ， 按钮的适配性缩放 ， 应当取决于屏幕尺寸的大小 ； 这就是我们即将要介绍的 Canvas Scaler 组件能起的作用 ；

#Scaling with Screen Size

Canvas Scaler组件可以添加到一个附加有Canvas 组件的游戏对象上 ，所有的UI元素都将会作为该游戏对象的子对象(对应于Hierachy中的层级关系) ；同样的 ， 当从GameObject菜单下新建一个Canvas对象时 ， Canvas Scale组件会被默认的自动添加 ；

在 Canvas Scaler 组件中 ， 你可以把 UI Scale Mode 设置为 Scale With Screen Size . 在这个适配模式下 ， 你可以指定一个分辨率作为Refrence Resolution(参考分辨率) ；如果当前的屏幕分辨率小于或大于这个Refrencnce Resolution(仅限于由此引起的屏幕实际尺寸差异下) , 那么 Canvas的 scale factor 参数便会相应的被设置 ，以便使所有的UI元素进行缩放以便适应具体的屏幕分辨率(实质上是由此导致了屏幕尺寸发生变化的情况下) ；

在我们的例子中 ， 我们设置 Canvas Scaler 的参考分辨率为 Phone HD portrait , 即 640*960 ，并且我们同时设置了屏幕的分辨率为 320*480 ，于是整个UI布局便被缩放了 ，显示出与640*960的分辨率下一致的UI布局比例性(或者说均衡性) ，所有的UI元素都被成比例的缩放了 , 比如 : 按钮尺寸 , UI元素与屏幕边缘的距离 ，按钮图形 ，以及文本元素 . 这意味着UI元素在两种分辨率下 ，呈现了一致的比例性布局 ;

还有一件事情值得注意的是 ：在添加了一个 Canvas Scaler 组件后 ，应该检查一下在反向纵横比情况下的布局 . 通过设置分辨率为 Phone HD landscape ， 我们可以看到按钮竟然变大了 .

这种不符合我们期望的按钮变大行为 ， 可以归结于 Canvas Scaler 的工作原理 ； 默认情况下 ， 它通对比目前的分辨率的width 和 Canvas Scaler的参考分辨率的width ， 来决定所有UI元素的缩放倍数 . 由于当前的横向显示分辨率为 960 * 640 ， Canvas的参考分辨率是 640 * 960 , 所以整个UI布局被缩放 1.5 倍(960/640) ;

Canvas Scaler 组件有一个属性称为 Match ，可以被极端的设置为 0(只参考width) ，或者1(只参考Height) ，或者两者中间的某个值 ;

如果Match属性被设置为0.5 ，那么就会既对比当前实际的Width和参考的width ，也会对比当前实际的Height和参考的Height ， 并且在两个结果值中间确定一个缩放倍数 ； 在这个例子中 ， 横向分辨率的1.5倍宽于纵向分辨率 ，但是1.5倍短语纵向分辨率 ，所以这 缩放倍数 抵消 ， 最终的缩放倍数就是 1(scale值没变) ，即按钮的大小不会出现变化；

目前为止 ， 我们的UI布局通过正确的放置Anchors ，以及使用Canvas Scaler组件 ，完美的适配了一下四种分辨率 :