🩰yawacom - 🐥Storyboardを使わず画面遷移を行う

2021/01/27現在編集中

# Storyboardの削除
Storyboardはぱっと見わかりやすくて最高だとおもっていたのですが，画面が増えるにつれ重くなっていったり，いろいろなプロパティを直接Storyboardに記述することになるので後々修正が大変だったりします．なので今回はStoryboardを使わずコードとxibで作っていきます．

ということで
💡Main.storyboard はいらないので削除
💡General -> Deployment Info -> Main Interface のMainという文字列を消して空欄に
💡Info.plistのApplication Scene Manifest -> Scene Configuration -> Application Session Role -> Item -> Storyboard Name を➕➖の➖を押して削除
を行います．

▽参考文献
<a href="https://3jino-oyatsu.com/blog/131/">【Swift4】アプリの初回起動画面を storyboard ではなく xib にする</a>


# アプリ初回起動
まずアプリを立ち上げた時にユーザ登録画面に行くのかログイン画面に行くのかを分岐させます．
最初に必ずAppDelegate/SceneDelegateが呼ばれるので，そこでまずRoutingViewControllerに移動します．
今回はターゲットをiOS13以上にしたためSceneDelegateに書いていきます．

```swift:SceneDelegate.swift

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let _ = (scene as? UIWindowScene) else { return }
        
        // RoutingViewController呼び出し
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UINavigationController(rootViewController: RoutingViewController.init())
            self.window = window
            window.makeKeyAndVisible()
        }
    }
以下略（変更なし）
```

ここでUINavigationControllerを設定することで今後画面遷移が楽チンにできるようになります！

# ユーザ登録画面へ
そのRoutingViewControllerでユーザ登録画面かログイン画面かの分岐させます．今回はユーザ登録画面から作るのでひとまずユーザ登録画面に遷移するように，openLaunchScreen関数の引数に`.registration`を指定しています．

```swift:RoutingViewController.swift
import Foundation
import RxSwift

final class RoutingViewController: UIViewController {
    
    override func viewDidLoad() {
        // ひとまず必ずユーザ登録画面に遷移するように
        self.openLaunchScreen(launchScrenType: .registration)
    }
}

extension RoutingViewController {
    private func openLaunchScreen(launchScrenType: LaunchScreenType) {
        switch launchScrenType {
        case .login:
            // ログイン画面へ移動
            break
        case .registration:
            // ユーザ登録画面へ移動
            RegistrationViewController.start(self)
            break
        }
    }
}
```
# ユーザ登録画面の作成
ユーザ登録画面を作ります．
新規ファイル作成からxibファイルとViewControllerを作成します．今回は`RegistrationViewController.swift`と`RegistrationView.xib`という名前にしました．

### xibとViewControllerの接続
まず最初にRegistrationViewとRegistrationVCがOutlet接続したりできるようにClassに登録します．xibを開いた時のClassのところに`RegistrationViewController`と入力します．
![スクリーンショット 2021-01-27 21.26.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149433/2007348a-ff0f-ba37-ee55-854cc0015f9a.png)

次にFile's OwnerとViewを紐付けます．Outlet接続する感じでFile's OwnerからViewに青線を持ってくると結べます．写真のview-Viewのようにつながってたらできてます！
![スクリーンショット 2021-01-27 21.29.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149433/3515882e-a5fd-65d8-42b8-6ac9cf4c68eb.png)

### とりあえずtextboxを置いてみる
すごい適当に置いてみました．目立つのでピンク色でど真ん中に配置しています．
![スクリーンショット 2021-01-27 21.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149433/8b77a514-227a-d7c1-7fb3-392d70eb1bad.png)

### コードを書く
ユーザ登録ビューを書いていきます．
さきほど配置したtextboxを`userName`という名前でOutlet接続し，`viewDidLoad()`で赤色にしています．ビュー全体の背景は黄緑にしています．

また，RoutingViewController.swiftで分岐する際

```swift:RoutingViewController.swift
case .registration:
    // ユーザ登録画面へ移動
    RegistrationViewController.start(self)
```
とあったと思います，この`start`関数をRegistrationViewController.swiftに書いていきます．
`start`関数では`navigationController`が持っている`pushViewController`というものを使い画面遷移をしています．
`currentVC`には元々のRoutingViewControllerが入っており，`nextVC`には遷移先のRegistrationViewControllerが入っています．

```swift:RegistrationViewController.swift
import Foundation
import RxSwift

final class RegistrationViewController: UIViewController {
    @IBOutlet weak var userName: UITextField!
    
    static func start(
        _ currentVC: UIViewController,
        animated: Bool = false
    ) {
        let nextVC = RegistrationViewController(nibName: "RegistrationView", bundle: nil)   // .initは省略可能
        currentVC.navigationController?.pushViewController(nextVC, animated: animated)
        // 上のナビゲーションバーを非表示
        currentVC.navigationController?.navigationBar.isHidden = true
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
                
        self.view.backgroundColor = .green
        userName.backgroundColor = .red
        print("レジストレーションビューコントローラー")
    }
}
```

するとこんな感じになります．めちゃめちゃ気持ち悪いですがわかりやすいですね！ちゃんと赤色のtextboxになっています．
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149433/34ce7b5e-fd85-60ee-5895-cb5d79385282.png" width=30%>  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149433/56ea09ff-7ec9-4a64-43df-a45a22a0d6d3.png" width=30%>

ここからはデザインをいい感じに作っていきます．
コードは<a href="https://gitlab.com/kno3a87/mikuaka-ios/-/merge_requests/1">GitLab</a>にあげています．

# next記事
<a href="https://qiita.com/kno3a87/items/071f2221d0b322ce3097">🩰yawacom - 🐥画面を作っていく</a>