Storyboard 全面教程：从入门到精通

第一部分：Storyboard 是什么？为什么使用它？

什么是 Storyboard？

Storyboard 是苹果公司为 iOS、macOS、watchOS 和 tvOS 开发提供的一个可视化界面设计工具，它是一个 XML 文件（扩展名为 .storyboard），以图形化的方式展示了应用的多个屏幕（称为 Scenes 或 View Controllers）以及它们之间的导航流程。

你可以把它想象成一个“电影分镜头脚本”或“漫画故事板”，每一格代表一个场景，箭头代表场景之间的转换。

为什么使用 Storyboard？

• 可视化开发：直观地看到 UI 布局和导航流程，无需编写大量代码来设置视图控制器和segues（转场）。
• 快速原型设计：可以快速搭建和迭代应用的界面结构，大大提高开发效率。
• 团队协作：设计师和非开发者也能理解其结构，便于沟通。
• 自动布局：与 Auto Layout 无缝集成，可以轻松创建适应不同屏幕尺寸的响应式界面。

Storyboard 的优缺点

• 优点：如上所述，直观、高效、易于管理。
• 缺点：
  • 版本控制冲突：对于大型项目，多人同时修改 Storyboard 文件容易产生合并冲突，解决起来比较麻烦。
  • 性能问题：单个 Storyboard 文件过大时，加载和编译速度可能会变慢。
  • 耦合度高：视图控制器和导航逻辑紧密绑定在 Storyboard 文件中，单元测试相对困难。

第二部分：Storyboard 的核心组件

在开始之前,你需要熟悉 Xcode 中 Storyboard 编辑器的几个关键区域：

1. Scene (场景)：代表一个屏幕，通常由一个 View Controller 组成，它包含了该屏幕的所有 UI 元素（按钮、标签、图片等）。
2. View Controller (视图控制器)：是场景的大脑，负责管理场景中的视图和用户交互，每个场景都有一个对应的视图控制器类（通常是 UIViewController 或其子类）。
3. View (视图)：是场景中实际显示内容的容器，你可以在上面拖拽 UI 控件。
4. Object Library (对象库)：Xcode 右下角的库，包含了所有可用的 UI 控件（如 Button, Label, TextField）和其他对象（如 Gesture Recognizer）。
5. Attributes Inspector (属性检查器)：当选中一个 UI 元素时，右侧的检查器会显示其所有属性（如文本、颜色、字体等），供你进行自定义。
6. Auto Layout (自动布局)：位于 Story 编辑器底部的图标（T恤和箭头），用于设置视图之间的约束关系，确保界面在不同设备上都能正确显示。
7. Show the Assistant Editor：Xcode 右上角的两个相互重叠的圆形图标，点击后，左侧是 Storyboard，右侧是对应的代码文件（.h 或 .swift），这是连接 UI 和代码的关键。
8. Show the Standard Editor：恢复到单一的代码或 Storyboard 编辑视图。

第三部分：你的第一个 Storyboard 项目 - 分步教程

让我们创建一个简单的应用,它有一个登录界面，点击登录按钮后，跳转到欢迎界面。

步骤 1：创建新项目

1. 打开 Xcode，选择 "Create a new Xcode project"。
2. 选择 "iOS" -> "App" 并点击 "Next"。
3. 填写产品名称（如 "MyFirstStoryboard"），选择 "Storyboard" 作为 Interface，"Swift" 作为 Language，点击 "Next" 并选择一个位置保存项目。

步骤 2：设计登录界面

1. 打开 Main.storyboard 文件。
2. 从 Object Library 中拖拽以下元素到 View Controller Scene 的视图中：
   • 一个 Label，文本改为 "用户名"。
   • 一个 Text Field，放在 "用户名" 标签下方。
   • 一个 Label，文本改为 "密码"。
   • 一个 Secure Text Field (密码输入框)，放在 "密码" 标签下方。
   • 一个 Button改为 "登录"。
3. 使用 Auto Layout 添加约束：
   • 选中所有元素,点击 Storyboard 底部的 Auto Layout 图标（T恤）。
   • 选择 "Add New Constraints..."。
   • 勾选 "Horizontally in Container" 和 "Vertically in Container"，并设置间距（如 16），点击 "Add"。
   • 分别为每个元素添加与父视图的间距约束,确保它们不会跑到屏幕外。
