Help us understand the problem. What is going on with this article?

【iOS】UI実装ベストプラクティスを考えてみた 〜Storyboardのコンフリクトに悩まされている方々へ〜

初めに

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


こんな利点がある

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

手順

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

VCとxibファイルの作成

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

1. ファイルツリーを右クリックでVCを作成
スクリーンショット 2019-10-20 22.07.47.png
この時、”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を紐付け

  1. Storyboardで画面を作成
    スクリーンショット 2019-10-21 0.02.40.png
  2. Viewを削除
    余分なViewを削除します。 ViewはXibファイルから生成されるため、StoryboardにあるViewは必要ありません。
    スクリーンショット 2019-10-21 0.15.45.png
  3. 画面のCustomClassにVCを指定
    例では”FirstViewController”を指定   スクリーンショット 2019-10-21 0.16.52.png

Storyboardで遷移を定義

  1. 普通に遷移を定義
    スクリーンショット 2019-10-21 0.22.06.png
  2. 遷移にidentifierを設定
    VCから遷移を呼び出すために、遷移にidentifierを設定します。 スクリーンショット 2019-10-21 0.22.53.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした