Interface Builder：什么是、Xcode 中的可视化设计和故事板

什么是 Interface Builder？

Interface Builder — Xcode 的一个组件，用于可视化设计用户界面。IB 的历史始于 1988 年的 NeXT 公司，远在 iOS 出现之前。Stefan Pope 为 NeXTSTEP 开发了第一个版本——这个操作系统后来成为 macOS 和 iOS 的基础。1996 年，Apple 收购了 NeXT 并将 Interface Builder 集成到 Xcode 中。

在现代化的 Xcode 中，Interface Builder 支持三种文件格式：Storyboard、XIB（Xcode Interface Builder）和用于表格单元格和自定义视图的 XIB 文件。这些格式中的每一种都存储 UI 元素层次结构、属性、约束和代码连接的 XML 描述。

IB 在 UIKit 级别工作：按钮、标签、文本字段、表格、集合和约束都可以用鼠标拖到画布上。Xcode 在构建阶段将 .storyboard 和 .xib 文件编译为 nib 归档文件（编译后的 Interface Builder），从而减小包大小并加快加载速度。

据 Apple 称，超过 70% 的 UIKit iOS 项目在不同开发阶段使用 Interface Builder。尽管 SwiftUI 在增长，IB 仍然是支持 iOS 12 及更低版本的商业应用程序的标准，也是需要精细调整 Auto Layout 的复杂自定义界面的标准。

Interface Builder 如何进入 Xcode

在 Xcode 4 之前，Interface Builder 是一个独立的应用程序，与代码编辑器并行运行。在 Xcode 4（2011）中，Apple 将 IB 和代码编辑器合并为一个 IDE。这使得无需切换窗口即可在代码和布局之间切换，并且可以通过 Attributes Inspector 面板实时查看属性更改。

随着 2019 年 SwiftUI 的出现，Apple 将重点转移到声明式开发，但 Interface Builder 仍然内置在 Xcode 中以支持 UIKit 项目。数千个现有应用程序继续使用 IB，Apple 尚未宣布将其移除。

Storyboard 和 XIB：IB 文件格式

Interface Builder 支持两种主要格式：Storyboard（.storyboard）和 XIB（.xib）。它们之间的区别在于范围和使用场景。

Storyboard — 包含整个应用程序场景的文件：多个屏幕（UIViewController）、之间的转场（segues）、导航控制器、标签栏和所有 UI 元素。Storyboard 在启动时从 Info.plist 通过 UIMainStoryboardFile（k）键加载一次。它便于可视化屏幕流程，但在 git 中合并冲突时会产生问题，因为整个应用程序的 XML 描述存储在一个文件中。

XIB（Xcode Interface Builder 的缩写）— 用于单个组件的文件：单独的 UIView、UITableViewCell、UICollectionViewCell 或单个 ViewController。XIB 按需通过 UINib(nibName:bundle:)（k）或 Bundle.loadNibNamed（k）方法加载。XIB 文件更易于合并，更紧凑，加载更快，因为它们不包含整个应用程序的描述。

从 Xcode 11 版本开始，Apple 建议使用 XIB 用于单个组件，避免使用单一 Storyboard。屏幕之间的导航建议通过 UIStoryboardSegue（k）手动或协调器进行代码导航。

IB 文件中的 XML 结构

.storyboard 和 .xib 文件以 Interface Builder Cocoa Touch XIB（dt）格式存储 XML。简化结构的示例：

<!-- 包含 UIView 和 UILabel 的 XIB 文件 -->
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB"
          version="3.0">
  <objects>
    <view id="abc-123"
          userLabel="CustomHeaderView"
          contentMode="scaleToFill">
      <subviews>
        <label id="def-456"
               text="标题"
               textColor="darkTextColor"
               fontDescription="title1"/>
      </subviews>
    </view>
  </objects>
</document>

每个元素都有一个唯一的 id（an），IB 通过它将 XML 节点与运行时对象连接。编译时，Xcode 将 XML 转换为二进制 nib 格式（.nib），将文件大小减少约 40%。

