纯代码构建iOS界面：告别Storyboard，实现模态跳转

搞iOS开发这几年，我越来越倾向用Swift代码直接写视图控制器。最近手里的一个改版项目，全部页面都改成代码方式创建：在控制器里用代码添加按钮、文字，再用模态方式弹出新的视图控制器，完全不碰Storyboard。这个方案跑下来，稳定性、可维护性都比我预想的好很多。这篇内容我打算把整套思路从头到尾捋一遍，适合刚接触Swift、想摆脱图形界面布局、或者被工程内大量可视化配置文件折腾得头疼的人参考，看完了可以直接上手照做。

1. 为什么我宁愿用代码写界面，也不想再拖控件

很多iOS新手入门时，第一反应都是打开工程里的Storyboard，拖几个控件、连几条线、设一下约束，跑起来感觉挺顺。但等页面多了、工程大了，这种直观的爽感会被一系列问题慢慢磨掉。

1.1 Storyboard先不提好不好用，协作成本真的高

多人协作是最直接的痛点。一个页面在Storyboard里就是一个XML文件，两个人同时在同一个页面做改动，合并时的冲突基本没法自动处理。我见过最糟糕的一次，同事只是微调了一个按钮的位置，结果整个视图文件冲突，半个小时的排查时间都花在来回沟通上。代码写界面不一样，每个人改的是自己关心的那几行方法，冲突范围小得多，而且一眼就能看出来改了哪里。

其次，Storyboard把很多界面状态藏在配置文件里。一个按钮的背景色、圆角、内边距，可能分散在Inspector面板的各个角落，代码里根本搜不到。等你想改的时候，要么凭记忆，要么去面板里一点点翻，效率特别低。代码方式把界面描述全部集中到控制器的可读代码里，它长什么样、有什么属性、绑定什么事件，全部一目了然。

1.2 代码方式真正适合什么场景

我也不是说Storyboard一无是处。原型Demo、简单静态页面，拖拽确实快。但下面几类场景，代码方式明显更合适：

• 页面需要高度复用，一个控件样式要在一个基类里统一定义
• 界面样式要跟随数据动态变化，比如根据接口返回动态生成按钮
• 团队规模大、分支多，合并冲突频繁
• 需要写单元测试或UI测试，代码可控性更好

技术选型上，纯代码方式还有一个隐性的好处：它逼着你更清楚地了解UIKit控件的初始化、属性和约束机制，而不是停留在"拖上去就行"的层面。长期来看，对基本功提升帮助很大。

2. 空白的起点：纯代码工程需要先改的三件事

从Xcode创建一个新工程开始，默认模板都会带一个Main.storyboard。想走纯代码路线，第一件事就是把这个入口彻底摘掉，然后把启动流程改成由AppDelegate或SceneDelegate手动创建窗口和根视图控制器。

2.1 清理Storyboard引用，防止启动黑屏

新建工程之后，先到工程文件列表里找到Main.storyboard文件，右键删除，选择"Move to Trash"。如果只是删文件，工程里还会残留配置，启动时仍然会去找这个文件，结果黑屏或崩溃。

删完之后，打开Info.plist，找到这两类配置，全部清掉：

• Main story board file base name，值一般是Main
• UIApplicationSceneManifest里的StoryboardName，同样指向Main

有开发者在AppDelegate里写了窗口代码，结果发现根本不生效，大概率就是这些残留配置没清干净。系统启动时还是会走Storyboard初始化，直接把你的代码绕过了。

Info.plist没有屏幕描述界面的话，可以直接右键用Source Code打开，把<key>UIMainStoryboardFile</key>相关的整段XML注释掉或删除。

2.2 手动配置Window和根控制器

清完配置，接下来就是标准的启动代码。iOS 13之前的工程里，要在AppDelegate里这样写：

import UIKit @main class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { let window = UIWindow(frame: UIScreen.main.bounds) window.rootViewController = ViewController() window.makeKeyAndVisible() self.window = window return true } }

window.makeKeyAndVisible()这句不能省。少了它，窗口不会显示出来，运行后屏幕上就是一片空白或者直接看不到任何东西。这套写法使用@main注解来标记入口，也是现在Swift工程的标配。

2.3 iOS 13之后的SceneDelegate别忘了

如果你的开发环境是iOS 13以上，Xcode会自动生成SceneDelegate。这个场景下光写AppDelegate是不够的，系统把窗口管理和生命周期部分移交给了SceneDelegate。

正确的做法是，在scene(_:willConnectTo:options:)里创建窗口：

