从 19 寸的方屏到 34 寸的带鱼屏,同一套 UI 在不同分辨率下的布局全靠锚点与缩放策略。适配的实现要点是锚点的基准选择、缩放的模式与安全区的避让,适配做好了,任何屏幕都是完整体验。
---UI 的锚点绑定:九宫格定位
local ANCHORS = {
leftTop = { x = 0, y = 1 },
center = { x = 0.5, y = 0.5 },
rightBottom = { x = 1, y = 0 },
}
function UiLayout.bind(node, anchor, offsetX, offsetY)
local sw, sh = Screen.size()
local base = ANCHORS[anchor]
node:SetPosition(
base.x * sw + offsetX,
base.y * sh + offsetY)
end
---小地图绑定右上角
UiLayout.bind(MiniMap.node, 'rightTop', -180, 40)
UI 的定位锚定屏幕的九个基准点:左上、中、右下——控件相对锚点偏移定位,分辨率的改变自动重排。锚点的选择按控件的功能定:小地图绑右上、技能栏绑下中、聊天绑左下,功能的习惯位置与锚点一一对应。锚点偏移用绝对像素:偏移量不随分辨率缩放,边距的视觉一致性由固定值保证。
---UI 的整体缩放:全局的缩放系数
local SCALE_STEPS = { 0.8, 1.0, 1.25, 1.5 }
function UiScale.apply(step)
local factor = SCALE_STEPS[step]
UiRoot:SetScale(factor)
Settings.set('uiScale', step)
end
---安全区的避让:刘海与圆角的遮挡
function UiScale.safeArea(win)
local inset = Screen.safeAreaInsets()
win:SetPosition(win.x + inset.left, win.y + inset.top)
end
UI 的整体缩放提供四档:0.8 到 1.5 倍的系数步进,玩家的视力与屏幕尺寸自选合适的档位——缩放是全局的根节点变换,子控件按比例跟随。安全区的避让照顾异形屏:刘海与圆角的遮挡区域由系统接口获取,UI 的关键元素避开遮挡带。适配的验收清单覆盖主流的分辨率:从 4:3 的老方屏到 21:9 的带鱼屏,逐档截图核对布局的完整性——适配的问题在验收期拦截而不是上线后修。
多分辨率的截图验收清单:主流的分辨率逐档截图进版本库比对;UI 元素的遮挡检测:关键控件的两两重叠检查,遮挡的自动报告进验收。
锚点的偏移曾经按比例计算,大屏上按钮间距被放大到离谱,偏移与缩放分离后正常。缩放的根节点变换曾经影响点击的坐标换算,点击的位置按缩放反推修正。安全区的接口曾经在某些设备返回零值,刘海机的刘海遮住了血条,接口的兼容降级处理。
适配的验收清单随新设备的上市扩充,主流机型的覆盖是底线。缩放的档位与默认值进配置,新手的默认档位按屏幕的尺寸自动推荐。适配的 Bug 进固定的回归清单,修复过的问题不复发。
全站技术干货持续更新:996 引擎 / Lua 实战帖,语法、参数与示例一篇讲透。进入文章地图 · 查看全部 →
实战应用:用在哪里 悬赏捕杀把玩家之间的恩怨变成可托付的系统行为:仇家难以亲自复仇时,花费金条发布悬赏,全服玩家接单击杀目标…
实战应用:用在哪里 策划改表是日常动作,漏填字段、引用了不存在的编号、数值越界这三类问题占了配表故障的绝大多数。等玩家报错再…
实战应用:用在哪里 行会擂台给中小行会提供了固定的对抗出口:挑战方击败守擂方后接管擂台,连胜次数决定每日结算奖励档位。接口层…
实战应用:用在哪里 世界首领战里玩家最关心的是伤害前十名:榜单要求随时插入、随时能按序取出,每来一条伤害记录都重新排序一次太…
实战应用:用在哪里 百人同屏的攻城战里,把每条移动、施法消息广播给全地图是最常见的性能失误。九宫格视野的做法是把地图切成等大…
实战应用:用在哪里 留言板、行会招募语、邮件标题这类字段会被玩家自由填写,并写入角色变量或转发给持久层。拼接式的写法一旦遇到…