Interface Builder 中的 Auto Layout 和 Size Classes

Auto Layout — 通过数学关系（约束）在屏幕上定位元素的系统。Interface Builder 提供可视化界面，用于创建、编辑和调试约束，无需编写代码。每个约束描述一个依赖关系：view.leading = superview.leading + 16（k）或 view.width = 2 * otherView.height（k）。

在 IB 中，约束通过 Pin（固定边距、宽度、高度）和 Align（居中、边缘、基线对齐）菜单创建。Size Inspector 面板显示所选元素的所有约束及其优先级（required/high/low），并允许编辑乘数和常量。

IB 还支持 UIStackView——一个自动管理子视图布局的容器。只需将元素放入画布上的堆栈视图中，IB 就会自动生成必要的约束。与手动放置约束相比，这大大加快了布局速度。

Size Classes：适应设备

Size Classes — 一种抽象，根据屏幕宽度和高度对设备进行分组：Compact 和 Regular。组合（竖屏 iPhone 的 wC hR，iPad 的 wR hR）允许为不同场景设置不同的约束和元素布局。在 Interface Builder 中，在 size classes 之间切换会更改画布上的活动约束集。

具有 size class 变体的约束示例：

import UIKit

class AdaptiveViewController: UIViewController {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var leadingConstraint: NSLayoutConstraint!

    private func updateConstraints() {
        let isRegular = traitCollection.horizontalSizeClass == .regular
        leadingConstraint.constant = isRegular ? 40 : 16
        titleLabel.font = isRegular
            ? UIFont.preferredFont(forTextStyle: .largeTitle)
            : UIFont.preferredFont(forTextStyle: .title1)
    }

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
            updateConstraints()
        }
    }
}

在上面的代码中，traitCollectionDidChange 响应 size class 的变化，更新约束和字体。Interface Builder 允许通过检查器为每个 size class 设置默认值，代码用于无法静态描述的动态场景。

IBOutlet、IBAction 和代码与 UI 的连接

Interface Builder 中的可视化界面与 Swift/Objective-C 代码之间的连接通过两种机制实现：IBOutlet（Interface Builder Outlet）和 IBAction（Interface Builder Action）。两者都是通过按住 Ctrl 键从 IB 画布拖拽到控制器文件来创建的。

IBOutlet — 声明对 UI 元素引用的注解。Xcode 在加载时自动将其连接到 nib 归档中的相应对象。如果连接断开（例如，元素被重命名），应用程序将崩溃并显示 NSUnknownKeyException（k）错误。IBOutlet 被标记为 weak（k），因为 nib 拥有该对象，控制器只是观察者。

IBAction — 在 UI 元素事件时调用的方法：按钮按下、文本更改、开关切换。IB 通过 addTarget:action:forControlEvents:（k）将 UIControlEvent（k）与方法连接。在代码中，IBAction 看起来像一个返回类型为 IBAction（dt）的普通方法。

import UIKit

final class LoginViewController: UIViewController {

    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var loginButton: UIButton!
    @IBOutlet weak var spinner: UIActivityIndicatorView!

    @IBAction private func loginButtonTapped(_ sender: UIButton) {
        guard let email = emailTextField.text, !email.isEmpty,
              let password = passwordTextField.text, !password.isEmpty
        else {
            showAlert(message: "请填写所有字段")
            return
        }
        loginButton.isEnabled = false
        spinner.startAnimating()
        performLogin(email: email, password: password)
    }

    private func performLogin(email: String, password: String) {
        /// 通过 URLSession 进行 API 调用
        let request = LoginRequest(email: email, password: password)
        APIClient.shared.login(request) { [weak self] result in
            DispatchQueue.main.async {
                guard let self else { return }
                self.spinner.stopAnimating()
                self.loginButton.isEnabled = true
                switch result {
                case .success:
                    self.navigateToMainScreen()
                case .failure(let error):
                    self.showAlert(message: error.localizedDescription)
                }
            }
        }
    }

    private func showAlert(message: String) {
        let alert = UIAlertController(
            title: "错误",
            message: message,
            preferredStyle: .alert
        )
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
    }
}

