设计适应不同屏幕分辨率的UI

本文转自Unity Connect博主 尹煜

现代游戏和应用程序通常需要支持各种不同的屏幕分辨率，特别是 UI 布局需要能够适应这种情况。Unity 中的 UI 系统包含用于此目的的各种工具，并可通过各种方式将这些工具组合起来使用。

在本操作指南中，我们将研究一个简单案例，并在此背景下了解和比较不同的工具。在我们的案例研究中，我们在屏幕角点处有三个按钮（如下所示），目标是使这种布局适应各种分辨率。

在本操作指南中，我们将考虑四种屏幕分辨率：手机高清 (HD) 纵向 (640 x 960) 和横向 (960 x 640) 以及手机标清 (SD) 纵向 (320 x 480) 和横向 (480 x 320)。最初的布局设置为手机高清纵向分辨率。

使用锚点来适应不同的宽高比

默认情况下，UI 元素锚定到父矩形的中心。这意味着它们与该中心保持恒定的偏移。

如果使用此设置将分辨率更改为横向宽高比，则按钮可能甚至不再位于屏幕的矩形内。

一种将按钮保持在屏幕内的方法是，通过改变布局，使按钮的位置绑定到屏幕的各个角。可使用 Inspector 中的 Anchors Preset 下拉选单或通过拖动 Scene 视图中的三角形锚点控制柄，将左上角按钮的锚点设置为左上角。如果 Game 视图中设置的当前屏幕分辨率是最初设计布局时的目标分辨率（此时的按钮位置看起来正确），那么最适合这样做。同样，左下角按钮和右下角按钮的锚点可以分别设置为左下角和右下角。

一旦这些按钮锚定到各自的角点，当分辨率更改为不同的宽高比时，这些按钮会保持在相应位置。

当屏幕大小更改为更大或更小的分辨率时，按钮也仍然锚定到各自的角点。但是，由于按钮保持原始大小（以像素为单位），因此按钮占据屏幕的比例可能会变大或变小。这种状态可能符合需求，也可能不符合需求，具体情况取决于您希望布局在不同分辨率的屏幕上的表现方式。

在本操作指南中，我们知道手机标清纵向和横向布局的较小分辨率并不意味着屏幕实体较小，只是屏幕的像素密度较低而已。在这些像素密度较低的屏幕上，按钮看起来不应该大于高密度屏幕上显示的按钮，而是应该以相同的大小显示。

这意味着按钮变小的比例应该与屏幕变小的比例相同。换句话说，按钮的比例应遵循屏幕大小。这种情况下，画布缩放器 (Canvas Scaler) 组件很有用。

随屏幕大小缩放

画布缩放器组件可添加到根画布&#x