第 22 课
制作导航栏
上一课已经让系统菜单可以打开、关闭和拖动。本课继续制作菜单左侧的导航栏：先整理对象层级，再让外层布局统一排列按钮，让每个按钮的内层布局排列图标和文字，最后把高亮背景从自动排列中分离出来。完成后，你将得到结构一致、易于继续连接功能的三个导航入口。
制作清楚易用的菜单导航栏
在系统菜单左侧完成“介绍、导航、设置”三个入口，使用双层自动布局保持按钮整齐，并用圆角高亮背景表达当前入口。
学完你将能够
学习目标
- 说明导航栏容器与三个导航按钮的职责差异。
- 解释自动布局为什么只管理当前对象的直接子对象。
- 设置 NavigationBar 的锚点、位置、尺寸、内边距和按钮间距。
- 区分 Image（图像）与 Button（按钮）两个组件的作用。
- 制作包含图标和文字的 IntroductionButton 模板。
- 使用按钮内部的垂直布局保持图标在上、文字在下。
- 通过每单位动态像素数改善世界空间文字的清晰度。
- 使用 Sliced（分区拉伸）保护高亮背景的圆角。
- 使用 Ignore Layout（忽略布局）让背景不占用排列空间。
- 说明兄弟对象的层级顺序怎样决定背景与文字的遮挡关系。
- 复制按钮并准确对应介绍、导航、设置三组名称与图标。
- 完成静态初始高亮，并说明为什么点击后内容保持不变。
开始操作前
准备工作
- 打开包含 MenuUI 的主场景，确认菜单能够正常显示、隐藏和拖动。
- 确认 MenuUI 中已经存在主要内容区、左侧导航栏背景和拖拽区域。
- 打开 Hierarchy（层级面板）、Inspector（属性面板）、Scene（场景视图）和 Game（运行画面）。
- 确认项目可以创建旧版文字按钮，并且菜单文字继续使用旧版 Text。
- 进入运行状态打开一次菜单，确认上一课的拖拽功能保持正常。
- 退出运行状态并保存场景，再开始制作导航栏。
本课学习路线
按照学习模块逐步完成
每个模块都包含理解、跟随操作和独立实践。用一个容器统一安排三个按钮
配置导航栏的外层垂直布局
Vertical Layout Group（垂直布局组）会从上到下排列当前对象的直接子对象。把它放在 NavigationBar 上，以后修改导航栏高度或复制按钮时，三个入口仍能保持整齐。先区分位置、尺寸和自动排列
Rect Transform（界面矩形变换）负责 NavigationBar 自己在 MenuUI 中的位置和尺寸；Vertical Layout Group 负责 NavigationBar 内部三个按钮的排列。
锚点表示导航栏依附于父区域的哪一部分，Pos X 和 Pos Y 表示它相对锚点的偏移。
NavigationBar 的位置与尺寸
这些数值适用于当前菜单尺寸，完成后还要观察它是否贴合左侧背景。
左右滑动表格，可查看完整内容
| 属性 | 设置 | 作用 |
|---|---|---|
| 锚点 | 左侧中部 | 让导航栏依附在菜单左侧 |
| Pos X | 105 | 设置相对左侧锚点的横向位置 |
| Pos Y | 8 | 设置相对锚点的纵向位置 |
| Width | 90 | 确定导航栏宽度 |
| Height | 320 | 提供三个按钮的纵向排列空间 |
外层垂直布局参数
内边距是容器边缘到按钮的距离，Spacing 是相邻按钮之间的距离。
左右滑动表格，可查看完整内容
| 区域 | 属性 | 设置 | 作用 |
|---|---|---|---|
| 内边距 | Left / Right | 0 / 0 | 左右不额外留白 |
| 内边距 | Top / Bottom | 20 / 20 | 上下各保留空间 |
| 排列 | Spacing | 30 | 保持相邻按钮间距一致 |
| 排列 | Child Alignment | Middle Center | 让整组按钮居中 |
| 尺寸 | Control Child Size | 宽、高均关闭 | 保留按钮自己的尺寸 |
| 缩放 | Use Child Scale | 宽、高均关闭 | 排列时不计算额外缩放 |
| 扩展 | Child Force Expand | 宽、高均开启 | 把可用空间分配给子对象 |
添加 NavigationBar 的垂直布局
- 01
选中 NavigationBar，并设置左侧中部锚点。
- 02
填写位置 105、8 和尺寸 90 × 320。
- 03
添加 Vertical Layout Group。
- 04
展开 Padding，设置上、下为 20，左、右为 0。
- 05
把 Spacing 设为 30，Child Alignment 设为 Middle Center。
- 06
关闭 Control Child Size 和 Use Child Scale 的宽、高选项。
- 07
开启 Child Force Expand 的宽、高选项。
观察重点：Spacing 为 30，子对象居中，Control Child Size 与 Use Child Scale 关闭，Child Force Expand 开启。完整图中的层级可能仍显示制作前名称，请以本课统一的 NavigationBar 为准。
点击图片可以查看完整截图说明外层布局会管理哪些对象
完成参数后，结合层级判断哪些对象会被自动排列。
- 确认 NavigationBar 的位置和尺寸已经填写。
- 确认布局参数与表格一致。
- 指出三个按钮为什么必须成为 NavigationBar 的直接子对象。
- 说明按钮内部的图标为什么不会被这一层单独排列。
先把一个按钮做完整，再复制一致样式
制作第一个“介绍”按钮模板
三个入口的结构相同。先完整制作 IntroductionButton，再复制得到另外两个按钮，可以避免尺寸、字体、颜色和层级出现差异。下载导航栏图标素材
压缩包包含介绍、导航、设置三个白色图标和一张圆角高亮背景图。解压后把整个 NavIcon 文件夹导入项目。
- HomeIcon.png：介绍入口
- ExploreIcon.png：导航入口
- SettingIcon.png：设置入口
- Indicator.png：高亮背景
四张图片的用途与导入设置
四张图片统一设置为界面精灵，并限制合适的最大尺寸。
左右滑动表格，可查看完整内容
| 图片 | 用途 | Texture Type | Max Size |
|---|---|---|---|
| HomeIcon.png | 介绍按钮图标 | Sprite (2D and UI) | 128 |
| ExploreIcon.png | 导航按钮图标 | Sprite (2D and UI) | 128 |
| SettingIcon.png | 设置按钮图标 | Sprite (2D and UI) | 128 |
| Indicator.png | 圆角高亮背景 | Sprite (2D and UI) | 128 |
把四张图片放入项目
- 01
下载并解压 navigation-icons.zip。
- 02
在 Project 面板中展开 Assets → _Textures。
- 03
把解压后的 NavIcon 文件夹拖入 _Textures。
- 04
同时选中四张图片，把 Texture Type 设为 Sprite (2D and UI)。
- 05
把 Max Size 设为 128，并单击 Apply。
- 06
确认四张图片都能显示缩略图。
Image 负责显示，Button 负责点击
旧版文字按钮的根对象通常同时带有 Image 和 Button。Image 负责显示默认底图，Button 负责接收点击并在以后调用动作。
本课使用独立高亮背景，所以关闭根对象的默认 Image，但必须保留 Button。关闭 Image 不等于关闭整个对象，也不等于删除点击能力。
创建 IntroductionButton、图标和文字
- 01
选中 NavigationBar，使用 UI → Legacy → Button 创建旧版文字按钮。
- 02
把按钮根对象命名为 IntroductionButton，尺寸设为约 75.8 × 55.2。
- 03
关闭按钮根对象上的默认 Image，保留 Button 并保持 Interactable 开启。
- 04
让 Transition 保持 Color Tint，并让 On Click() 动作清单保持为空。
- 05
把自带文字对象命名为 IntroductionLabel，文字改为“介绍”。
- 06
把文字尺寸设为 60 × 32、字号设为 26、颜色设为白色，并水平垂直居中。
- 07
在按钮下创建 UI → Image，命名为 IntroductionIcon。
- 08
给图标指定 HomeIcon，尺寸设为 40 × 40，颜色保持白色。
介绍按钮的基础结构与尺寸
先把这一组设置准确，后面两个按钮会直接复制它。
左右滑动表格，可查看完整内容
| 对象 | 内容或组件 | 尺寸 | 显示设置 |
|---|---|---|---|
| IntroductionButton | Button，默认 Image 关闭 | 约 75.8 × 55.2 | 保持可交互 |
| IntroductionIcon | HomeIcon | 40 × 40 | 白色 |
| IntroductionLabel | 介绍 | 60 × 32 | 26号、白色、居中 |
完成可以复制的介绍按钮
建立按钮根对象、图标和文字，并说清显示与点击分别由谁负责。
- 确认按钮根对象位于 NavigationBar 下。
- 确认默认 Image 已关闭，Button 仍然启用。
- 确认 HomeIcon 与“介绍”文字已经设置。
- 对照表格确认三个对象的尺寸。
- 指出 On Click() 为什么在本课保持为空。
外层排列按钮，内层排列图标和文字
让图标和文字在按钮内部自动排列
NavigationBar 的外层布局看不到按钮内部内容，因此 IntroductionButton 自己还需要一层垂直布局。这样复制按钮或调整尺寸时，图标和文字仍能保持稳定的上下结构。子对象顺序就是纵向排列顺序
按钮内部的垂直布局会按层级从上到下处理直接子对象。IntroductionIcon 排在 IntroductionLabel 前面，因此图标显示在上，文字显示在下。
如果对象由布局管理，手工输入的位置可能马上被重新计算。此时应该调整布局参数或对象尺寸，而不是反复拖动。
IntroductionButton 的内层布局参数
内层只负责图标与文字，高亮背景将在后面脱离这一层布局。
左右滑动表格，可查看完整内容
| 属性 | 设置 | 作用 |
|---|---|---|
| Padding | 全部为 0 | 按钮内部不增加额外边距 |
| Spacing | 0 | 图标与文字紧密衔接 |
| Child Alignment | Middle Center | 图标和文字整体居中 |
| Control Child Size | 宽、高均关闭 | 保留各自设定尺寸 |
| Use Child Scale | 宽、高均关闭 | 不让缩放干扰排列 |
| Child Force Expand | 宽、高均开启 | 使用可用空间完成分布 |
完成按钮内层布局
- 01
选中 IntroductionButton，添加 Vertical Layout Group。
- 02
把 Padding 与 Spacing 全部设为 0。
- 03
把 Child Alignment 设为 Middle Center。
- 04
关闭 Control Child Size 和 Use Child Scale 的宽、高选项。
- 05
开启 Child Force Expand 的宽、高选项。
- 06
在层级中把 IntroductionIcon 放在 IntroductionLabel 前面。
- 07
观察图标和文字是否自动形成上下结构。
世界空间文字清晰度设置
Canvas Scaler（画布缩放器）决定世界空间界面使用的动态像素密度。
左右滑动表格，可查看完整内容
| 属性 | 本课设置 | 你会观察到的变化 |
|---|---|---|
| Dynamic Pixels Per Unit | 5 | 正常观看距离下的文字和动态图形更清楚 |
每单位动态像素数不会放大菜单
Dynamic Pixels Per Unit 可以理解为每一单位世界尺寸使用多少动态像素。数值提高后，文字通常更清晰，但菜单在世界中的实际宽高不会直接放大五倍。
数值过高会增加渲染负担，本项目使用 5，在清晰度和性能之间保持平衡。
用布局而不是坐标完成上下排列
完成内层布局并从正常观看距离观察文字。
- 确认图标是按钮的第一个直接子对象。
- 确认文字是图标之后的直接子对象。
- 尝试拖动图标，观察布局是否重新计算位置。
- 把 Dynamic Pixels Per Unit 设为 5。
- 从菜单正常使用距离确认“介绍”清楚可读。
保护左右圆角，只伸展中间区域
制作可自然拉伸的高亮背景
高亮背景用于告诉你当前正在浏览哪个入口。它是按钮内部的视觉提示，不是新的按钮。本课先让“介绍”显示蓝色高亮，再通过分区拉伸保护背景两端的圆角。创建 IntroductionIndicator
- 01
在 IntroductionButton 下创建 UI → Image。
- 02
把对象命名为 IntroductionIndicator。
- 03
将 Indicator.png 指定给 Source Image。
- 04
把尺寸设为 78 × 40。
- 05
把颜色设为蓝色 #0048FF。
为什么普通拉伸会让圆角变扁
Indicator.png 的原始尺寸是 64 × 32。如果整张图片一起横向放大，左右圆角也会被拉宽，边缘会变得不自然。
Sliced（分区拉伸）会把图片分成固定边缘与可伸展中间区，让主要宽度变化发生在中间。
Indicator.png 的分区边界
在 Sprite Editor 中设置后单击 Apply，再把场景对象的 Image Type 改为 Sliced。
左右滑动表格，可查看完整内容
| 边界 | 数值 | 作用 |
|---|---|---|
| Left | 15 | 保护左侧圆角区域 |
| Right | 14 | 保护右侧圆角区域 |
| Top | 0 | 本课不划分固定上边缘 |
| Bottom | 0 | 本课不划分固定下边缘 |
横向尺寸怎样变化
左右区域保留主要形状，中间区域承担增加的宽度。
左右滑动表格，可查看完整内容
| 状态 | 左侧 | 中间 | 右侧 | 总宽度 |
|---|---|---|---|---|
| 原图 | 15 | 35 | 14 | 64 |
| 目标尺寸 | 15 | 49 | 14 | 78 |
观察重点：左右端部保留圆角轮廓，中间区域从 35 扩展到 49；目标对象为 78 × 40。
手机上可左右滑动；点击图片可以查看完整图设置边界并应用到高亮背景
- 01
在 Project 面板中选择 Indicator.png。
- 02
打开 Sprite Editor，输入左 15、右 14、上 0、下 0。
- 03
单击 Sprite Editor 中的 Apply。
- 04
重新选中 IntroductionIndicator。
- 05
把 Image Type 改为 Sliced。
- 06
在 78 × 40 尺寸下观察左右圆角是否自然。
比较普通拉伸和分区拉伸
通过同一张图片比较两种模式，找出边缘形状的差异。
- 先观察普通模式下横向拉宽后的圆角。
- 完成左右边界设置并切换到 Sliced。
- 比较左右端部是否恢复自然。
- 用自己的话说明为什么本图的上下边界可以为 0。
忽略布局解决占位，层级顺序解决遮挡
让背景脱离布局并保持在内容后方
IntroductionIndicator 也是按钮的直接子对象。如果不额外处理，内层垂直布局会把它当成第三项内容，把图标和文字挤开。背景需要与内容重叠，而不是参与上下排列。两个问题需要两种设置
Layout Element（布局元素）的 Ignore Layout（忽略布局）告诉父级布局不要为背景分配位置。它不会隐藏背景，也不会关闭 Image。
兄弟对象的层级顺序决定同一画布中的绘制先后：排在前面的对象先绘制，所以看起来更靠后；排在后面的对象后绘制，所以显示在前面。
让 IntroductionIndicator 脱离排列
- 01
选中 IntroductionIndicator，添加 Layout Element。
- 02
开启 Ignore Layout。
- 03
把锚点设为左上。
- 04
把 Pos X 设为 37.9，Pos Y 设为 -20.9。
- 05
保持尺寸为 78 × 40。
- 06
把 IntroductionIndicator 移到按钮子对象的第一项。
- 07
让 IntroductionIcon 排在第二，IntroductionLabel 排在第三。
高亮背景的独立位置
开启忽略布局后，这些数值才不会继续被按钮内层布局覆盖。
左右滑动表格，可查看完整内容
| 属性 | 本课设置 |
|---|---|
| 锚点 | 左上 |
| Pos X | 37.9 |
| Pos Y | -20.9 |
| Width | 78 |
| Height | 40 |
观察重点：NavigationBar 只排列三个按钮；每个按钮排列图标和文字；高亮背景开启忽略布局并先绘制。
手机上可左右滑动；点击图片可以查看完整图双层布局与高亮背景的职责
同一个按钮既是外层布局的被排列对象，也是内层布局的管理者。
左右滑动表格，可查看完整内容
| 层级 | 管理范围 | 参与自动排列 | 不参与自动排列 |
|---|---|---|---|
| NavigationBar 外层布局 | 三个按钮 | IntroductionButton、NavigationButton、SettingsButton | 无 |
| 单个按钮内层布局 | 按钮内部内容 | 图标、文字 | 开启 Ignore Layout 的高亮背景 |
分别观察占位问题和遮挡问题
通过短暂切换设置理解两种规则，观察完成后恢复本课配置。
- 暂时关闭 Ignore Layout，观察背景是否把图标和文字挤开。
- 重新开启 Ignore Layout，确认图标和文字恢复上下排列。
- 暂时把背景移到子对象最后，观察它是否盖住内容。
- 把背景恢复到第一项，确认白色图标和文字显示在上方。
- 退出运行状态并保存最终正确配置。
复制成熟模板，只替换必要内容
复制并完成三个导航按钮
IntroductionButton 已经包含完整布局、背景、图标和文字。现在复制两份并替换名称与内容，可以确保三个入口拥有相同尺寸、间距和显示顺序。复制两个按钮
- 01
选中 IntroductionButton。
- 02
连续两次按 Ctrl + D，得到两个副本。
- 03
把第二个按钮改为 NavigationButton。
- 04
把第三个按钮改为 SettingsButton。
- 05
展开三个按钮，继续修改每个子对象名称。
三个按钮的对象与内容对应关系
按钮根对象、高亮背景、图标和文字都要同步命名。
左右滑动表格，可查看完整内容
| 按钮根对象 | 高亮背景 | 图标对象与图片 | 文字对象与内容 |
|---|---|---|---|
| IntroductionButton | IntroductionIndicator | IntroductionIcon / HomeIcon | IntroductionLabel / 介绍 |
| NavigationButton | NavigationIndicator | NavigationIcon / ExploreIcon | NavigationLabel / 导航 |
| SettingsButton | SettingsIndicator | SettingsIcon / SettingIcon | SettingsLabel / 设置 |
三个按钮保持一致的视觉参数
只有名称、图标、文字和初始高亮状态不同。
左右滑动表格，可查看完整内容
| 内容 | 统一设置 |
|---|---|
| 图标 | 40 × 40、白色 |
| 文字 | 60 × 32、字号 26、白色、居中 |
| 高亮背景 | 78 × 40、蓝色 #0048FF、Sliced |
| 内部顺序 | 高亮背景、图标、文字 |
观察重点：三个入口的图标大小、文字对齐和纵向间距保持一致。图中三个蓝色背景同时显示仅用于比较，完成比较后只保留“介绍”高亮。
点击图片可以查看完整截图只让“介绍”显示高亮背景
- 01
先同时显示三个高亮背景，比较它们的尺寸和位置。
- 02
保持 IntroductionIndicator 启用。
- 03
关闭 NavigationIndicator。
- 04
关闭 SettingsIndicator。
- 05
不要关闭 NavigationButton 或 SettingsButton。
- 06
确认“导航”和“设置”的白色图标、文字仍然显示。
逐项核对三个入口的对应关系
不要只改按钮根对象，子对象名称和显示内容也要一一对应。
- 确认介绍入口使用 HomeIcon 和“介绍”。
- 确认导航入口使用 ExploreIcon 和“导航”。
- 确认设置入口使用 SettingIcon 和“设置”。
- 确认三个按钮的内部尺寸与排列相同。
- 确认初始状态只有介绍入口显示蓝色高亮。
把知识变成作品
本课练习
请按顺序完成以下任务，并保存自己的学习成果。- 01
不查看页面，画出 NavigationBar 与三个按钮的父子层级。
- 02
用自己的话解释外层布局和按钮内层布局分别管理哪些对象。
- 03
暂时关闭一个高亮背景的 Ignore Layout，观察现象后恢复正确设置。
- 04
比较普通拉伸与 Sliced，说明左右边界为什么需要保护。
- 05
从 IntroductionButton 重新复制一个按钮，并独立完成名称、图标和文字替换。
- 06
沿“打开菜单 → 观察高亮 → 拖动 → 点击 → 关闭”完成一次完整展示。
把本课进度保存下来
登录后可以保存浏览内容、有效学习时间、完成状态和答题参与记录。