示例显示了一个标准连接：IBOutlet 用于文本字段、按钮和微调器，IBAction 用于处理按钮按下。所有这些连接都在 Interface Builder 中通过 Ctrl+拖拽建立。如果连接未配置，IBOutlet 在运行时将为 nil（v），访问时将导致崩溃——因此 IBOutlet 被声明为带有隐式解包的 weak var（k s）。

@IBDesignable 和 @IBInspectable：自定义组件

@IBDesignable — Swift 注解，允许在 Interface Builder 画布上实时显示自定义 UIView。开发人员无需启动应用程序即可看到代码更改的结果。@IBInspectable — 属性的注解，将它们添加到 IB 的 Attributes Inspector 面板，可以交互式地更改值。

这些注解在创建 UI 组件库时特别有用：自定义按钮、带掩码的输入字段、动画指示器。IBDesignable 使用 prepareForInterfaceBuilder()（fn）单独编译构建代码，不影响应用程序的主二进制文件。

import UIKit

@IBDesignable
final class GradientButton: UIButton {

    @IBInspectable var startColor: UIColor = .systemBlue {
        didSet { updateGradient() }
    }

    @IBInspectable var endColor: UIColor = .systemPurple {
        didSet { updateGradient() }
    }

    @IBInspectable var cornerRadius: CGFloat = 12 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = true
        }
    }

    private let gradientLayer = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }

    private func setupGradient() {
        layer.insertSublayer(gradientLayer, at: 0)
        updateGradient()
    }

    private func updateGradient() {
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setupGradient()
    }
}

在上面的代码中，GradientButton 是一个 IBDesignable 组件，具有 IBInspectable 属性 startColor（v）、endColor（v）和 cornerRadius（v）。在 IB 画布上拖放 UIView 并在 Identity Inspector 中将类更改为 GradientButton 后，画布上将实时显示一个带渐变的按钮。所有 IBInspectable 属性将出现在右侧的 Attributes Inspector 面板中。

重要提示：@IBDesignable 完全编译代码以在 IB 中显示，因此不应在其中执行网络请求或长时间操作。为了区分，使用 #if TARGET_INTERFACE_BUILDER（k）——条件编译，排除非用于 IB 的代码。

IB 文件在编译时的生命周期

Interface Builder 文件从创建 nib 到显示在屏幕上的转换过程包括多个阶段。理解这个循环有助于诊断 IB 的问题。

在构建阶段，Xcode 运行 ibtool（k、fn）工具——一个命令行实用程序，用于将 .storyboard 和 .xib 文件编译为二进制 nib 格式。ibtool 还执行验证：检查约束的正确性、所有类的存在性、IBOutlet/IBAction 连接的类型。验证错误显示在 Xcode 的 Issue Navigator 中。

最终的 .nib 归档放置在应用程序包中的 .nib（s）文件夹中。nib 文件的大小明显小于原始 XML：二进制格式使用优化表示，用标记替换字符串并压缩数值。典型压缩率为原始 XML 大小的 50–60%。

在运行时，nib 通过 UINib(nibName:bundle:)（k）或自动通过 UIStoryboard.instantiateViewController(withIdentifier:)（k）加载。加载过程包括：

• 反序列化 — 将二进制 nib 转换为 Objective-C/Swift 对象图
• 创建 — 从归档创建所有 UI 元素的实例
• 恢复 — IBOutlet 和 IBAction 连接的恢复（组的 outletCollection）
• 应用 — 从归档应用 Auto Layout 约束，考虑 size class
• 调用 — 为每个对象调用 awakeFromNib()（fn）——加载后配置的入口点

awakeFromNib()（fn）方法在所有 IBOutlet 设置之后但在第一个 layoutSubviews 之前调用。这对于初始配置很方便：设置圆角、添加阴影、文本本地化。所有 IBOutlet 在 awakeFromNib 中保证不为 nil。

Interface Builder 与 SwiftUI Preview

