【 iOS Swift 】#14 不用Storyboard，用純Code刻畫面 (Xcode 14)

目前遇到的公司較少使用Storyboard製作畫面，大多希望以純Code進行，主要是因為多人協作會有合併的問題。

那我們怎麼做可以拋棄Storyboard呢？

先前看了一些Youtube影片都教要把一些東西刪掉，其實不用！

其實可以：

• Step 1. 像平常一樣開Project，Interface仍選擇Storyboard

• Step 2. 把需要的File都先新增好，比方説，需要有Tab Bar、Navigation以及View等Controllers

(可以用view.backgroundColor幫每個Controllers上色，方便之後辨別)

• Step 3. 選擇「SceneDelegate」這個檔案，並補上以下程式

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let _ = (scene as? UIWindowScene) else { return }

        // 從這兒開始

        // 呼叫我們新增的Controllers
        let maintabBarController = MainTabBarController()
        let mainNavigationController = MainNavigationController()
        let secondViewController = SecondViewController()
        
        // 定義Tab有哪些畫面？
        maintabBarController.viewControllers = [mainNavigationController, secondViewController]
        
        // 定義Navigation會連到哪些畫面？
        let mainViewController = MainViewController()
        mainNavigationController.viewControllers = [mainViewController]
        
        // is Initial Controller 打勾，就是StoryBoard上指定第一頁的箭頭
        window?.rootViewController = maintabBarController        
        
    }

• Step 4. 把APP跑起來後，就會發現成功了！

• Step 5. 我們可以再按上方圖上標示紅色箭頭的按鈕，旋轉一下就可看到整個APP的疊圖狀況，會發現順序為：

window → MainTabBarController → MainNavigationController → MainViewController

（再繼續加些小東西）

• Step 6. 在MainViewController上加上一個Button，按下按鈕後到下一頁

import UIKit

class MainViewController: UIViewController {
    
    // 下一頁按鈕
    let nextButton: UIButton = {
        let button = UIButton()
        button.backgroundColor = .link
        button.setTitle("下一頁", for: .normal)

        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 改個顏色
        view.backgroundColor = .white

        // 疊到View上
        view.addSubview(nextButton)
        nextButton.frame = CGRect(x: view.center.x - 75, y: view.center.y, width: 150, height: 48)
        
        // 設定按鈕按下的Action
        nextButton.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)
        
    }
    
    // 按鈕的Action
    @objc func buttonPressed() {
        let detailViewController = DetailViewController()

        // 請把我推到DetailViewController那邊
        navigationController?.pushViewController(detailViewController, animated: true)
    }
    
}

透過上述的做法，若以Storyboard呈現，大概的架構就會如下圖所示：