Unity UI 系统知识大全

一份系统、完整的 Unity UI 知识地图——从骨架到控件、从适配到性能、从事件到动画把界面开发的方方面面一次讲透。️ UI 系统全景导航┌─────────────────────────────────────────────────────┐ │ Unity UI 知识体系全景 │ │ │ │ 地基层 │ Canvas · RectTransform · EventSystem │ │ ────────┼───────────────────────────────────── │ │ 控件层 │ Image · Text · Button · Slider · 输入框 │ │ ────────┼───────────────────────────────────── │ │ 布局层 │ 锚点 · 轴心 · 布局组件 · 自适应 │ │ ────────┼───────────────────────────────────── │ │ 适配层 │ Canvas Scaler · Safe Area · 多分辨率 │ │ ────────┼───────────────────────────────────── │ │ 交互层 │ 事件系统 · 射线检测 · 拖拽 · 点击 │ │ ────────┼───────────────────────────────────── │ │ 性能层 │ 合批 · Rebuild · 动静分离 · 图集 │ │ ────────┼───────────────────────────────────── │ │ 进阶层 │ 列表复用 · UI动画 · UI Toolkit │ └─────────────────────────────────────────────────────┘一、地基三大根基组件 ️1.1 Canvas画布——UI 的根容器所有 UI 元素都必须是 Canvas 的子孙它是一切界面的大画板。三种渲染模式Render Mode模式特点用途Screen Space - OverlayUI 永远盖在最上层不受相机影响常规 HUD、菜单Screen Space - CameraUI 交给指定相机渲染可加特效/透视需要3D特效的UIWorld SpaceUI 变成 3D 世界里的一块面板血条头顶、场景招牌、VR性能提示一个 Canvas 是一个合批与重建单元合理拆分 Canvas 是性能关键见第六章。1.2 RectTransform矩形变换——UI 专用骨架普通 3D 物体用TransformUI 元素则用升级版的RectTransformTransform3D: 只有 位置/旋转/缩放 ↓ 升级 RectTransformUI: 多了三样UI专属: · Size宽/高 → UI是有大小的矩形 · Anchor锚点 → 相对父容器的定位 · Pivot轴心 → 自身旋转/缩放的中心1.3 EventSystem事件系统——交互的中枢场景里必须有一个 EventSystemUI 才能响应点击、拖拽、输入等一切交互见第五章。二、常用控件大全 ️2.1 基础显示控件控件作用关键属性Image显示图片/精灵Sprite、TypeSimple/Sliced/Tiled/FilledRaw Image显示原始纹理可显示 RenderTextureText / TextMeshPro显示文字字体、字号、对齐Panel面板容器本质是带 Image 的空容器Image 的 Type 妙用Sliced九宫格图片拉伸不变形按钮背景必用Filled填充做血条、冷却圈、进度条Tiled平铺重复贴图⚠️文字首选 TextMeshProTMP比老 Text 更清晰、功能更强描边、渐变、富文本已是行业标配。2.2 交互控件控件作用Button按钮点击事件Toggle开关/勾选框可组成单选组Slider滑动条音量、进度Scrollbar滚动条Scroll View滚动视图长列表、背包Dropdown下拉选择框Input Field文本输入框2.3 控件的交互状态Button 等控件有Normal / Highlighted / Pressed / Selected / Disabled五种状态可用颜色、图片、动画来区分——让交互有反馈感。三、布局锚点、轴心与自动布局 3.1 锚点Anchor——适配的灵魂核心思想不定死坐标定相对父容器的方位关系。九宫锚点(定吸附方位): ┌─────────────────────┐ │◤左上 ▲上 右上◥│ │◀左 ●居中 右▶│ │◣左下 ▼下 右下◢│ └─────────────────────┘ · 血条锚左上 → 任何屏幕都稳在左上角 · 弹药锚右下 → 任何屏幕都贴在右下角 · 血条锚上中拉伸 → 横向随屏幕拉伸锚点的两种形态形态表现用途点锚点四角重合元素固定大小吸附某方位图标、按钮拉伸锚点四角分开元素随父容器拉伸变大变小背景、全屏遮罩3.2 轴心Pivot——旋转缩放的中心Pivot 决定元素绕哪个点旋转/缩放也是坐标定位的基准点。如指针表盘要把 Pivot 设在底部3.3 自动布局组件Auto Layout组件作用Horizontal Layout Group子元素水平排列Vertical Layout Group子元素竖直排列Grid Layout Group网格排列背包格子Content Size Fitter容器随内容自动撑大Layout Element单独控制某元素的布局尺寸Aspect Ratio Fitter保持宽高比组合拳Vertical Layout GroupContent Size Fitter 自动排列且自动撑高的列表聊天记录、任务列表。四、多分辨率适配 4.1 Canvas Scaler画布缩放器适配的总开关三种缩放模式模式说明Constant Pixel Size固定像素不随屏幕变不推荐移动端Scale With Screen Size⭐ 按参考分辨率缩放主流选择Constant Physical Size固定物理尺寸Scale With Screen Size 关键参数Reference Resolution参考分辨率如 1920×1080Match宽/高匹配权重0宽为准1高为准0.5折中4.2 Safe Area安全区——躲开刘海挖孔┌───────────────────────────────┐ │ ▓▓刘海▓▓ [挖孔] ← 危险区 │ │ ┌───────────────────────────┐ │ │ │ ✅ 安全区(Safe Area) │ │ │ │ 要紧的UI(血条/按钮)放这! │ │ │ └───────────────────────────┘ │ │ ▓▓▓底部黑条▓▓▓ ← 危险区 │ └───────────────────────────────┘功能性 UI→ 放进安全区绝不被遮装饰性背景→ 可铺满全屏延伸到刘海底下代码通过Screen.safeArea获取范围动态适配异形屏适配三法宝锚点相对关系 Canvas Scaler整体缩放 Safe Area躲异形屏。五、事件与交互系统 ️5.1 交互链路用户点击屏幕 ↓ EventSystem中枢 ↓ Graphic Raycaster射线检测器挂在Canvas上 ↓ 发射射线看点到了哪个UI 命中的UI元素 ↓ 触发对应事件OnClick等⚠️点不动UI常见原因① 场景缺 EventSystem② Canvas 缺 Graphic Raycaster③ 被别的透明 Image 挡住了射线④ 目标的Raycast Target没勾选。5.2 事件接口接口触发时机IPointerClickHandler点击IPointerEnter/ExitHandler指针进入/离开IPointerDown/UpHandler按下/抬起IDrag / IBeginDrag / IEndDrag拖拽IScrollHandler滚动性能优化不需要接收点击的图片如纯装饰关掉Raycast Target减少射线检测负担。六、UI 性能优化 6.1 核心机制Rebuild重建与 Rebatch重合批┌────────────────────────────────────────┐ │ UI 性能的两大开销: │ │ │ │ Rebuild(重建网格): │ │ 元素的形状/文字/大小变了 │ │ → 重新生成网格 │ │ │ │ Rebatch(重新合批): │ │ 同一Canvas任一元素变了 │ │ → 整块Canvas重新计算合批 │ │ │ │ → 一处变动,可能连累整块Canvas! │ └────────────────────────────────────────┘6.2 优化手段手段说明动静分离频繁变的和静止的拆到不同 CanvasSprite Atlas图集多张小图打成一张大图减少 Draw Call关闭无用 Raycast Target减少射线检测少用 Layout Group布局组件每帧计算开销大可用固定坐标替代对象池 列表复用长列表只创建可见项见第七章隐藏用 SetActive 而非移出屏幕真正停止渲染与更新避免频繁 SetActive频繁开关也有开销可用移出/CanvasGroupCanvasGroup 妙用调alpha整体淡入淡出、interactable统一禁用交互、blocksRaycasts控制是否挡射线——一次控制一组 UI。七、进阶实战 7.1 长列表复用List Recycling痛点背包有 1000 个道具若生成 1000 个格子 → 卡死。解法只创建屏幕能看见的十几个格子滚动时回收上边划走的、复用到下边——永远只用十几个对象承载千条数据。滚动列表复用原理: ┌──────────┐ │ [格子1] │ ← 划出屏幕 │ [格子2] │ │ [格子3] │ 可见区只有这几个真实存在 │ [格子4] │ └──────────┘ 格子1划出 → 回收 → 变成格子N补到下方 (十几个对象转着圈儿撑起千条数据)7.2 UI 动画方案特点Animator状态机驱动适合复杂UI动效DOTween⭐ 代码补间轻量高效弹窗缩放、渐隐Tween 常用缩放弹出、位移滑入、淡入淡出、数字滚动7.3 UI 架构MVC / MVVM数据与显示分离UI 管理器统一管理面板的打开/关闭/层级/栈事件驱动数据变化 → 通知 → UI 刷新避免每帧轮询八、两代 UI 系统对比 ⚔️UGUIUI ToolkitIMGUI定位主流游戏 UI新一代/编辑器编辑器工具方式GameObject组件UXMLUSS类Web纯代码即时模式可视化Scene 拖拽UI Builder无成熟度⭐⭐⭐⭐⭐ 成熟稳定发展中老牌适用游戏运行时 UI编辑器扩展、部分运行时Inspector/工具当下选型游戏运行时 UI仍首选 UGUI生态成熟编辑器工具/复杂布局可尝试UI Toolkit。九、常见踩坑速查 症状病因药方换屏幕UI跑位钉了死坐标用锚点定相对关系血条被刘海挡没做安全区Safe Area 收进UIUI狂刷新掉帧动静混一块Canvas动静分离点不动按钮缺EventSystem/被遮挡检查射线链路文字发虚模糊用了老Text/字号过小换TextMeshPro图片拉伸变形Image用了Simple改九宫格Sliced长列表卡死全量生成格子列表复用对象池Draw Call爆炸碎图太多打Sprite Atlas图集十、UI 开发心法总结 ┌──────────────────────────────────────┐ │ 搭好一套UI的四层功夫: │ │ │ │ ① 立骨架: Canvas RectTransform │ │ (换模型:UI是矩形不是点) │ │ ② 做布局: 锚点定相对关系 │ │ (以不变应万变) │ │ ③ 保适配: Scaler缩放 Safe Area │ │ (要紧的放安全处) │ │ ④ 优性能: 动静分离 图集 列表复用 │ │ (别让一处惊扰一大片) │ └──────────────────────────────────────┘层面一句话精髓Canvas所有UI的大画板、合批与重建单元RectTransformUI是有大小、讲相对关系的矩形锚点钉相对关系而非死坐标以不变应万变Safe Area要紧的放安全区装饰的才铺边缘事件系统EventSystem射线UI才能交互性能动静分离、打图集、列表复用控件Image九宫格、文字用TMP选型运行时UGUI工具UI Toolkit