[iOS] Storyboard Referenceを活用しStoryboardを分割する

はじめに

Storyboardを使用したiOSアプリ開発において、１つのStoryboardに対したくさんのViewControllerが詰め込まれているのは良くないということなので、Storyboardを分割する方法を記載します。

１つのStoryboardにViewControllerを複数突っ込んだ良くない例	StoryboardReferenceを活用し、Storyboardを適切に分割している例

概要

環境

Xcode : Version 12.4

内容

ViewControllerを用意し、それに対応するStoryboardファイルを作成する。
(1画面につき1つのViewControllerである前提です)

実装手順

1) Storyboardファイルを作成する

main.storyboardと同ディレクトリにてcommond + Nで新規ファイルを作成します。

ファイルの種類をStoryboardと選択し、決定します。

その後にファイル名を入力するのですが、今回は"second"とします。
(この時、初期値がStoryboardと大文字Sで入力されているのですが、これを残した状態でsecond.Storyboardなどとしてしまうと、拡張子エラーでファイルが開けなくなるので注意してください)

2) ViewControllerファイルを作成する

次に、新しく作成された上記のsecond.storyboardに対応するViewControllerファイルを作ります。

先ほどと同じ要領で作成していきます。
Cocoa Touch Classを選択し、ファイル名はsecondViewControllerとしました。

このように２つのファイルが出来ていればOKです。

3) Storyboard Referenceを設置する

ではいよいよStoryboard Referenceを設置していきます。
main.storyboardのLibraryからObjectを検索します。refと入れれば出てくるので空いているところにドラッグ&ドロップしていきます。

設置できたらStoryboard ReferenceのInspectorsで、対応するStoryboardを選びます。今回は先ほど作成したsecondとなります。

4) segueの設定を行う

画面遷移のためにsegueの設定をします。
ViewControllerからStoryboard Referenceにsegueを繋ぎます。

segueを繋いだらsegue Identifierも設定しておきましょう。今回はgoSecondとします。

segueについての解説は本記事では省略しますが、以下の記事がとても分かりやすく参考にさせて頂きました。ありがとうございます。

• 【Swift5/Xcode】画面遷移のチートシート。Segueを画面遷移とSegueを使わない画面遷移を徹底解説

5) 作成したstoryboardにViewControllerを設置

1)で作成した何もない状態のsecond.storyboardにViewControllerを設置します。

設置後はViewControllerのCustom Classの設定、Is Initial View Controllerのチェックをします。

6) 画面遷移を試す

Storyboardを切り離す作業・設定は完了したので、下記２点を追記してちゃんと動作するかどうかを画面遷移させてみて確認します。

• main.storyboardにButtonを設置
• ViewController.swiftに画面遷移のメソッドを記述
• (遷移先のViewに色をつけて分かりやすくする)

// ViewController.swift
@IBAction func goSecondButtonTapped(_ sender: UIButton) {
    performSegue(withIdentifier: "goSecond", sender: nil)
}

これで無事に動作することが確認できました！

後語り

以上がStoryboard Reference活用による、Storyboardを分割して1つのStoryboardに対して1つのViewControllerという配置をする方法となります。
このようにStoryboardを分割して管理することで、コンフリクトも起こりにくくなります。
私自身もしっかりと理解を深め活用していきたいと思います。

2021.3.2 大文字小文字を修正