初めに

iOSアプリのUI実装をする上で、Storyboardのコンフリクトに悩まされている方は数多いと思います。

普通にStoryboard を使っていると、UIの複数人同時実装なんて、とてもじゃ無いけど出来ないですよね？
だって必ずコンフリクトしますもん。(ひどい時にはファイルを開いただけで、予期せぬ変更が入る)

そんな状況を解決するために、
自分なりのUI実装ベストプラクティスを考えてみました。

さっそく結論

UIのデザインは、ViewController(VC)とxibファイルで定義する
遷移はStoryboardで定義する
R.swiftを用いて、segueを用いる時のハードコーディングを防ぐ(推奨)

つまり画面はxibとVCで、遷移はStoryboardで定義して、
画面ごとに実装を分割しつつ、アプリ全体のフローを確認しやすくします。

また、segueをソースコードから呼び出すことになるので、R.swiftを用いてハードコーディングを防ぐことをおすすめします。
R.swiftの導入の仕方は、次の記事が参考になります。R.swiftのセットアップ方法(Swift5) - Qiita

こんな利点がある

Storyboardのコンフリクト地獄から解放される
画面の使い回しがしやすい
画面と遷移の実装を分けているので、例えば、”同じ画面だけど、遷移が2通りある”なんて時も簡単に対応出来ます。
プロジェクトにViewを使い回す習慣が生まれる(願望)
この方法はxibファイルを使う事を強制するので、xibファイルを使ったViewの共有がプロジェクトに浸透する(といいなー)

手順

例として次のようなサンプルを作成してみます。

VCとxibファイルの作成

UIのデザインを定義するVCとxibファイルを作成します。

ファイルツリーを右クリックでVCを作成

この時、”Also create XIB file”にチェックを入れて、Xibファイルも同時に作成します。

2. **xibファイル上でUIパーツを配置**

3. **UIパーツとVCを紐付け** VCを作成する時に、”Also create XIB file”にチェックを入れてXibファイルを作成していれば、file’s ownerにVCが設定されているので、VCと紐付けできます。 4. **VCからxibを読み込み** 下記のようにVC側でloadViewをoverrideし、xibファイルを読み込みます。

class FirstViewController: UIViewController {
	
	override func loadView() {
		// R.swiftを使わない場合
//		if let view = UINib(nibName: “FirstViewController”, bundle: Bundle.main).instantiate(withOwner: self, options: nil).first as? UIView{
//			self.view = view
//		}
		// R.swiftを使う場合
		view = R.nib.firstViewController(owner: self)
	}
	
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

StoryboardとVCを紐付け

Storyboardで画面を作成
Viewを削除
余分なViewを削除します。
ViewはXibファイルから生成されるため、StoryboardにあるViewは必要ありません。
画面のCustomClassにVCを指定
例では”FirstViewController”を指定

Storyboardで遷移を定義

普通に遷移を定義
遷移にidentifierを設定
VCから遷移を呼び出すために、遷移にidentifierを設定します。

VCから遷移を呼び出し

	// ボタンを押したら次の画面に遷移する
	@IBAction func segueToNextView(_ sender: Any) {
		// R.swiftを使わない場合
		//self.performSegue(withIdentifier: "toSecondView", sender: nil)
		self.performSegue(withIdentifier: R.segue.firstViewController.toSecondView, sender: nil)
	}

動作確認

最後に

最初xibファイルの"file's owner"にVCを指定しておくだけで、viewが読み込まれるものだと思い込み、はまりました。
loadViewでxibファイルの読み込みが必要なんですね。

プロジェクトのメンバーにやり方を浸透させるのは大変だと思いますが、
大勢が参加するプロジェクトほど効果は高いと思います。

参考

StoryBoardの代わりにxibで画面を実装する - Qiita
Swiftxibファイルを呼び出す最も簡単な方法 - Qiita
XIBからViewを生成する4つの実装パターン - Qiita
R.swiftのセットアップ方法(Swift5) - Qiita