iOS Storyboard 超详细教程：从入门到精通
目录
引言：什么是 Storyboard？
Storyboard 是苹果在 iOS 5 中引入的一种可视化界面设计工具，它将你应用中的所有屏幕（View Controller）及其之间的关系（Segues）都绘制在一张画布上。
（图片来源网络，侵删）
核心优势：
- 可视化开发：直观地看到应用的流程和布局，无需频繁编译运行即可理解界面结构。
- 快速原型：可以非常快速地搭建出应用的界面原型。
- 关系清晰：页面跳转一目了然，方便管理和修改应用流程。
核心概念：
- Scene (场景)：代表一个完整的屏幕，通常是一个
UIViewController或其子类（如UITableViewController），每个 Scene 都包含一个 View 和一个对应的 ViewController。 - View (视图)：用户能看到和交互的所有 UI 元素（按钮、标签、图片等）的容器。
- Segue (转场)：定义了两个 Scene 之间的跳转关系和动画效果，拖拽一个控件到另一个 Scene 上即可创建 Segue。
- ViewController (视图控制器)：负责管理一个 Scene 的生命周期、视图布局和业务逻辑。
@IBOutlet：一个属性，用于将 Storyboard 中的 UI 控件（如UILabel,UIButton）连接到代码中的变量。@IBAction：一个方法，用于将 Storyboard 中的控件事件（如按钮点击）连接到代码中的函数。
第一部分：基础入门
创建第一个 Storyboard 项目
- 打开 Xcode，选择 "Create a new Xcode project"。
- 选择 iOS 平台，然后选择 "App" 模板，点击 "Next"。
- 在 Product Name 中填写你的应用名称（"MyFirstStoryboard"）。
- 关键步骤：确保 Interface 选项选择 Storyboard，确保 Life Cycle 选择 UIKit App Delegate（这是传统 UIKit 的方式）。
- 点击 "Next"，选择一个位置保存项目，然后点击 "Create"。
认识 Storyboard 编辑器界面
打开 Main.storyboard 文件，你会看到以下主要区域：
- 画布：中央的白色区域，用于放置和连接你的 UI 场景。
- 文档大纲：左侧的层级列表，清晰地显示了 Storyboard 中所有对象的结构，包括 View Controller、View 以及所有子控件。
- 对象库：右侧的面板（如果没有，可以通过 Xcode 右上角的 或菜单
View > Utilities > Show Object Library打开），这里包含了所有可用的 UI 控件（View, Button, Label, Table View 等）和容器（View Controller, Table View Controller 等）。 - 检查器：右侧的面板（通过右上角的图标切换），用于精确设置选中对象的属性、尺寸、自动布局约束等。
拖拽控件与建立视图层级
- 从 对象库 中拖拽一个
Label控件到View Controller Scene的View上。 - 选中这个
Label，在 属性检查器 中，将Text属性改为 "Hello, Storyboard!"。 - 再拖拽一个
Text Field和一个Button到View上，并适当调整它们的位置和大小。
设置 Auto Layout (自动布局)
Auto Layout 是一种约束系统，确保你的 UI 能够在不同尺寸的设备（iPhone, iPad）和不同方向（竖屏, 横屏）下正确显示。
（图片来源网络，侵删）
添加约束的基本步骤：
- 选中一个或多个需要添加约束的控件（按住
Command键点击选中Label,Text Field,Button）。 - 点击画布右下角的 “添加新约束” 按钮（一个带虚线框的圆圈图标）。
- 在弹出的窗口中,设置你想要的约束。
- 间距：设置控件与父视图（Safe Area）或彼此之间的间距（如
Top Space to Safe Area,Leading Space to Safe Area）。 - 尺寸：设置控件的宽度和高度（可以设置为固定值，也可以设置为与另一个控件相同）。
- 对齐：设置控件的对齐方式（如
Horizontally in Container）。
- 间距：设置控件与父视图（Safe Area）或彼此之间的间距（如
- 点击 "Add" 按钮，Xcode 会在 Storyboard 上画出蓝色的线条来表示这些约束。
重要提示：当你添加约束时，如果画布底部出现多个红色或黄色的警告，说明约束不完整或有冲突，你需要仔细检查并解决这些警告，通常是为所有控件都添加上必要的间距和尺寸约束即可。
使用 Size Classes (尺寸类)
Size Classes 是 Storyboard 中处理不同屏幕尺寸的强大工具，它将屏幕抽象为 宽度 和 高度 两个维度，每个维度都有 Compact, Regular, Any 三种类型。
- iPhone 竖屏：宽度为
Compact，高度为Regular。 - iPhone 横屏：宽度为
Regular，高度为Compact。 - iPad：宽度和高度都为
Regular。
如何使用：
（图片来源网络，侵删）
- 在 Story 编辑器工具栏的底部，点击 "wAny hAny" 按钮，它会展开一个尺寸类选择器。
- 默认情况下,你设置的约束会应用到所有尺寸类，如果你想为特定尺寸（如 iPhone 横屏）设计不同的布局，可以：
- 先选中已有的约束,在 尺寸检查器 中，取消勾选 "Constrain to margins"（如果需要），然后点击 "Add New Variation"。
- 在弹出的菜单中选择你想要修改的尺寸类（
wRegular hCompact）。 - 你可以在这个特定的尺寸类下修改或添加新的约束,你可以让
Label在横屏时居中显示。
创建场景之间的 Segue (转场)
现在我们有两个 View Controller：默认的 ViewController 和一个我们即将创建的 SecondViewController。
-
创建第二个场景：
- 从 对象库 中拖拽一个
View Controller到 Storyboard 画布的空白处。 - 选中这个新的
View Controller，在 身份检查器 中，将它的Class设置为UIViewController（或者如果你创建了自定义的类，就选择对应的类）。 - 为了区分,可以拖一个
Label进去，写上 "Second View"。
- 从 对象库 中拖拽一个
-
创建 Segue：
- 按住
Control键，从第一个ViewController中的某个控件（"Login" 按钮）拖拽到第二个View Controller的图标（顶部那个灰色小方块）上。 - 松开
- 按住
