Highlight
Xcode 13 让 Interface Builder 直接配置 iOS 15 的按钮样式、Table View Cell content configuration、SF Symbols 分层渲染和辅助功能预览，开发者可以在画布里完成样式迭代并发现动态字体布局问题。
核心内容
很多 UIKit 项目里，Storyboard 和 XIB 仍然承担大量界面搭建工作。问题在于，现代 iOS 界面越来越依赖系统样式：按钮要支持 Dynamic Type、多行标题、状态变化和 Mac Catalyst；列表单元格要有清晰的标题、副标题和图标；符号要跟随 tint color 呈现层次；辅助功能设置还会改变文字尺寸、颜色和布局边界。
过去做这些事，经常要在 Interface Builder 和代码之间来回切换。设计一个预订按钮，先在画布里摆位置，再写代码处理背景色、圆角、图标间距。调整一个 Table View Cell，先改 prototype cell，再运行到模拟器里确认 Dynamic Type。发现文字被裁切后，又回到约束和 label 属性里修。
这场 session 用一个酒店 App 贯穿全程。Booking Scene 里有 Book Room、Check in、Check out、Get Help 和 Guests 选择按钮；Promotions Scene 里有一组可选优惠按钮；Amenities Table View 里有餐厅等设施列表；菜单详情页则用来测试大字号下的文本换行。Xcode 13 的重点，是把这些高频界面迭代直接放回 Interface Builder。
Apple 做了四类改进。画布底部工具栏更紧凑，outline view 支持拖拽重排 scene 和批量选择 constraint group。Button inspector 支持 Plain、Gray、Tinted、Filled 样式，并暴露 subtitle、image placement、corner style、button size 等属性。Table View Cell inspector 支持新的 content configuration styles。画布还能直接打开辅助功能覆盖项，预览 Dynamic Type、Increase Contrast 等设置下的界面表现。
详细内容
画布和文档大纲更适合整理大型 Storyboard
（00:51）
Xcode 13 重新设计了 Interface Builder 的 canvas bottom bar。设备选择、scene layout、orientation、appearance 和 accessibility options 都被收进更紧凑的控件里，给画布留下更多空间。Outline view 的变化更直接：可以拖拽移动一个或多个 scene，也可以选中 Constraints 这类 group 后统一修改或删除。
Booking Scene
Promotions Scene
Constraints
Top
Leading
Trailing
Bottom关键点：
Booking Scene可以拖到Promotions Scene附近，Storyboard 结构和 segue 关系更容易对应。- 选中
Constraintsgroup 等同于选中组内所有约束，适合批量改 constant 或一次性删除。 - 按住 Option 拖拽 scene 可以复制整个 scene，适合从相似页面开始迭代。
在 Interface Builder 中采用新按钮样式
（02:53）
Xcode 13 的 Button inspector 增加了 Style 属性。选择 Filled、Tinted 或 Gray 后，按钮会进入 iOS 15 的新按钮系统，自动获得 Dynamic Type、多行标题和辅助功能支持。视频里的 Book Room 使用 Filled，Check in 和 Check out 使用 Tinted，Get Help 使用 Gray。
| 时间 | 画布对象 | 操作 | 结果 |
|---|---|---|---|
| 03:39 | Book Room button | pinch-to-zoom 后在 Button inspector 打开 Style 菜单 | 准备修改底部主按钮 |
| 04:16 | Book Room button | 选择 Filled style | 按钮获得蓝色填充和圆角 |
| 05:54 | Check in / Check out buttons | 在 outline view 按 Command 多选，选择 Tinted style | 两个日期按钮获得透明 tint 背景 |
| 08:04 | Get Help button | 从 object library 拖出 Gray button，放到 navigation bar | 新增帮助入口 |
| 08:42 | Get Help button | 设置 Title、Subtitle、question mark symbol、Image Padding | 按钮带有标题、副标题和图标间距 |
| 09:13 | Get Help button | 先试 Capsule Corner Style，再改成 Large Corner Style | 在画布里直接比较圆角效果 |
关键点：
- Filled style 使用 app tint 作为填充色，适合 Book Room 这类主操作。
- Tinted style 使用透明 tint 背景，适合重要但不需要强强调的按钮。
- Button inspector 会在选择样式后显示 Subtitle、title alignment、color options、image positioning、Corner Style 等属性。
- Size inspector 提供 Small、Medium、Large button size，Corner Style 提供 Dynamic、Fixed、Small、Medium、Large、Capsule 等选择。
用 toggle 和 pop-up button 表达选择状态
（07:29）
Promotions Scene 里的 Get 按钮需要在点击后改变外观，表示某个优惠已被选中。Xcode 13 可以在 inspector 的 Menu 区域打开 Selection as Primary Option，把按钮变成 toggle button。Booking Scene 里的 Guests 选择则适合 pop-up button：点击后弹出 1 到 4 人的菜单，选中项成为按钮的新标签。
| 时间 | 画布对象 | 操作 | 结果 |
|---|---|---|---|
| 06:36 | Promotions Scene | 用 canvas Minimap 双击跳转 | 快速定位优惠列表场景 |
| 06:56 | 三个 Get buttons | 在 outline view 按 Command 多选 | 同时修改多个按钮 |
| 07:10 | 三个 Get buttons | 在 Style 菜单中选择 Tinted | 覆盖图片的按钮获得更高对比度 |
| 07:40 | 三个 Get buttons | 在 Menu 区域打开 Selection as Primary Option | Get 按钮变成 toggle buttons |
| 10:21 | Guests field | 从 object library 拖入 Pop Up Button | 建立 1 到 4 位住客的选择控件 |
| 10:38 | Pop Up Button | 选择 Tinted style | 外观匹配 Check in 和 Check out |
| 10:48 | menu items | 用 Option-drag 复制两个 menu items，再配置为 1 到 4 | 菜单拥有四个可选值 |
| 11:34 | Pop Up Button | 在 Control inspector 设置 Tool Tip | Mac Catalyst 版本获得鼠标悬停提示 |
关键点：
- Selection as Primary Option 是 inspector 里的设置，作用是让按钮点击后切换选中状态。
- Pop Up Button 的行为是点击显示菜单，选择单个 item 后把该 item 变成按钮标签。
- Transcript 明确提醒 menu items 必须连接到 actions，运行时才会显示。
- iOS pop-up buttons、buttons with styles 和 tooltips 都支持 Mac Catalyst 15。
用 content configuration 和分层符号刷新 Table View
（12:31）
Amenities Table View 的问题是标题和副标题层级不够清楚，图标也缺少色彩。Xcode 13 的 Table View Cell inspector 可以选择新的 content configuration styles，比如 Subtitle Cell、Value Cell、Grouped Header 和 Grouped Footer。随后，SF Symbols 的 Render Mode 可以切到 Hierarchical，用 tint color 给符号主层级加重点。
| 时间 | 画布对象 | 操作 | 结果 |
|---|---|---|---|
| 12:49 | Table View controller | two-finger double tap 聚焦 | 进入 Amenities Table View |
| 13:36 | 所有 cells | 在 document outline 全选 | 准备批量修改 cell 样式 |
| 13:40 | Attributes inspector | 打开 Styles 下拉菜单 | 查看新的 content configuration styles |
| 13:48 | 所有 cells | 选择 Subtitle Cell | 标题更大，副标题层级更清楚 |
| 13:51 | 所有 cells | 在 inspector 调整 Image Padding | 图片和文字之间留出呼吸感 |
| 15:17 | cell symbols | 打开 Render Mode 下拉菜单 | 准备修改符号渲染 |
| 15:21 | cell symbols | 选择 Hierarchical 和 Tint Color | 主层级更突出，符号匹配 App 配色 |
关键点：
- 新的 cell styles 包括 grouped header、value cell、grouped footer 和 Subtitle Cell。
- 这些 styles 可配合 images 使用，并获得 Dynamic Type 支持。
- Hierarchical render mode 会用主层颜色派生出不同透明度的层级。
- Palette render mode 也在 session 中被提到，它允许给不同符号层设置不同颜色。
在画布里预览辅助功能设置
（15:42）
菜单详情页的 Description Label 使用 subhead text style，支持 Dynamic Type。把 Dynamic Type slider 拉大后，视频中这个 label 超出了 view bounds。修复方式很具体：补一个 trailing constraint，并把 number of lines 改成 0，让文本可以按需要换行。
| 时间 | 画布对象 | 操作 | 结果 |
|---|---|---|---|
| 16:16 | Accessibility popover | 点击 canvas bottom bar 的 Accessibility button | 打开设计时辅助功能覆盖项 |
| 16:39 | Dynamic Type slider | 激活设置并拖动 slider | Description Label 超出 view bounds |
| 16:53 | Description Label | 打开 Constraint popover 并添加 trailing constraint | 右侧边界被约束住 |
| 17:00 | Description Label | 在 Attributes inspector 把 number of lines 设为 0 | 文本按需要换行 |
| 17:15 | Dynamic Type slider | 再次拖动 slider 验证 | Label 在各个字号下都能完整显示 |
关键点：
- number of lines 设为 0 对应 inspector 里的属性修改，允许 label 占用多行。
- trailing constraint 解决大字号下文字向右溢出的问题。
- Accessibility popover 能在设计时打开 Dynamic Type、Increase Contrast 等覆盖项，减少运行模拟器后才发现布局问题的次数。
- 这个流程适合 Storyboard 项目做快速辅助功能巡检。
核心启发
1. 给旧 Storyboard 做一次按钮样式迁移
做什么：把主要操作按钮改成 Filled，把次要操作改成 Tinted，把工具型按钮改成 Gray 或 Plain。
为什么值得做：这场 session 展示了按钮样式直接支持 Dynamic Type、多行标题、corner style 和 Mac Catalyst 映射，迁移成本集中在 inspector。
怎么开始：先选一个结账、预订或提交页面，列出 primary、secondary、utility 三类按钮，再分别套用 Filled、Tinted、Gray 或 Plain，并检查大字号。
2. 把筛选项改成 pop-up button
做什么：把人数、排序方式、日期范围这类单选设置做成 pop-up button。
为什么值得做：视频中的 Guests 按钮说明了 pop-up button 可以把菜单和当前选择合在一个控件里，特别适合表单里的紧凑选择。
怎么开始：在 object library 拖入 Pop Up Button，用 Option-drag 复制 menu items，把候选值配置完整，并确认每个 menu item 已连接 action。
3. 用 content configuration 翻新设置页或详情页列表
做什么：把静态 Table View 里的设施、设置、账户信息改成系统 content configuration styles。
为什么值得做：Amenities Table View 的例子显示，标题、副标题、图片间距和 Dynamic Type 可以交给系统样式维护。
怎么开始：从 Subtitle Cell 开始，批量选择静态 cell，调整 Styles、Image Padding 和 symbol Render Mode，再用画布检查标题、副标题和图标层级。
4. 建一个辅助功能画布检查清单
做什么：每次改 Storyboard 后，在 Interface Builder 里检查 Dynamic Type、Increase Contrast 和不同 appearance。
为什么值得做：视频中 Description Label 的溢出问题是在画布里直接暴露出来的，修复只需要补 trailing constraint 和多行设置。
怎么开始：选出 App 里 5 个文本密集页面，把 Dynamic Type slider 拉到较大字号，逐个记录 clipping、overlap 和 contrast 问题。
关联 Session
- Meet the UIKit button system — 深入讲 iOS 15 的按钮样式、toggle button、pop-up button 和菜单状态。
- What’s new in UIKit — 汇总 UIKit 在 iOS 15 的按钮、符号、cell configuration 和 Mac Catalyst 更新。
- What’s new in SF Symbols — 解释 hierarchical、palette、multicolor 等符号渲染模式的设计和用法。
- SF Symbols in UIKit and AppKit — 演示彩色 SF Symbols 在 UIKit 和 AppKit 控件里的集成方式。
- Make blazing fast lists and collection views — 从列表性能和 cell 生命周期角度延伸 Table View/Collection View 的内容配置。
评论
GitHub Issues · utterances