针对不同设备缩放 UI

建议您先整体了解 UMG UI Designer ，然后再阅读此指南。

制作项目 UI 前应该明确发布项目的目标设备。实际上，您的项目可能在多个设备和平台上发布。 因此需要使用遵循 DPI 缩放 规则的自动分辨率独立 UI 缩放。

简单来说，该选项可定义一个 DPI 缩放规则（用于确定应用的缩放）和一条 DPI 曲线（包含可定义的不同分辨率和各自的缩放值），基于这些不同分辨率自动缩放 UI 元素。通过此法可简单快捷地将 UI 画面（含一系列分辨率）从手机设备移植到平板或 PC 上。

此指南将讲述如何对简单 UI 画面设置 DPI 缩放规则，以便将其部署到多个设备上。

步骤

此指南中使用的是 第一人称模板。也可使用任意项目。

  1. 创建并打开一个 控件蓝图 。

  2. 在 Designer 标签上，记录 Visual Designer 窗口右下角当前的 DPI Scale。

    WidgetBlueprint.png

    通常，最佳方式是以 1.0 的缩放设置 UI 元素，再使用 DPI 缩放规则对其进行放大缩小。

  3. 点击 齿轮 图表打开 用户界面设置（User Interface Settings） 窗口。

    OpenUserInterfaceSettings.png

    也可从项目的 项目设置 访问用户界面设置。

  4. 在 DPI Scaling 下，选择希望使用的 DPI 缩放规则（在此使用的是视口 最短边）。

  5. 在 DPI 曲线 上找到反映缩放值 1.0 的键。

    Scale.png

    此项目将 1080 设为 1 缩放，但我们将进行修改。

  6. 返回 Designer 标签上的 控件蓝图，点击 Screen Size 下拉菜单并选择 Apple iPhone 6 (Portrait)。

    iPhone6Screensize.png

    此设置将把 iPhone 6 作为该指南中使用的目标设备。您可在自己项目中随意选择。

    选择屏幕尺寸后，Visual Designer 窗口便会更新，显示实际工作的屏幕尺寸。

    VisualDesignerUpdated.png

    DPI 缩放规则使用 最短边 后，iPhone 6 (Portrait) 的最短边 750 便是 1 缩放。

  7. 返回 DPI 曲线 的用户界面设置，将 1 缩放的 分辨率 设为 750。

    UpdatedResolution1.png

    输入的数值可能会进行调整，出现类似于 750.000061 的数字。 在不同分辨率之间切换时，部分 UI 元素可能出现轻微移动，因此我们将为使用 1 缩放的 UI 设置分辨率范围。

  8. 将 1 缩放的 分辨率 设为 749。

  9. 长按 Shift 单击左键 在图表中创建另一个键，然后将其 分辨率 设为 760，缩放 设为 1.0。

    SecondKeyAdded.png

    上图已放大显示，便于您查看范围。您可适当增大或缩小该范围。

  10. 返回 控件蓝图，可发现 iPhone 6 (Portrait) 的 DPI 缩放为 1.0。

    UpdatedScale.png

  11. 打开 Screen Size 下拉菜单，选择一个不同的屏幕高宽比（如 Samsung Galaxy S4 (Portrait)）。

    S4Screen.png

    DPI 缩放值将发生变化。为保证 UI 正确地缩放到该高宽比中，可用目标分辨率的最短边（1080）除以目标设备的最短边（750），获得缩放值 1.44。

  12. 返回 DPI 曲线 的用户界面设置，长按 Shift 单击左键 新建两个键。

  13. 将一个键的 分辨率 设为 1079（缩放 1.44），另一个键的 分辨率 设为 1090（缩放 1.44）。

  14. 对计划支持的每个设备重复步骤 11 到 13。

这将基于 DPI 缩放设置中定义的规则自动缩放 UI 元素。如放置控件时移动出屏，则需要使用 锚 ，将控件固定到视口中的位置。

相关页面

完整内容索引