【Swift】Storyboard不要！コードだけでiOSにナビゲーションバーを追加する方法

はじめに

iOSアプリ開発では、Storyboardを使わずにコードだけでUIを構築したいケースがよくあります。この記事では、Swiftを使ってプログラム的にナビゲーションバー（UINavigationBar）を追加する手順を、順を追って分かりやすく解説します。

実装の手順

ここからの処理は、ViewControllerのviewWillLayoutSubviewsメソッド内に記述していきます。

ステップ1：現在のViewの幅を取得する

まず、画面全体にナビゲーションバーを表示させるため、現在のビューの幅を取得します。

let width = self.view.frame.width

ステップ2：ナビゲーションバーを生成する

取得した幅と、ナビゲーションバーのデフォルトの高さである44pxを指定して、UINavigationBarのインスタンスを作成します。

let navigationBar: UINavigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: width, height: 44))

ステップ3：Viewにナビゲーションバーを追加する

最後に、生成したナビゲーションバーをビューに追加すれば完了です。

self.view.addSubview(navigationBar)

応用編：タイトルとボタンを追加する

基本の実装ができたら、さらに拡張してナビゲーションバーにタイトルやボタンを配置してみましょう。以下は、タイトルと「完了」ボタンを右側に追加した完全な実装例です。

class ViewController: UIViewController {
    override func viewWillLayoutSubviews() {
        let width = self.view.frame.width
        let navigationBar: UINavigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: width, height: 44))
        self.view.addSubview(navigationBar)

        let navigationItem = UINavigationItem(title: "Navigation bar")
        let doneBtn = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done,
                                      target: nil,
                                      action: #selector(selectorX))
        navigationItem.rightBarButtonItem = doneBtn

        navigationBar.setItems([navigationItem], animated: false)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @objc func selectorX() { }
}

コードのポイント

• UINavigationItem(title:)でナビゲーションバーに表示するタイトルを設定できます。
• UIBarButtonItem(barButtonSystemItem: .done, ...)を使うと、iOS標準の「完了」ボタンを簡単に生成できます。
• rightBarButtonItemに代入することで、バーの右側にボタンが配置されます。
• @objc属性を付けたメソッドをセレクタとして指定し、ボタンタップ時のアクションを受け取ります。

実行結果

このコードを実行すると、画面上部に「Navigation bar」というタイトルを持つナビゲーションバーが表示され、その右側に「完了」ボタンが配置されます。

まとめ

Storyboardに依存せずコードだけでナビゲーションバーを追加できると、UIの動的な生成やレイアウトの細かい制御がしやすくなります。今回紹介したviewWillLayoutSubviewsでの実装方法をベースに、色やフォントのカスタマイズなどにもぜひ挑戦してみてください。