CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
iOS 开发入门/课时/UIKit 与 Interface Builder
RawBlame
课时目录12 节

iOS 开发入门

  1. 01iOS 生态与 Xcode
  2. 02Swift 语言基础
  3. 03UIKit 与 Interface Builder
  4. 04SwiftUI 入门
  5. 05架构模式
  6. 06数据持久化
  7. 07网络与 API
  8. 08并发与响应式
  9. 09依赖管理与 CI
  10. 10测试与调试
  11. 11上架与 ASO
  12. 12综合练习

UIKit 与 Interface Builder

ViewController、Storyboard、Auto Layout。

40 分钟

UIKit 与 Interface Builder

UIKit 是 iOS 传统的命令式 UI 框架:ViewController 驱动界面,Storyboard / XIB 可视化布局,Auto Layout 适配多尺寸。对照 /roadmaps/ios「UIKit」节点;老项目与部分系统扩展仍以 UIKit 为主。

学习目标

  • 理解 MVC 在 UIKit 中的角色:ViewController 协调 View 与 Model
  • 用代码或 Storyboard 创建界面,掌握 Auto Layout 约束
  • 处理 TableView / CollectionView 列表展示
  • 了解 UIKit 与 SwiftUI 的互操作(UIHostingController)

核心概念

ViewController 生命周期

import UIKit

class LessonListViewController: UIViewController {
    private var lessons: [Lesson] = []
    private lazy var tableView: UITableView = {
        let tv = UITableView(frame: .zero, style: .plain)
        tv.translatesAutoresizingMaskIntoConstraints = false
        tv.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tv.dataSource = self
        tv.delegate = self
        return tv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "课时列表"
        view.backgroundColor = .systemBackground
        view.addSubview(tableView)
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
        loadLessons()
    }

    private func loadLessons() {
        lessons = [
            Lesson(id: 1, title: "Swift 基础", completed: false),
            Lesson(id: 2, title: "UIKit 布局", completed: true),
        ]
        tableView.reloadData()
    }
}

extension LessonListViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        lessons.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        var config = cell.defaultContentConfiguration()
        config.text = lessons[indexPath.row].title
        cell.contentConfiguration = config
        return cell
    }
}

viewDidLoad → viewWillAppear → viewDidAppear 是常见钩子;列表用 UITableView + DataSource / Delegate 模式。

Auto Layout

  • Storyboard:拖拽控件,添加 Constraint(Leading / Trailing / Top / Bottom)
  • 代码:NSLayoutConstraint 或 SnapKit 等 DSL
  • Safe Area:避开刘海、Home Indicator

导航与 Segue

// 代码 push
let detail = LessonDetailViewController(lesson: lesson)
navigationController?.pushViewController(detail, animated: true)

Storyboard 中 Ctrl+拖拽创建 Segue;代码项目更常用纯 Swift + Auto Layout。

与 Java/Spring 或 React 对照

UIKitJava SwingReact
UIViewControllerJFrame / Panel 控制器页面级组件
UITableViewJTable<ul> + map
Auto LayoutLayoutManagerCSS Flexbox / Grid
Delegate 模式Listener 接口props 回调
StoryboardGUI DesignerJSX 即视图

UIKit 是命令式:改数据后需手动 reloadData();React / SwiftUI 是声明式:状态变则 UI 自动更新。

练习

  • 用 UIKit 创建带 NavigationBar 的两页 App(列表 → 详情)
  • 为 TableView Cell 添加「已完成」勾选图标
  • 尝试用 UIHostingController 嵌入一个 SwiftUI 视图

小结

UIKit = ViewController + Auto Layout + Delegate。 下一课 SwiftUI 声明式 UI。见 ios-essentials。

加载本节练习…
← 上一课Swift 语言基础下一课 →SwiftUI 入门