2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

画面遷移に関係あるコードの記述を別ファイルに分けて実装する

Last updated at Posted at 2021-02-12

#はじめに
今までの私は、Main.storyboardでViewController同士を画面遷移させてました。

ですが、今時は1つのStoryboardに1つのViewControllerが基本で
Storyboard Referenceを使用して画面遷移します。

というか、そもそもStoryboardを使用せずにコードで画面遷移といった流れになってきています。

なので今回はStoryboardを使わず、コードのみで画面遷移を実装しようといった感じです。

じゃあ早速、実装していこう!といってViewControllerに画面遷移のコードを
直接書くとまた新たな問題が浮上してしまいます↓
節子、それViewControllerやない...、FatViewControllerや...。

では、一体どうすればいいのかというとタイトルにも書いてあるように
画面遷移に関係あるコードの記述を別ファイルに分けて実装していきます。

#実装する前に
今回は、コードベースで画面を表示させたいのでMain.storyboardを削除します。
ですが、ただ削除するだけではエラーになるので色々と設定していきます。

その前に、まずはSceneDelegateを今回は使用しないので削除していきます。
iOS13でSceneDelegateを使わないでアプリを作る

#準備の流れ
では、SceneDelegateを削除したら早速、Main.storyboardを削除していきましょう。

###1.Main.storyboardを削除する
ファイルごと削除したいので、Move to Trashを選択します。
スクリーンショット 2021-02-12 14.16.25.png

###2.info.plistの「Main storyboard file base name」を空白にする
最初は、Mainになっているのでこの部分を空白にしましょう。
スクリーンショット 2021-02-12 14.20.10.png
これで準備完了です。

#実装していく
まずは、新しくRouter.swiftを作って
そこに初期画面を表示するメソッドを記述していきます。

そして、今回はStoryboardでアプリ画面を作ります。

Router.swift
import UIKit

final class Router {
    // 初期画面を表示するメソッド
    static func showRoot(window: UIWindow) {
        let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateInitialViewController() as! FirstViewController
        let navFirstVC = UINavigationController(rootViewController: firstVC)
        window.rootViewController = navFirstVC
        window.makeKeyAndVisible()
    }
}

そして、AppDelegate.swiftにて先ほど作ったメソッドを呼び出します。

AppDelegate.swift

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)
        self.window = window
        Router.showRoot(window: window)
        return true
    }
}

それが終わったらStoryboardでアプリ画面を作ります。

では、ここでビルドしてみましょう。

自分が作ったアプリ画面が表示されたら成功です!
私はこのような画面にしました。

#画面遷移させていく
ボタンをタップしたら画面遷移という感じにします。

まずは、画面遷移先のSecondViewController.swiftを作ってアプリ画面を作り
画面遷移するためのメソッドを先ほど作ったRouter.swiftファイルに記述していきましょう。

更に前のViewControllerがNavigationControllerを使用していた場合を想定してのメソッドも同時に作っていきます。

Router.swift
    // 次の画面に遷移するためのメソッド
    static func showSecond(vc: UIViewController, animated: Bool = true) {
        let secondVC = SecondViewController()
        show(from: vc, to: secondVC)
    }
    // from -> to に画面遷移するメソッド
    // 前のViewControllerがNavigationControllerを使用していた場合を想定して作った
    private static func show(from: UIViewController, to: UIViewController, animated: Bool = true) {
        if let nav = from.navigationController {
            nav.pushViewController(to, animated: animated)
        }else {
            from.show(to, sender: nil)
        }
    }

そして、ボタンをタップしたら画面遷移するように実装していきます。

FirstViewController.swift
    @IBAction private func showSecond(_ sender: UIButton) {
        // SecondViewControllerに画面遷移する
        Router.showSecond(vc: self)
    }

こうなれば成功です!
gifTrasition.gif

#おわりに
設定次第では画面遷移方法も自由に変更可能ですので色々、試してみて下さい。

そして私が色々、試したソースコードもこちらにあげてますので良かったら見てみて下さい。

何か間違っている部分や気になる部分があれば、気軽にコメントして下さると嬉しいです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?