[纯代码] Swift+UIKit · 搭建第一个iOS APP项目

前言

校招入职公司一年多了，现在也总算是告别了什么都不会的新手期，处理日常工作时也不至于面对需求无计可施。但是我总感觉，作为一个初涉iOS的工程师而言，多去造造轮子，做做项目，对自己的提升应该也会更快。这个过程里，我也可以更快熟悉苹果生态，将自己的身份从一名iOS开发新手，转变为iOS开发者。（虽然公司的基建很赞，让我不用操心这些东西，但是一直依赖下去可也不是什么好事= =）

在这半年内，我会开始根据100Day Swift列出的一系列项目，去重新做一遍，并且将遇到的各个基础知识整理到博客中，方便以后查阅和使用。也欢迎各位同行指出不足，一起进步。

• 本文适合的读者：
  • 有过客户端开发经历，了解客户端常用架构（MVC/MVP/MVVM）
  • 熟悉Swift语法，或已完成了Swift的学习
  • 想了解iOS的开发流程
• 本文涉及到的项目：Project 1 - Tap Counter
• 本文的主题：如何使用纯代码方式创建一个Swift + UIKit项目
• 环境相关：
  • 开发环境：macOS 12.4 + XCode 13.4.1
  • iOS target：15.0
  • Swift 版本：Swift 5.3

创建一个纯代码编辑的Swift + UIKit项目

创建一个Swift + UIKit项目

打开Xcode，右上角File → New → Project。

在弹出来的Xcode弹窗里，点击一下iOS这个tab下的App，然后点击Next。

在弹出来的界面中，需要填以下的信息：

• Product Name：APP名

• Organization Identifier：APP属于什么企业，标识符是什么

• interface：UI框架，选择Storyboard，这一项对应着UIKit

• Language：编程语言，选择Swift

选择项目的存储路径，然后恭喜你，你已经成功创建了这个项目啦。

让它变成纯代码编辑的

接下来，你将会删除掉项目对StoryBoard的引用。StoryBoard的本质很像Android、QT、UWP开发中的可视化界面，你可以在里面用xml/xaml语法快乐的拖动UI，并且所示即所得。

但是iOS工程界目前对这个方案还是不太喜欢的，业界更倾向的方式是：手撕UI，并且手撕布局。在这一节中，我会列出实现的方案。

首先，点击左侧列表中，你创建的项目。

然后在右方展示的general这个tab中，删除Main interface里的内容。

然后，点击左侧中的info文件，像我这样展开目录树。

然后点击最下方的storyboard name，敲一下backspace，删掉。

恭喜你，现在你获得了一个丢弃掉StoryBoard的项目了。接下来，我会教你怎么让你的APP打开第一个页面。

让你的APP打开指定的ViewController

我们以客户端常见的架构，MVC(Model、View、Controller)为例。纯代码的iOS开发会有稍许不一样，视图控制器（ViewController）往往需要承担视图+控制器的责任。

本小节，我会讲述如何让APP打开项目中已经创建好了的ViewController。

创建一个窗口

iOS的APP以窗口（Window）来显示页面。在跳转到ViewController之前，你需要创建这个APP的Window，然后将这个window的第一个视图控制器，设置为项目中的ViewController。

首先，打开SceneDelegate文件，然后删掉func scene(_:willConnectTo:options:)中的代码，用下面的代码粘贴上去。

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 }
        // Step 1. 创建
        let window = UIWindow(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
		// Step 2. 设置背景色
        window.backgroundColor = .clear
		// Step 3. 设置第一个ViewController
        window.rootViewController = ViewController()
 		// Step 4. 让它可见，并且做好事件监听
        window.makeKeyAndVisible()
        window.windowScene = windowScene
 
 		// Step 5. 告诉APP，这就是你的window
        self.window = window
    }
}

这段代码中，我们创建好了一个window变量，并且传给APP：

1. 这个window是全屏的：它的大小等于屏幕的大小，位置从(0, 0)开始

2. 这个window没有背景色

3. 我们创建了一个ViewController变量，并且将它设为这个window的第一个ViewController

4. 接下来，我们让这个window可见，并且做了一定的事件监听，这部分可以忽略

编辑ViewController文件，看下它是否真的被打开了？

然后，打开ViewController文件，用下面的代码粘贴上去。

和原来的代码比起来，这段代码里我们只做了一件事：我们希望打开的第一个页面是棕色的。

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBrown
    }
}

运行一下试试？然后你会看到你的模拟器打开了这么一个APP。

恭喜你，你的ViewController页面已经被打开了。