iOSアプリ開発:コードだけでUI画面構成を行う方法〜入門〜


この記事は

iOSアプリの開発で画面構成(UI部分)にはStoryBoardやswiftUIなどがあるようですが、これらはgitとの相性が悪いためコンフリクションを起こしやすく、チーム開発には向いていないらしいです。というわけでStoryBoardでもなくswiftUIでもない、「コードでUIをデザインする」という方法を学習してみます。具体的には「SnapKitなどのライブラリを用いて画面を作っていく」ことになります。

手順

・CocoaPodsとSnapKitをインストールして、SnapKitをプロジェクトに導入する
・StoryBoardを消す
・Scene Delegateを消す
・AppDelegate.swiftの編集

CocoaPodsとSnapKitをインストールして、SnapKitをプロジェクトに導入する

私が過去に書いたこちらの記事を参考に進めて下さい。
参考:Xcode:CocoaPodsをインストールして、CocoaPodsからSnapKitをインストールする!

StoryBoardを消す

以下の手順でStoryBoardを一匹残らず駆逐していきます。

・ナビゲータエリアのプロジェクトをクリック -> General -> Main Interface -> Mainから空欄にする
・ナビゲータエリアのinfo.plistのうち、Scene ConfigurationStoryboard Nameの項目を削除(右クリック -> Cut)
Main.storyboardを削除

Scene Delegateを消す

同様に、以下の手順で一匹残らず駆逐していきます
info.plistApplication Scene Manifestを根こそぎ削除
SceneDelegate.swiftファイルを削除

AppDelegate.swiftの編集

とにかくこうして下さい。

AppDelegate.swift
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        // 最初に表示するUIViewControllerを指定する
        // windowをスクリーンサイズに合わせて生成
        window = UIWindow(frame: UIScreen.main.bounds)

        // ViewControllerをインスタンス化、windowのrootに設定する
        window!.rootViewController = ViewController()

        // 表示する
        window!.makeKeyAndVisible()

        return true
    }
}

以上で何とかなるはずです。
それでは、本当に何とかなるのか試してみましょう。
UIに関するコードはViewControllerに書いていきます。

ViewController.swift
import UIKit
// SnapKitをインポート
import SnapKit

class ViewController: UIViewController {
    var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 背景色を変更
        self.view.backgroundColor = UIColor.greem

        // 文字を設置
        self.label.text = "Hello, World!"
        // ラベルを設置
        self.view.addSubview(label)
        // ラベルの位置をSnapKitで指定
        self.label.snp.makeConstraints { (make) in
            make.center.equalToSuperview() // 親ビューの真ん中に配置
        }

    }
}

上記は画面の色を緑色にして、その真ん中にHello, World!を表示させるコードです
これでRunして本当にそうなっていればおkですね。
SnapKitもUIKitも使えていることになります。

なっていなければ、どこかがおかしいのでエラーを見るかデバッグするか。

以上です!
お疲れ様でした!

参考記事

iOS13でSceneDelegateを使わないでアプリを作る

storyboardが使われない設定にしているはずなのにcould not find storyboard named "Main"が出てエラーになる。

Storyboard派がコードでUIを実装するためのチュートリアル