import UIKit class SceneDelegate: UIResponder, UIWindowSceneDelegate { var window: UIWindow? func scene( _ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions ) { guard let windowScene = scene as? UIWindowScene else { return } let window = UIWindow(windowScene: windowScene) window.rootViewController = ViewController() window.makeKeyAndVisible() self.window = window } }

如果你同时保留了AppDelegate里的窗口代码，又配置了SceneDelegate，两套逻辑会互相干扰，最后呈现的结果不确定。我的建议是：新工程统一走SceneDelegate方案，老工程升级过来时，把AppDelegate里创建窗口的那段删掉，换成SceneDelegate接管。

这里有个容易踩的坑：很多网上的教程只讲了AppDelegate，如果你把代码复制进去后发现窗口死活不出现，多半就是没用对SceneDelegate。判断方法很简单，看工程内有没有SceneDelegate.swift文件、Info.plist里有没有UIApplicationSceneManifest键，有的话就走Scene方案。

3. 第一个手写界面：UILabel与UIButton的创建、布局与事件绑定

启动入口配好后，真正的界面编写就开始了。视图控制器的核心方法之一是viewDidLoad，页面加载完成后，我们可以在这里用代码创建所有需要的UI控件。

3.1 from Code的UILabel：文字控件的基础写法

先写一个最基础的文字标签。新建一个继承UIViewController的类，在viewDidLoad里创建UILabel。

import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .systemBackground setupLabel() setupButton() } private func setupLabel() { let label = UILabel() label.text = "欢迎使用纯代码界面" label.font = UIFont.systemFont(ofSize: 20, weight: .medium) label.textColor = .label label.numberOfLines = 0 label.lineBreakMode = .byWordWrapping label.textAlignment = .center label.translatesAutoresizingMaskIntoConstraints = false view.addSubview(label) NSLayoutConstraint.activate([ label.topAnchor.constraint( equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 120 ), label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20), label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20) ]) } }

几个容易忽略的细节：

• numberOfLines = 0表示不限制行数，文字过长时自动换行。不设置的话，默认只有一行，长文本会被截断。
• translatesAutoresizingMaskIntoConstraints = false是Auto Layout生效的前提。很多新人第一次写约束没反应，往往就是漏了这句。它告诉系统：不要自动生成基于frame的约束，我们手动管理。
• 用safeAreaLayoutGuide锚定布局，而不是直接绑view.topAnchor。否则文字会顶到状态栏下面，很难看。

3.2 创建UIButton：代码添加按钮和点击事件

按钮是交互入口，代码创建逻辑比标签多一个事件绑定步骤。