随着 2019 年 SwiftUI 的发布，iOS 开发人员获得了 Interface Builder 的替代方案——一个带有实时 Canvas Preview 的声明式框架。让我们分析两种方法的关键区别。

Interface Builder 生成编译为 nib 的 XML 描述。界面以可视化方式创建，代码仅负责逻辑。IB 对没有编程技能的设计师要求较低，但在代码审查中很复杂（XML 更改在 diff 中不可见）。

SwiftUI Preview — 完全基于代码的开发。界面用 Swift 描述，预览在每次保存时更新。没有 XML，没有 nib，没有 IBOutlet 连接中断的风险。SwiftUI Preview 比 IB 工作更快，因为它不需要编译单独的文件。

在实践中，IB 和 SwiftUI Preview 之间的选择取决于项目要求。Interface Builder 对于支持旧版 iOS 的 UIKit 应用程序以及设计师在没有 Swift 技能的情况下在 Xcode 中工作的商业项目不可或缺。SwiftUI 更适合针对 iOS 17+ 的新项目，在这些项目中开发速度和响应性很重要。

Apple 不打算从 Xcode 中移除 Interface Builder。此外，在 Xcode 16 中，公司改进了 IB 画布的性能，并通过 UIViewRepresentable Bridge 添加了对 SwiftUI 组件的支持。预计 IB 将至少支持到 2030 年。

使用 Interface Builder 的最佳实践

多年的 iOS 开发经验形成了一套建议，可减少在商业项目中使用 Interface Builder 时的问题数量。

使用 XIB 代替 Storyboard 用于可重用组件。每个自定义表格单元格、标头或页脚都应在单独的 XIB 中。这有助于合并、加快加载速度，并允许通过 Swift Package Manager 或 CocoaPods 在项目之间重用组件。

配置 Storyboard References 将大型 storyboard 拆分为模块。不要使用单个包含 100 个屏幕的 Main.storyboard，而是为每个模块（Auth、Profile、Feed）创建一个 storyboard，并通过 Storyboard Reference 连接它们。这将减少 ibtool 的编译时间并简化团队协作。

避免不加检查就连接到 File's Owner（k）的 IBOutlet 连接。每个连接应该是 weak（k）和可选的（隐式解包可选只在 playground 中好）。在视图中重命名 IBOutlet 时，Xcode 会自动更新连接，但在手动编辑 XML 时很容易出错。

• 编辑 IB 文件后始终检查 Show Connection Panel（k）——红色指示器表示连接断开
• 使用 User Defined Runtime Attributes（k）设置属性而无需代码：layer.cornerRadius、layer.borderWidth、tintColor
• 在 IB 中按用途对约束进行分组：尺寸约束、边距约束、比例约束
• 在 Size Inspector 中为每个约束分配 Identifier（k）——有助于在冲突时调试
• 不要在 awakeFromNib 中放置业务逻辑——仅 UI 配置。逻辑放在 viewDidLoad 或单独的服务中

import UIKit

final class ProfileHeaderView: UIView {

    @IBOutlet weak var avatarImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bioLabel: UILabel!
    @IBOutlet weak var editButton: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
        avatarImageView.layer.cornerRadius = avatarImageView.bounds.width / 2
        avatarImageView.layer.masksToBounds = true
        nameLabel.font = UIFont.preferredFont(forTextStyle: .headline)
        bioLabel.font = UIFont.preferredFont(forTextStyle: .subheadline)
    }

    func configure(with profile: UserProfile) {
        nameLabel.text = profile.fullName
        bioLabel.text = profile.bio
        /// 通过 SDWebImage 或 Kingfisher 加载头像
    }

    static func instantiateFromNib() -> ProfileHeaderView {
        let nib = UINib(nibName: String(describing: self), bundle: nil)
        return nib.instantiate(withOwner: nil).first as! ProfileHeaderView
    }
}

示例展示了 XIB 视图的最佳实践：静态方法 instantiateFromNib（fn）从与类同名的 XIB 加载视图。awakeFromNib（fn）方法配置 UI（圆角、字体），configure(with:)（fn）方法接收数据模型进行填充。职责分离简化了测试和重用。