4. 给 UI 元素命名（设置 Tag）：
   • 选中 "用户名" 的 Text Field，在右侧 Attributes Inspector 中找到 "Tag" 属性，设置为 101。
   • 选中 "密码" 的 Secure Text Field，设置 "Tag" 为 102。
   • 这样做是为了方便在代码中通过 view.viewWithTag(101) 来引用它们（虽然现在更推荐使用 @IBOutlet）。

步骤 3：连接 UI 和代码

这是最关键的一步。

1. 点击 Xcode 右上角的 Show the Assistant Editor 图标，确保右侧显示的是 ViewController.swift 文件。
2. 按住 Control 键，从 "用户名" Text Field 拖拽到 ViewController.swift 文件中 class ViewController: UIViewController { 的下方。
3. 弹出一个小窗口,将 Connection 设置为 Outlet，Name 命名为 usernameTextField，点击 "Connect"。
4. 重复此操作,将 "密码" Secure Text Field 连接到一个名为 passwordTextField 的 Outlet。
5. 按住 Control 键，从 "登录" Button 拖拽到 ViewController.swift 文件中。
6. 在弹出的窗口中,将 Connection 设置为 Action，Name 命名为 loginTapped:，点击 "Connect"。

现在你的 ViewController.swift 文件看起来应该像这样：

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var usernameTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    @IBAction func loginTapped(_ sender: UIButton) {
        // 这里将添加登录逻辑
        print("登录按钮被点击了")
    }
}

步骤 4：创建第二个场景（欢迎界面）

1. 回到 Storyboard，点击顶部工具栏的 号，添加一个新的 View Controller。
2. 在新的场景中,拖入一个 Label，文本改为 "欢迎，[用户名]!"。

步骤 5：创建导航（Segue）

1. 按住 Control 键，从 "登录" Button 拖拽到 新的欢迎场景 的 View Controller 图标上（不是视图本身）。
2. 在弹出的菜单中,选择 "Show" (这是最常见的模态跳转)。
3. 你会看到一个从登录按钮指向欢迎场景的箭头,这个箭头就是一个 Segue，选中这个箭头，在右侧 Attributes Inspector 中，可以给这个 Segue 命一个唯一的 Identifier，goToWelcome。

步骤 6：在代码中处理 Segue

我们需要在登录逻辑中验证输入,并传递数据到欢迎界面。

1. 修改 loginTapped: 方法：

@IBAction func loginTapped(_ sender: UIButton) {
    // 1. 获取输入的文本
    guard let username = usernameTextField.text, !username.isEmpty,
          let password = passwordTextField.text, !password.isEmpty else {
        // 简单的验证
        showAlert(title: "错误", message: "用户名和密码不能为空")
        return
    }
    // 2. 验证逻辑 (这里简单写死)
    if username == "admin" && password == "123456" {
        // 3. 执行 Segue 跳转
        performSegue(withIdentifier: "goToWelcome", sender: self)
    } else {
        showAlert(title: "登录失败", message: "用户名或密码错误")
    }
}
// 辅助函数：显示提示框
func showAlert(title: String, message: String) {
    let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "确定", style: .default))
    present(alert, animated: true)
}

步骤 7：在 Segue 跳转前传递数据

当 performSegue 被调用时，系统会自动调用 prepare(for:sender:) 方法，这是传递数据的最佳时机。

1. 在 ViewController.swift 中添加 prepare 方法：

// 这个方法在执行 Segue 之前被调用
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // 1. 检查 Segue 的 Identifier 是否是我们定义的那个
    if segue.identifier == "goToWelcome" {
        // 2. 获取目标视图控制器
        if let welcomeViewController = segue.destination as? WelcomeViewController {
            // 3. 传递数据
            welcomeViewController.welcomeMessage = "欢迎, \(usernameTextField.text)!"
        }
    }
}

步骤 8：创建并配置目标视图控制器

