为多种分辨率设计UI

Posted 2020-06-30 大哥大嫂过年好啊

如今的游戏和程序通常需要支持许多种不同的屏幕分辨率，并且其UI布局也需要自适应多种分辨率。Unity的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)。初始化的分辨率为Phone HD Portrait。

使用锚点来适应不同方向的缩放

UI元素默认以其父对象的矩形中心为锚点。也就是说他们距离中心的位移是一个常量。如果分辨率变为landscape方向，那些按钮也许甚至会跑到屏幕外面。

使按钮保持在屏幕内的一种方法是改变布局，例如使按钮的位置与其对应的角落绑定。左上角的按钮的锚点设置为屏幕的左上角，方法是修改Inspector中的锚点预设(Anchors Preset)，或者是拖拽Scene View中的三角锚点符号。

无论屏幕尺寸变大或变小，按钮都将保持固定在各自所在角落的位置。然而，由于他们保持原始的以像素为单位的尺寸，他们在屏幕中所占的比例可能会变大或变小。这也许是你想要的结果，也许不是，这取决于你希望你的布局在不同的分辨率下是什么样子的。

在这个例子中，我们所说的Phone SD Portrait 和 Landscape的小分辨率并不是说其屏幕在物理意义上的很小，而是指有一个较低的像素密度。在这些低像素密度屏幕中，按钮不会比高像素密度的屏幕中显示的大，他们应该显示出一样的大小。

这意味着如果屏幕变小，按钮也应该等比例缩小。换句话说，按钮的缩放应该跟随屏幕并与其保持一致。在这一点，Canvas Scaler组件能够提供帮助。

随着屏幕一起缩放

Canvas Scaler可以被添加到根对象Canvas——一个附带Canvas组件的游戏物体，所有的UI元素都是他的子对象。通过GameObject菜单添加的Canvas默认附带Canvas Scaler组件。

在Canvas Scaler组件中，你可以设置其UI缩放模式(UI Scale Mode)为Scale With Screen Size。在这种模式下，你可以指定一个分辨率作为参照。无论当前屏幕的分辨率比参照的分辨率大还是小，Canvas的缩放因子都将被设置，因此所有UI元素都将随着屏幕一起缩放。

在我们的例子中，我们将Canvas Scaler设置为Phone HD landscape的分辨率640 x 960。现在，当设置屏幕分辨率为Phone SD portrait的320 x 480时，整个布局都等比例的缩小了。所有东西都缩小了：按钮尺寸，他们距离屏幕边缘的距离，按钮的图标以及文字。这意味着在Phone SD portrait中显示出的布局与再Phone HD portrait中是一样的，仅仅是像素密度降低了。

添加Canvas Scaler组件后，搞清楚这个布局在其他宽高比下看起来是什么样子的是很重要的。通过设置回Phone HD landscape， 我们发现按钮此时显示的比他们应当显示的尺寸要大。

归根结底按钮变大的原因取决于Canvas Scaler如何设置。默认情况下，他拿当前分辨率的宽与Canvas Scaler指定的参考分辨率的宽作对比，其结果将作为缩放因子来缩放所有的东西。这个组件有一个名为Match的属性，其值可以设置为0(宽)，1(高)或者一个介于两者之间的值。默认情况下其值为0，也就是当前屏幕的宽和Canvas Scaler的宽作比较。

如果Match的值设为0.5， 他将同时比较当前宽和参考宽以及当前高和参考高，并且在两者区间内(个人理解)选择一个缩放因子。由于此例中landscape分辨率是1.5倍宽但是也是1.5倍短，所以这两个缩放因子平均出了一个缩放因子1， 也就是说按钮保持其原来大小。