サトリク
Xcode/Swiftを勉強中のサトリクです。
この記事では、storyboardのスマートな管理方法をご紹介します。
ある程度複雑なアプリを作るとなると、どうしても画面が多くなってしまいますよね。画面が多いのに、全ての画面をMain.storyboardでやりくりしていると結構大変です。
というわけで、storyboardも機能ごとに分割しましょう。
実行環境
【Xcode】Version 11.3
【Swift】Version 5.1.3
超簡単に説明
- 分け方を考え、決める
- フォルダとファイルを作成する
- ViewContorollerの引っ越しする
- MainのViewControllerからStoryboard Referenceでファイルと接続する
- 引っ越し先のViewControllerのattributer inspectorのIs Initial ViewControllerにチェックを入れる
storyboardがごちゃごちゃの状態
スパゲッティ状態です。どこのSegueがどこに繋がってるか一瞬ではとてもわかりづらいです。
このような時に、新たにstoryboardファイルを作成して、綺麗に分けたらわかりやすいですよね。
サトリク
では、分けていきましょう。
storyboardの分類の仕方
今回、仮で少し散らかってるstoryboardを用意しました。
このMain.storyboardは、いたってシンプルで、青い画面から、A画面とB画面に別れています。A画面には、AViewControllerが紐づいています。
サトリク
では、このMain.storyboardを分類していきましょう。
手順1:storyboardの分類の仕方を考える
まずは、どう分けるのがスマートなのか、よく考えてからstoryboardの分割をしましょう。
今回の例の場合では、簡単です。
storyboardファイルを2つ作成し、以下の3つのファイルでstoryboardを管理します。
- Main.storyboard
- A.storyboard
- B.storyboard
![分け方を決める画像](https://satoriku.com/wp-content/uploads/2020/01/ab.jpg)
図で表すとこんな感じです。
手順2:ファイルとフォルダを作成する
次に、ファイルとフォルダを作成しましょう。
storyboardファイルをまとめるフォルダを作成しましょう。
NavigatorAreaでMain.storyboardを選択し、右クリックで、New Group from Selection
を選択しましょう。
![storyboardのファイル名の画像](https://satoriku.com/wp-content/uploads/2020/01/スクリーンショット-2020-01-04-14.59.30-min.png)
名前はstoryboardなど、わかりやすい名前にしましょう。
次に、A.Storyboardと、B.Storyboardを作成します。
作成方法は、command + nでテンプレート選択でStoryboardを選ぶだけです。
![storyboard作成後のフォルダ構成](https://satoriku.com/wp-content/uploads/2020/01/スクリーンショット-2020-01-04-15.08.59-min.png)
フォルダ構成がこんな感じにします。
手順3:引っ越し
次は、storyboardのViewControllerの移動をしていきます。
ミスってしまうと、データがなくなってしまう可能性があるので、以下の作業をする前にバックアップを取っておきましょう。
まずは、A側のViewControllerを移動していきます。
A.storyboardに移動させたいViewControllerをcommandを押しながら複数選択します。
選択したら、command + xで切り取りましょう。(怖い人は、コピペして消すでもよし)
そして、A.storyboardの右側の一番広いエリアにcommand + vで、ペーストするだけです。
BもAと同じように、行います。
![Main.storyboardに何もない状態の画像](https://satoriku.com/wp-content/uploads/2020/01/スクリーンショット-2020-01-04-15.20.55-min.png)
そうすると、Main.storyboardは何もない状態になります。
この段階では、切り取ったことにより、Segueも切り離されている状態なので、画面遷移できません。
手順4:Segueを繋げる
次に、Segueをつなげていきます。
引っ越し元のSegue
まずは、Main.storyboardをつなげましょう。
![Objects LibraryでStoryboardReferenceを選択する画像](https://satoriku.com/wp-content/uploads/2020/01/スクリーンショット-2020-01-04-15.26.13-min.png)
command + shift + Lを押して、Objects Libraryを開きます。開いたら、Storyboard Reference
をドラッグ&ドロップしてください。
![storyboardを選択する画像](https://satoriku.com/wp-content/uploads/2020/01/スクリーンショット-2020-01-04-15-48-49-min-2-.png)
次に、各Storyboard Referenceをstoryboardファイルと紐付けをしていきます。
Bも同じように、紐付けします。
![Segueでつなぐ画像](https://satoriku.com/wp-content/uploads/2020/01/スクリーンショット-2020-01-04-15.55.33-min.png)
紐付けが終わったら、Segueで繋いでください。
引っ越し先のSegue
次に、作成したstoryboardのA、BのSegueの設定をします。
各Storyboardの最初の画面に、attributer inspectorのIs Initial ViewControllerにチェックを入れてください。
Bもこれと同じ手順を行います。
サトリク
お疲れ様でした!これで、終わりです!実行して、うまくいかないところがないか確かめてください!
やっぱり、storyboardは分けたほうがスマートでいいですね!
まとめ
現在Swift勉強中なので、このような簡単なことを備忘録として記事に残しています。
こうした方がもっといいよとかあったら教えてください。