1. 在 Xcode 中，右键点击项目导航器 -> "New File..." -> "Cocoa Touch Class"。
2. Class Name 命名为 WelcomeViewController，Subclass of 选择 UIViewController。
3. 打开 WelcomeViewController.swift，添加一个属性来接收欢迎消息：

import UIKit
class WelcomeViewController: UIViewController {
    var welcomeMessage: String?
    @IBOutlet weak var welcomeLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // 接收并显示从第一个界面传来的消息
        welcomeLabel.text = welcomeMessage
    }
}

4. 回到 Main.storyboard，选中 欢迎场景 的 View Controller 图标。
5. 在右侧 Identity Inspector (第三个图标，像一个身份证) 中，将 Class 设置为 WelcomeViewController。
6. 使用 Assistant Editor，将欢迎场景中的 Label 连接到 WelcomeViewController.swift 中的 welcomeLabel Outlet。

步骤 9：运行

你可以运行应用了,输入 admin 和 123456，点击登录，你应该会成功跳转到欢迎界面，并看到欢迎信息。

第四部分：高级主题与最佳实践

常用的 Segue 类型

• Show (或 Push)：在 UINavigationController 的导航栈中推入一个新的视图控制器，通常用于主界面的层级导航。
• Show Detail：在 UISplitViewController 中使用，在主屏幕显示列表，在分屏显示详情。
• Present Modally：以模态方式呈现一个视图控制器，它会覆盖在当前界面上，常用于弹出登录框、设置页面等，可以通过 modalPresentationStyle 设置其出现和消失的动画效果（如 .fullScreen, .pageSheet）。
• Popover：在 iPad 上，以气泡形式呈现一个视图控制器。
• Custom：完全自定义的转场动画，需要编写代码。

使用 Storyboard ID

对于以编程方式创建和呈现视图控制器（来自通知或后台任务），Storyboard ID 非常有用。

1. 在 Storyboard 中选中一个 View Controller。
2. 在 Identity Inspector 中，设置其 Storyboard ID（welcomeVC）。
3. 在代码中,你可以这样创建它：

let storyboard = UIStoryboard(name: "Main", bundle: nil)
let welcomeVC = storyboard.instantiateViewController(withIdentifier: "welcomeVC") as! WelcomeViewController
present(welcomeVC, animated: true)

拆分 Storyboard

为了避免单个 Storyboard 文件过大，可以将不同的功能模块拆分到不同的 Storyboard 文件中。

1. 在 Xcode 中，右键点击项目 -> "New File..." -> "Storyboard"。
2. 将需要的场景从 Main.storyboard 拖拽到新的 Storyboard 文件中。
3. 使用 instantiateViewController(withIdentifier:) 方法可以从任意 Storyboard 文件中加载视图控制器。

避免耦合的最佳实践

• MVVM (Model-View-ViewModel)：将业务逻辑从 View Controller 中剥离，放到 ViewModel 中，View Controller 只负责绑定数据和 UI 事件。
• 协议 和代理：让源视图控制器和目标视图控制器通过协议进行通信，而不是直接引用，降低耦合度。
• 使用代码进行 UI 布局：对于复杂或动态的界面，一些开发者倾向于使用纯代码（SwiftUI 或 UIKit 代码）来构建，这样可以获得更精细的控制和更易于测试的代码。

第五部分：常见问题与调试

• Q: 我的 UI 在不同设备上显示错乱了怎么办？

  • A: 检查 Auto Layout 约束，确保每个视图都有足够的约束来固定其位置和大小，使用 Xcode 的预览功能（Xcode 左上角的 iPhone/iPad 图标）可以实时查看在不同设备上的效果。

• Q: 为什么我的 @IBOutlet 或 @IBAction 连接不上？

  • A:
    1. 确保你在 Assistant Editor 中，并且代码文件和 Storyboard 是正确关联的。
    2. 检查视图控制器的 Class 名称是否在 Storyboard 的 Identity Inspector 中设置正确。
    3. 确保拖拽的起点和终点是正确的（从控件本身拖到代码区域，而不是从 View Controller 图标）。

• Q: 如何调试 Segue？

  • A: 在 prepare(for:sender:) 方法中设置断点，这样可以在数据传递前检查变量的值，你也可以在 performSegue 之前打印日志，确保 Segue 的 Identifier 是正确的。