Xcode11 storyboardなしで始める開発の初期設定メモ 後半

2020-06-11

おはこんばんにちは、しょーです。

久しぶりに使った。
そういえば、特定のラジオチャンネルにて、かかってる曲のイコライザーでチャンネル特定できるスキルを身に付けました。
犬の餌にもなりませんね。


前回 Xcode11 storyboardなしで始める開発の初期設定メモ 前半 というのをやりました。
今回はその続きで、TabBarController、 NavigationController を導入部分。

Xcode11 から出現した SceneDelegate を考慮して storyboard なしでプロジェクトのビルドをするところまで書いているので、よければ前回の記事も確認してみてください。

目標

  • TabBarController の導入
  • NavigationController の導入

まで行い、大体のアプリで使用されているのような 大枠構成 を作ります。
(SnapKit を入れるところまで書こうと思いましたが、ライブラリ入れるだけなので省くことにした)

構成

構成としては、以下のようなものにしていく。

TabBarController を入れるぞ

作りたいタブの数だけ、ViewController を作ろう。

ちなみに、現在のバージョンでビルドしていないのでわかりませんが、タブが個数分表示される限界数は5つです。
6つ以上になると、何やら面白いことが起こるとか、起こらないとか。
(5つ目タブが、それ以降のタブをまとめるタブになり、更にタブの入れ替えもできるっぽいぞ)


まぁ今回はとりあえず3つにしておきます。

どちらでもいいんですが、とりあえずタブごとにディレクトリは分けてます。
今回はサンプルとして色分けタブを作成します。

ViewController には前回同様、適当な背景色でも入れておきます。(既存の ViewController は BlueViewController に変えました)

final class RedViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // この色が違うやつを三つ作ってます
        view.backgroundColor = .red
    }
}


続いてタブバーの大元となる UITabBarController を作成します。
こちらのに先ほど作成した ViewController を TabBarItem として追加していく。

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        initTabBar()
    }

    func initTabBar() {
        // Blue tab
        let blueVC = BlueViewController()
        blueVC.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 0)

        // Green tab
        let greenVC = GreenViewController()
        greenVC.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 1)

        // Red tab
        let redVC = RedViewController()
        redVC.tabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 2)


        // Tabs
        setViewControllers([blueVC, greenVC, redVC], animated: false)
    }
}

しっかり作り込む場合はタブアイコンの素材を当てたりしますが、とりあえず適当に。

それと、これにて rootViewController は この MainTabBarController に変わったので、SceneDelegate (or AppDelegate) の rootViewController を変更しましょう。

@available(iOS 13.0, *)  // 追加する
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).

        guard let scene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: scene)
        window?.rootViewController = MainTabBarController()
        window?.makeKeyAndVisible()
    }

これでビルドが通るはず!

あーだから目が!
チカチカすいません、だけど動いてます!(強引)

次は NavigationController を取り入れる。

NavigationController を入れるぞ

今は各タブにプレーンな ViewController をルートとして当てはめていますが、それぞれのタブのルートに個別でナビバーを入れていきます。

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        initTabBar()
    }

    func initTabBar() {
        // Blue tab
        let blueVC = BlueViewController()
        blueVC.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 0)
        let blueNVC = UINavigationController(rootViewController: blueVC)

        // Green tab
        let greenVC = GreenViewController()
        greenVC.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 1)
        let greenNVC = UINavigationController(rootViewController: greenVC)

        // Red tab
        let redVC = RedViewController()
        redVC.tabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 2)
        let redNVC = UINavigationController(rootViewController: redVC)


        // Tabs
        setViewControllers([blueNVC, greenNVC, redNVC], animated: false)
    }
}

ついでにナビバーのタイトルもつけておきましょうか。

final class BlueViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .blue
        // タブごとにタイトルを設定
        navigationItem.title = "Blue"
    }


}

ビルドでございます!

目がチカチカする!
けどモーマンタイ!
なぜなら目的を達成したからだ!

あとは好きに ViewContoller をプッシュしたり適当にアプリ作ればOKです。
これで大枠構成を作る工程は以上です。

まとめ

storyboard なしで進める開発かつ NavigationController, TabBarController を取り入れた、よくあるアプリの構成に持っていくところまでのメモでした。
メモまですることかなーとも思いましたが、まぁプロジェクト立ち上げる度に行う設定でもありますしね。
あと私事ですが、現在休職中なので手を少し動かしたかったのもあってですね。

以上です!
お疲れっす!