【Swift】画面レイアウトをxibファイルに作成する方法【storyboard】

storyboardファイル内で画面遷移とレイアウトの両方を作成していると、画面数が多くなったり、複雑なレイアウトを作成したりした時にどうしても動作が重くなってしまうことがあります。

複数人でで作業をしたり、テストをしたりする際にもストーリーボードに全てが詰まっていると作業がしづらいことも多いと思います。


これらの問題を解消するために今回は、

・stroyboardファイルにはViewControllerと画面遷移のみ
・xibファイルに画面レイアウトを作成する

このような形で画面ごとのレイアウトを別ファイルで作成したサンプルプロジェクトを実装してみます。

レイアウトを別ファイルで行うことのメリット・デメリットをまとめると以下のようになります。

1. レイアウトを別ファイルで行うことのメリット

・storyboardファイルが重くならない
・複数人で作業する際に便利
・テスト等が行いやすくなる

2. レイアウトを別ファイルで行うことのデメリット

・レイアウトがつながって見えないことで全体の構成が把握しづらくなる。

3. 作業環境

MacOS Ventura 13.0
Xcode 14.2
Swift version 5.7.2

4. サンプルプロジェクト作成と構成


・2画面構成
・FirstViewControllerからSecondViewControllerへ画面遷移
・レイアウトファイル(xib)は２つ作成(FirstViewController、SecondViewController)

プロジェクト名は【LayoutSample】としました。

プロジェクト作成完了後、【FirstViewController.swift】、【SecondViewController.swift】を作成します。

※初期状態で作成されているViewControllerは今回使用しません。理由は次の目次「注意点」に記載しています。

レイアウト用xibファイルを作成します。[FirstView.xib]、[SecondView.xib]

4-1. 必要なファイルの準備

LayoutSampleフォルダ内で右クリック→[New File…] をクリック→Cocoa Touch Class → Nextをクリック


FirstViewControllerを作成します。

Classには[FirstViewController]、Subclass ofは[UIViewController]と入力します。

SecontViewControllerも同様に作成します。

※XIBはこのあと作成するため、Also create XIB file のチェックは外しておきます。


XIBファイル(画面レイアウト用のファイル)作成

FirstViewController用[FirstView]、SecondViewController用[SecontView]とします。


これでファイルの準備は終わりです。

ViewControllerのswiftファイルととViewのxibファイルがセットで揃っていればOKです。


4-2. Storyboardの設定

初期状態で配置されているViewControllerをDeleteで削除後、その後+ボタンを押してViewControllerを２つ追加します。

ViewController生成時、ViewControllerの階層の下にViewが自動で作成されているので、これをDeleteで削除しておきます。

[Custom Class]→Classに[FirstViewController]、[SecondViewController]のそれぞれを設定


ビルドした際の初期表示画面の設定が外れているため、FirstViewControllerの[is Initial ViewController]にチェックを入れます。

SecondViewのレイアウト表示も確認したいのでFirstViewController→SecondViewControllerにSegue(show)を設定。


segueのIdentifierを[SecondView]としました。


最終的にStoryboardはこのような形になっていればOKです。


4-3. レイアウト用ファイル(XIB)の設定

file’s OwnerのClassにFirstViewControllerを設定

file’s OwnerをViewまで右クリックドラッグしてOutlets→viewにチェックを入れます。


これでFirstView.xibのViewがFirstViewControllerの親Viewとして設定されました。

SecondView.xibにも同様に設定を行います。

レイアウトが正常に反映されているか確認するため、FirstViewにボタンを配置してシミュレータで確認してみます。


正常に表示されました。

4-4. 画面遷移の方法

先程設置したボタンを使って画面遷移を行い、SecondViewのレイアウトが正常に表示されるか確認してみます。

FirstView.xibのViewに設置したボタンにActionを設定します。

FirstViewControllerに右クリックドラッグします。

ActionのNameはbuttonActionとしました。


Actionを設定したら画面遷移を作成します。

performSegueのwidthIdentifier内には、Stroyboardファイルのsegue→Identifierに設定したSecondViewを入力します。

class FirstViewController: UIViewController {
    
    
    @IBAction func buttonAction(_ sender: Any) {
        //SecondViewへの画面遷移
        self.performSegue(withIdentifier: "SecondView", sender: nil)
        
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

シミュレータで確認してみます。

FirstViewから遷移してSecondViewが表示されているのが確認できました。

SecondView.xibにはLabelを設置して遷移したことが視覚的にわかるようにしています。



4-5. 注意点

xibファイルを作成してFile’s Ownerにプロジェクト生成時に有るViewControllerを指定するとビルドエラーが発生しました。

FirstViewControllerのように独自の名前にすると問題なくビルドができました。

原因ははっきりと説明ができないですが、できればプロジェクト生成時のViewControllerは使用しないほうが良いと思います。

5. まとめ

いかがでしたでしょうか。

今回は画面レイアウトの作成をstoryboardから切り離して実装する方法を紹介しました。

レイアウトファイルを画面ごとに分けることができるだけでstoryboardが肥大化してしまうことを防ぐことができます。

画面数が増えてもstoryboardは画面遷移フローの定義のみなので、storyboardは画面遷移、xibファイルは画面レイアウトと役割をはっきりとさせることができます。

普段直接storyboardでレイアウトをしていて、動作が重かったり、レイアウトの実装がしずらく感じている方の作業効率の改善に繋がりますと幸いです。

人気のタグ一覧

関連記事

カテゴリー