UI对齐 ​

为什么UI需要对齐？ ​

众所周知，口袋方舟编辑器制作的游戏可以在多端游玩，电脑、平板、手机，这些设备屏幕大小不一致，并且不同类型的设备本身也有不同的型号和分辨率，创作者不可能为每一种分辨率的设备都做一套UI，而这正是UI对齐功能要解决的问题。

我们可以根据UI之间的父子关系，把父级UI比作相框，它的子级UI比作相框里的照片。对齐规则，就是当相框大小变化时，里面的照片应该如何调整自己的大小和位置。

UI控件的对齐规则 ​

水平方向 ​

• 靠左对齐
  • 行为：父级无论怎么变化，我都保持到父级最左边的距离不变，且大小不变。
  • 理解：“我就呆在左边这里，不动了”。
  • 场景：返回按钮、角色头像、竖屏游戏的左侧菜单。

• 靠右对齐
  • 行为：父级无论如何变化，我都保持到父级最右边的距离不变，且大小不变。
  • 理解：“我就呆在右边这里，不动了”。
  • 场景：金币/状态显示、设置按钮、竖屏游戏的右侧功能栏。

• 左右对齐
  • 行为：父级无论如何变化，我都保持到父级最左边和最右边的距离不变，大小会发生变化。
  • 理解：“我吃了橡胶果实并且左右手一直撑着两边的墙”。
  • 场景：血条/经验条、顶部通栏、底部工具栏、背景图。

• 中心对齐
  • 行为：父级无论如何变化，我永远保持在水平方向的正中间，且大小不变。
  • 理解：“我永远站在C位”。
  • 场景：游戏标题、主界面Logo、弹出对话框的主内容。

• 自适应
  • 行为：在水平方向上，我会根据父级的变化等比例缩放自己。
  • 理解：“屏幕越大，我越大；屏幕越小，我越小”。
  • 场景：虚拟摇杆、摄像机画面、需要整体缩放的游戏内元素。

垂直方向 ​

规则和水平方向一一对应：

• 靠上对齐
  • 行为：父级无论怎么变化，我都保持到父级最上边的距离不变，且大小不变。
  • 场景：顶部状态栏（时间、信号）。

• 靠下对齐
  • 行为：父级无论怎么变化，我都保持到父级最下边的距离不变，且大小不变。
  • 场景：底部按钮、聊天框。

• 上下对齐
  • 行为：父级无论如何变化，我都保持到父级最上边和最下边的距离不变，大小会发生变化。
  • 场景：两侧的竖条背景。

• 中心对齐
  • 行为：父级无论如何变化，我永远保持在垂直方向的正中间，且大小不变。
  • 场景：屏幕正中间的按钮或提示。

• 自适应
  • 行为：在垂直方向上，我会根据父级的变化等比例缩放自己。
  • 场景：和水平方向的自适应一起使用，控制整体缩放。

通用规则 ​

记住这几条↓↓↓，能解决你90%的UI适配问题：

• 先定“位”，再定“型”

首先想清楚这个UI元素应该出现在屏幕的哪个位置（左上、右上、底部、正中），再根据它是否需要固定大小来选择对齐方式。

• 组合使用是王道

每个UI元素都同时拥有水平对齐和垂直对齐属性。你需要把它们组合起来，才能精确定位。

例：一个“开始游戏”按钮，通常设置为 水平：中心对齐 + 垂直：中心对齐。

• “对齐”管位置，“自适应”管大小

靠左/靠右/靠上/靠下/中心对齐：主要控制位置固定和大小固定。

左右/上下对齐：主要控制大小拉伸。

自适应：主要控制等比缩放。

• 默认“左上对齐”

直接从编辑器拖出来的UI，默认是水平：靠左对齐 + 垂直：靠上对齐。这意味着它在不同屏幕上会一直呆在相对于父级的左上角，**这通常是很多UI错位的根源！**所以，你的第一步往往就是修改这个默认值。

常见游戏UI对齐方案举例 ​

角色血条/经验条

1. 逻辑：它通常位于屏幕上方，并且宽度应该随屏幕宽度变化，高度固定。
2. 对齐：水平：左右对齐 + 垂直：靠上对齐。
3. 解释：这样无论手机是胖是瘦，血条都能完美撑满顶部区域。

虚拟摇杆

1. 逻辑：固定在左下角，并且希望在不同尺寸的屏幕上，摇杆的相对大小保持一致（在大屏幕上大一点，小屏幕上小一点）。
2. 对齐：水平：自适应 + 垂直：自适应。
3. 解释：“自适应”确保了它的比例缩放，让它在不同设备上的操作手感保持一致。

金币和技能按钮

1. 逻辑：金币数字显示在右上角，技能按钮在右下角。它们的位置是固定的，大小也不变。
2. 对齐：
   • 金币：水平：靠右对齐 + 垂直：靠上对齐。
   • 技能按钮：水平：靠右对齐 + 垂直：靠下对齐。
3. 解释：参考同上图。

全屏背景图

1. 逻辑：必须填满整个屏幕，不能有黑边。
2. 对齐：水平：左右对齐 + 垂直：上下对齐。
3. 解释：这会让图片强制拉伸到和屏幕一样大，确保全覆盖。

弹出窗口（如设置面板）

1. 逻辑：一个方形的对话框，始终在屏幕正中央。
2. 对齐：水平：中心对齐 + 垂直：中心对齐。
3. 解释：无论屏幕如何变化，这个窗口的中心点永远对准屏幕的中心点。

如何检查对齐效果 ​

当你发现UI适配有问题时，应该按照如下顺序检查：

• 当前UI元素的直接父级是谁？
• 这个父级的对齐方式是什么？它是否正确占据了屏幕的某个区域？
• 当前UI元素自身的对齐方式，是否基于这个父级做出了你期望的位置/大小的变化？

tips：请大胆尝试！ 在编辑器里，一边拖动预览窗口，一边实时修改对齐属性，观察UI的变化。这是最快、最直观的学习方式。