UI 自适应屏幕

🎯本节学习目标

• 掌握自适应策略
• 掌握安全区适配
• 验证多分辨率

🚀课程导读

同一套 UI 要适应手机/平板/PC 不同屏幕，靠“锚点 + Scaler + 安全区”三件套。本课整合。

◆自适应策略

不同元素不同策略。

1. 【策略总览】
2. ① 固定角落的元素（标题、按钮）：用锚点对齐四角/中心。
3. ② 全屏背景/面板：用锚点拉伸（四边 0）。
4. ③ 需要随屏幕变化的元素：锚点拉伸 + Scaler 缩放。
5. 【Canvas Scaler】Scale With Screen Size + 参考分辨率 1920x1080 + Match 0.5（第 146 课）。
6. 【背景图】背景 Image 锚点四角拉伸，任何分辨率都铺满。
7. 【标题】锚点中上 + PosY 固定。
8. 【按钮组】锚点中下 + 布局组件。
9. 【实战】做一个“标题（上）+ 主按钮（中）+ 底部信息（下）”的界面，切分辨率验证不乱。
10. 【验证】Game 视图把 Aspect 切换为 16:9、4:3、9:16 分别查看。
11. 【注意】极端比例（超宽屏）需额外适配（Layout 与锚点结合）。

◆安全区 Safe Area

适配刘海屏。

1. 【问题】全面屏手机顶部有刘海/挖孔，UI 被遮挡。
2. 【Safe Area】指屏幕“安全区域”（避开刘海、圆角、底部手势条）。
3. 【方案1 组件】给 Canvas 加 SafeArea 脚本（网上常见）或自写：
4. RectTransform rt = GetComponent<RectTransform>();
5. Rect safe = Screen.safeArea;
6. Vector2 min = safe.position;
7. Vector2 max = safe.position + safe.size;
8. rt.anchorMin = new Vector2(min.x / Screen.width, min.y / Screen.height);
9. rt.anchorMax = new Vector2(max.x / Screen.width, max.y / Screen.height);
10. 【方案2】把关键 UI 放进“安全区容器”（按 safeArea 拉伸的 Panel）。
11. 【测试】编辑器右上角 Device Simulator 可模拟 iPhone 刘海屏（Window → General → Device Simulator）。
12. 【注意】safeArea 只有移动端有意义，PC 上等于全屏。
13. 【实战】把主界面容器适配 safeArea 并模拟刘海屏验证。

⚠常见错误与排查

★动手练习

✓本节小结

UI 自适应已掌握。下一课学 UI 动画。