private lazy var button: UIButton = { let button = UIButton(type: .system) button.setTitle("点击弹窗", for: .normal) button.setTitleColor(.systemBlue, for: .normal) button.titleLabel?.font = UIFont.systemFont(ofSize: 18, weight: .semibold) button.backgroundColor = .systemGray6 button.layer.cornerRadius = 8 button.translatesAutoresizingMaskIntoConstraints = false button.addTarget(self, action: #selector(didTapButton), for: .touchUpInside) return button }() private func setupButton() { view.addSubview(button) NSLayoutConstraint.activate([ button.centerXAnchor.constraint(equalTo: view.centerXAnchor), button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 220), button.widthAnchor.constraint(equalToConstant: 180), button.heightAnchor.constraint(equalToConstant: 44) ]) }

按钮的点击事件是典型的target-action模式。addTarget里传入self作为target，selector指向#selector标记的方法。需要保证这个方法是当前类里的@objc方法，否则运行时会崩溃。

@objc private func didTapButton() { print("按钮被点击了") }

方法名写错、或者没加@objc，是按钮点了没反应的高频原因。排错时先检查控制台有没有打印信息，再检查方法实现是否完整。

3.3 约束布局 vs Frame布局：我为什么推荐约束

早期iOS开发里，大家习惯直接给控件设置frame，比如：

button.frame = CGRect(x: 100, y: 200, width: 180, height: 44)

这种写法在固定屏幕尺寸下看着没问题，但iPhone屏幕一多就露馅了。不同机型、不同动态字体大小下，固定坐标会让控件叠在一起或者偏移出屏幕。

Auto Layout通过锚点关系描述控件之间的相对位置，适配能力强得多。虽然在代码里写约束初期比拖控件多一点代码量，但换来的是可靠的适配结果。实际项目中我基本只用约束，不再手动设置frame。

上面示例里，按钮的中心X和父视图中心X对齐，顶部相对文字标签底部偏移了一段距离，这就是相对布局的典型用法。约束关系一旦写错，控制台会输出"Unable to simultaneously satisfy constraints"，指认你不满足约束条件的控件，之后的排查就围绕这些提示展开。

4. 把第二个视图控制器模态弹出来：present的常规用法与细节

页面做完了，接下来就是标题里的核心动作——用模态方式弹出视图控制器。模态弹出在中文社区里也叫"以模态形式呈现"，Swift里对应的方法就是present(_:animated:completion:)。

4.1 新建第二个控制器：需要弹出去的那个页面

先创建一个新的控制器类，就叫DetailViewController。这个页面本身也很简单，有一个标题文字和一个关闭按钮。

import UIKit class DetailViewController: UIViewController { var receivedText: String = "" private lazy var contentLabel: UILabel = { let label = UILabel() label.numberOfLines = 0 label.textAlignment = .center label.translatesAutoresizingMaskIntoConstraints = false return label }() private lazy var closeButton: UIButton = { let button = UIButton(type: .system) button.setTitle("关闭", for: .normal) button.titleLabel?.font = UIFont.systemFont(ofSize: 18) button.translatesAutoresizingMaskIntoConstraints = false button.addTarget(self, action: #selector(didTapClose), for: .touchUpInside) return button }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .secondarySystemBackground contentLabel.text = receivedText setupLayout() } private func setupLayout() { view.addSubview(contentLabel) view.addSubview(closeButton) NSLayoutConstraint.activate([ contentLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor), contentLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -60), contentLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30), contentLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30), closeButton.centerXAnchor.constraint(equalTo: view.centerXAnchor), closeButton.topAnchor.constraint(equalTo: contentLabel.bottomAnchor, constant: 30), closeButton.widthAnchor.constraint(equalToConstant: 120), closeButton.heightAnchor.constraint(equalToConstant: 44) ]) } @objc private func didTapClose() { dismiss(animated: true) } }

receivedText是外部传入的数据。在入口页面点击按钮后，我们先创建这个控制器，再把想传递的文字赋给它，最后present出去。

4.2 入口页面里完成弹出：present与dismiss成对使用

回到ViewController，把按钮点击方法改成：

@objc private func didTapButton() { let detailVC = DetailViewController() detailVC.modalPresentationStyle = .fullScreen detailVC.receivedText = "这段话来自入口页面" present(detailVC, animated: true) }

modalPresentationStyle是模态弹出的核心参数。默认值是.automatic，在iPhone上通常表现为卡片式（对应的枚举是.pageSheet），用户可以在卡片顶部下滑关闭。而.fullScreen表示全屏覆盖，用户不能直接下滑关闭，必须通过代码调用dismiss返回。

具体用哪种，要看交互语境：

• 全屏适合"进入一个新的任务流"、需要暂时禁止返回的场景
• 卡片/表单适合"临时补充信息"、轻量操作的场景

present方法里还有completion参数，弹出动画完成后执行。比如可以在里面打印日志或做统计，不过日常页面跳转用不太上。

关闭时，被present出来的控制器内部调dismiss(animated: true)就行，不需要自己再持有入口控制器的引用。UIKit会自动找到它所属的presentingViewController，完成反向返回。但要注意，如果当前页面上连续present了多个控制器，dismiss只会关闭最近的那一个，需要关闭到指定层级时，要用到presentingViewController?.dismiss这类链式调用。

4.3 模态页面传值的几种姿势

数据传递是所有跳转都绕不开的话题。入口页面往模态控制器传值，最常见的就是像上面代码一样，先创建对象，再赋值给它的公共属性。对简单场景来说，这种方式最直接，也没那么多心智负担。

如果模态页面处理完之后要把结果回传给入口页，属性赋值就不够用了。一般用闭包回调：

class DetailViewController: UIViewController { var onResult: ((String) -> Void)? @objc private func didTapClose() { onResult?("用户已关闭页面") dismiss(animated: true) } }

入口页面创建时：

let detailVC = DetailViewController() detailVC.onResult = { [weak self] result in print("回调结果：\(result)") } present(detailVC, animated: true)

[weak self]是用来防止闭包持有控制器造成循环引用的。新手阶段经常忽略这个，页面反复打开关闭，内存持续上涨，就是这类引用问题。模态页面的回调闭包被控制器持有，如果闭包又强引用了self，会导致双方互相持有，谁都释放不了。

我习惯在模态控制器的回调属性上统一用weak var修饰避免循环引用，但闭包本身需要外部再包装一下。工程里最稳妥的写法就是上面示例，外部闭包里用[weak self]，内部再通过guard let self = self else { return }解包，用一次就释放，不会对后面代码造成影响。

5. 纯代码写UI最容易踩的坑：我用真实崩溃换来的经验

这一节把我实际开发中遇到的高频问题统一记录一下。不夸张地说，这套代码方式最大的拦路虎不是API记不清，而是运行时崩溃和约束冲突。下面按排查链路来复盘，方便你遇到问题时能跟着思路走。

5.1 约束冲突：报错信息里藏着的线索

有一次我在页面上加了一个按钮，运行后控制台立刻刷出一大串约束冲突日志。日志里最关键的部分是提示哪个约束之间存在矛盾，比如同时要求按钮的topAnchor距离父视图顶部200分和300分。

复盘后发现，原因是我在view上手动添加了一个基于frame的旧布局逻辑，又用Auto Layout添加了新约束。两种布局方式混用，系统无法同时满足，只能指定约束之一优先执行，最终界面表现为控件偏移、拉伸或干脆不显示。

解决原则特别简单：一个控件，要么全程用Auto Layout，要么全程用frame，不要混。如果是从旧工程迁移，需要把代码里所有frame赋值删掉，统一走约束。排查步骤是先看报错里点名的是哪个控件，再去看这个控件的布局代码是否存在两份。

5.2 黑屏、页面不出来：九成是入口配置问题

有段时间我在调试一个功能时，工程只改了一行代码，运行后整个界面黑屏。第一反应是自己的UI代码写错了，查了很久都没头绪。

后来发现，我在删除Storyboard时只删了文件，Info.plist里的Main story board file base name还留着。系统启动时找不到那个文件，又不会自动退回代码入口，干脆就黑屏。解决方法就是回到第2节说的，清理Info.plist。

还有另一种黑屏：入口控制器正确，但makeKeyAndVisible()漏了。窗口没变成KeyWindow，整个UI渲染不出来。按下面顺序检查，基本不会被这个问题卡住：

1. 检查Info.plist里是否有Storyboard残留配置
2. 检查AppDelegate或SceneDelegate是否设置rootViewController
3. 确认makeKeyAndVisible()被执行
4. 确认入口控制器里没在viewDidLoad之前崩溃

5.3 按钮点击没响应：事件链路上的排查顺序

按钮看起来在页面上，但单击没有任何反应，这类问题也很好排查。按我的经验，优先级从高到低是：

• addTarget的selector方法是否存在、是否加了@objc
• 按钮是否被其他视图遮挡，尤其是有透明背景的父视图
• 按钮的isUserInteractionEnabled是否被误改成false
• 按钮的frame或约束结果里，宽高是否为0

有一次怎么都想不通按钮为什么不响应，最后发现它的宽度约束没生效，按钮实际宽度为0，只在日志层的约束冲突里报了个警告。这类问题用Debug View Hierarchy功能看一层视图层级，比对着代码猜效率高很多。

5.4 模态页面返回后崩溃：内存引用与deinit顺序

模态页面崩溃最常见的就是页面关闭后，某个回调还在访问已经被释放的控制器。比如在DetailViewController内部存了一个与入口页相关的闭包，关闭页面时这个闭包还在某个异步任务里，入口页已经被释放，访问时就崩了。

给控制器加个deinit打印：

deinit { print("DetailViewController deinit") }

打开页面再关闭，如果没看到这行打印，说明控制器没有被释放，存在循环引用。这时候去检查所有闭包属性、addTarget的target，以及代理对象是不是强持有关系。

说到循环引用的排查，我有个笨但很有效的方法：在页面里写一个deinit断点，每次关闭页面后看有没有触发。没触发的地方，往往就是引用管理有问题的地方。

6. 手写一个完整Demo：从入口页面到模态跳转的闭环演示

最后给出一份可以直接跑的完整代码组合。入口页包含标题文字、一个按钮；按钮点击后，模态弹出另一个控制器，内含文字标签和一个关闭按钮。这份代码覆盖了前面讲的所有知识点，我把每个步骤都加了注释。

6.1 完整代码清单

import UIKit // MARK: - 入口 视图控制器 final class ViewController: UIViewController { private let titleLabel: UILabel = { let label = UILabel() label.text = "纯代码界面示例" label.font = UIFont.systemFont(ofSize: 24, weight: .bold) label.textAlignment = .center label.translatesAutoresizingMaskIntoConstraints = false return label }() private let detailButton: UIButton = { let button = UIButton(type: .system) button.setTitle("模态弹出", for: .normal) button.backgroundColor = .systemBlue button.setTitleColor(.white, for: .normal) button.layer.cornerRadius = 10 button.translatesAutoresizingMaskIntoConstraints = false button.addTarget(self, action: #selector(didTapButton), for: .touchUpInside) return button }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .systemBackground view.addSubview(titleLabel) view.addSubview(detailButton) NSLayoutConstraint.activate([ titleLabel.topAnchor.constraint( equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 100 ), titleLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20), titleLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20), detailButton.centerXAnchor.constraint(equalTo: view.centerXAnchor), detailButton.topAnchor.constraint( equalTo: titleLabel.bottomAnchor, constant: 60 ), detailButton.widthAnchor.constraint(equalToConstant: 200), detailButton.heightAnchor.constraint(equalToConstant: 48) ]) } @objc private func didTapButton() { let detailVC = DetailViewController() detailVC.modalPresentationStyle = .fullScreen detailVC.receivedText = "从入口页面传来的文字" present(detailVC, animated: true) } }

import UIKit // MARK: - 模态弹出 控制器 final class DetailViewController: UIViewController { var receivedText: String = "" private let contentLabel: UILabel = { let label = UILabel() label.numberOfLines = 0 label.textAlignment = .center label.translatesAutoresizingMaskIntoConstraints = false return label }() private let closeButton: UIButton = { let button = UIButton(type: .system) button.setTitle("关闭页面", for: .normal) button.backgroundColor = .systemRed button.setTitleColor(.white, for: .normal) button.layer.cornerRadius = 10 button.translatesAutoresizingMaskIntoConstraints = false button.addTarget(self, action: #selector(didTapClose), for: .touchUpInside) return button }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .systemGroupedBackground contentLabel.text = receivedText view.addSubview(contentLabel) view.addSubview(closeButton) NSLayoutConstraint.activate([ contentLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor), contentLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -100), contentLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30), contentLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30), closeButton.centerXAnchor.constraint(equalTo: view.centerXAnchor), closeButton.topAnchor.constraint( equalTo: contentLabel.bottomAnchor, constant: 40 ), closeButton.widthAnchor.constraint(equalToConstant: 140), closeButton.heightAnchor.constraint(equalToConstant: 48) ]) } @objc private func didTapClose() { dismiss(animated: true) } }

6.2 运行后的验证路径

把工程入口设为ViewController后直接运行。界面应当显示标题文字，以及一个蓝色的"模态弹出"按钮。点击按钮，全屏切换到深灰色背景的第二个页面，页面中央显示刚才传入的文本，下方是红色关闭按钮。点击关闭，页面回到入口页。

我一般习惯在入口页写一个回调打印来验证页面正确关闭：

detailVC.onClose = { [weak self] in print("模态页面已关闭") }

onClose这个闭包在dismiss前触发，这样既明确了状态流转，又能自然测试内存释放。入门阶段能跑通这个闭环，Swift代码创建视图控制器、添加控件、模态弹出的整套流程，就算彻底拿下了。

6.3 还可以往哪个方向扩展

Demo跑通之后，可以在这个基础上继续扩展。比如把入口页改成UINavigationController包装，在导航栈里用push方式跳转，对比present和push的差异。也可以给模态页面加一个UIScrollView，实现长内容的滚动布局，进一步体会纯代码布局里的contentSize计算。

界面样式方面，Swift里比较容易上手的还有UIStackView。用栈视图可以把按钮和文字垂直排列，省掉多条topAnchor约束，代码会比上面的例子简洁不少。不过栈视图底层依然依赖Auto Layout，所以我建议先把单控件的锚点约束练熟，再去用栈视图做组合。

文字控件这块，多数项目还会涉及富文本NSAttributedString，用来控制一段文字里的不同颜色、字体、链接点击。写代码方式处理富文本比在Storyboard里直观太多了，把属性串组合好赋值给UILabel.attributedText即可，后面有机会我可以再单独梳理一篇。

模态控制器的动画样式也值得玩一玩，UIModalTransitionStyle有coverVertical、crossDissolve、flipHorizontal几种内置效果。自定义转场动画会更进阶，但理解了present背后的机制，自己实现转场也就没那么玄了。

就我个人实际体验来说，纯代码写UI初期确实会慢一些，约束写多了、Layout调试多了之后，速度会渐渐超过拖Storyboard。而且每写一行代码，对UIKit的理解就深一层——这大概是这门功夫最值得下的一点。