読み込み中...

Swiftで学ぶナビゲーションバーの使い方15選

Swift言語を用いたナビゲーションバーの効果的な使い方のイメージ Swift
2023.10.17
この記事は約26分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

アプリを操作する際、ユーザーが最も目にする部分の一つが「ナビゲーションバー」です。

そのナビゲーションバーをSwiftを使用して、どのように扱い、カスタマイズするかは、アプリの使いやすさやデザイン性に大きく影響します。

この記事を読めば、Swiftでのナビゲーションバーの使い方やカスタマイズ方法をマスターすることができるようになります。

初心者から中級者まで、ステップバイステップで詳しく解説していきますので、最後までお付き合いください。

●Swiftとナビゲーションバーとは

SwiftはAppleが開発したプログラミング言語で、iOSやmacOSなどのアプリケーション開発に広く用いられています。

その中で、アプリケーションの操作性を高める重要な要素として「ナビゲーションバー」があります。

○Swift言語の基本

Swiftは、高性能でありながらも読みやすく、安全性に重点を置いた言語設計が特徴です。

CやObjective-Cとの高い互換性も持っており、これまでの知識を活かしながら、新しい言語の特性を活用することができます。

○ナビゲーションバーの役割

ナビゲーションバーは、文字通りアプリケーション内での「ナビゲーション」を支援するためのバーです。

画面上部に表示され、画面のタイトルや遷移ボタン、操作ボタンなどが配置されます。

このバーを効果的に設定し、カスタマイズすることで、ユーザーがアプリを直感的に操作できるようになります。

●ナビゲーションバーの基本的な使い方

ナビゲーションバーはアプリの利用者が簡単にページ間の移動や操作ができるように設計されています。

Swiftを使用してiOSアプリのナビゲーションバーを構築・カスタマイズする方法にはいくつかのステップがあります。

ここでは、基本的な使い方を3つのサンプルコードを用いて詳しく解説します。

○サンプルコード1：ナビゲーションバーの基本的な表示

まずは、ナビゲーションバーを表示する基本的なコードから見ていきましょう。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // ナビゲーションバーのタイトルを設定
        self.title = "基本的な表示"
    }
}

このコードでは、UIViewControllerのサブクラスであるViewControllerクラス内のviewDidLoadメソッドでナビゲーションバーのタイトルを”基本的な表示”としています。

このコードを実行すると、アプリ画面上部に「基本的な表示」というタイトルがついたナビゲーションバーが表示されます。

○サンプルコード2：タイトルの設定と変更

次に、ナビゲーションバーのタイトルを動的に変更する方法を学びましょう。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // 初期のタイトルを設定
        self.title = "初期のタイトル"

        // 3秒後にタイトルを変更する
        DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
            self.title = "変更後のタイトル"
        }
    }
}

ここでは、アプリ起動直後に「初期のタイトル」として表示された後、3秒後に「変更後のタイトル」に自動的に変更されます。

このコードを実行すると、最初は「初期のタイトル」と表示されるナビゲーションバーが、3秒後に「変更後のタイトル」として更新されます。

○サンプルコード3：バックボタンのカスタマイズ

ナビゲーションバーには、画面遷移をサポートするための「バックボタン」があります。

このボタンの表示内容や動作をカスタマイズする方法を見ていきましょう。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // カスタムバックボタンの設定
        let backButton = UIBarButtonItem(title: "戻る", style: .plain, target: self, action: #selector(goBack))
        self.navigationItem.leftBarButtonItem = backButton
    }

    @objc func goBack() {
        // 任意の処理をここに書く（例：前の画面に戻るなど）
    }
}

このコードでは、バックボタンの表示名を「戻る」と指定し、タップされたときの動作もカスタマイズしています。

このコードを実行すると、左上に「戻る」と表示されるカスタムバックボタンが配置され、タップするとgoBackメソッドが呼び出される仕組みになっています。

●ナビゲーションバーの応用的な使い方

ナビゲーションバーはシンプルな表示から高度なカスタマイズまで、様々な使い方が可能です。

Swiftを使用した時にどのようにこれを応用するかについて、いくつかのサンプルコードを交えながら詳しく解説します。

○サンプルコード4：右側にボタンを追加

ナビゲーションバーの右側にアクションボタンを追加する方法です。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let rightButton = UIBarButtonItem(title: "アクション", style: .plain, target: self, action: #selector(doAction))
        self.navigationItem.rightBarButtonItem = rightButton
    }

    @objc func doAction() {
        // ここにボタンが押された時の処理を記述
        print("アクションボタンが押されました")
    }
}

このコードでは、UIBarButtonItemを使用してナビゲーションバーの右側に「アクション」というボタンを追加しています。

ボタンが押されたときの動作も指定しており、コンソールにメッセージが出力されます。

このコードを実行すると、ナビゲーションバーの右側に「アクション」と表示されるボタンが現れ、タップすると指定したdoActionメソッドが呼び出され、「アクションボタンが押されました」という文字がコンソールに表示されます。

○サンプルコード5：複数のボタンを配置

ナビゲーションバーに複数のボタンを配置する方法を学びましょう。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let button1 = UIBarButtonItem(title: "１つ目", style: .plain, target: self, action: #selector(action1))
        let button2 = UIBarButtonItem(title: "２つ目", style: .plain, target: self, action: #selector(action2))
        self.navigationItem.rightBarButtonItems = [button1, button2]
    }

    @objc func action1() {
        // １つ目のボタンが押された時の処理
        print("１つ目のボタンが押されました")
    }

    @objc func action2() {
        // ２つ目のボタンが押された時の処理
        print("２つ目のボタンが押されました")
    }
}

上記のコードは、ナビゲーションバーの右側に「１つ目」と「２つ目」という２つのボタンを追加しています。

それぞれのボタンには異なるアクションを割り当てており、タップするとそれぞれのメソッドが実行されます。

このコードを実行すると、ナビゲーションバーの右側に２つのボタンが表示されます。

それぞれのボタンをタップすると、「１つ目のボタンが押されました」や「２つ目のボタンが押されました」という文字がコンソールに表示されることを確認できます。

○サンプルコード6：カスタムビューを組み込む

Swiftを使用する際、ナビゲーションバーにカスタムビューを組み込むことで、オリジナリティあるデザインや機能を実装することができます。

特定のロゴやカスタムデザインのボタン、情報表示エリアなど、標準的なナビゲーションバーでは実現できない独自のレイアウトやデザインを取り入れることが可能となります。

ここでは、ナビゲーションバーにカスタムビューを追加するサンプルコードを紹介します。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // カスタムビューの生成
        let customView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
        customView.backgroundColor = UIColor.blue

        // ラベルの追加
        let label = UILabel(frame: customView.bounds)
        label.text = "カスタムタイトル"
        label.textColor = UIColor.white
        label.textAlignment = .center
        customView.addSubview(label)

        // ナビゲーションバーの中央にカスタムビューを配置
        self.navigationItem.titleView = customView
    }
}

このコードでは、UIViewを用いてカスタムビューを生成しています。

その上に、テキスト「カスタムタイトル」を持つラベルを追加し、そのカスタムビューをナビゲーションバーの中央部分に配置しています。背景色やテキストの色などもカスタマイズしています。

このコードを実行すると、ナビゲーションバーの中央に青色の背景を持ち、白色の文字で「カスタムタイトル」と表示されるカスタムビューが現れます。

○サンプルコード7：トランジションアニメーションの適用

アニメーションを利用してナビゲーションバーのトランジションをカスタマイズすることも、Swiftの強力な機能を活用することで容易に実現できます。

独自のアニメーションを追加することで、アプリのユーザビリティやエンゲージメントを向上させることが期待できます。

ここでは、トランジションアニメーションを適用するサンプルコードを紹介します。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @objc func moveToNextPage() {
        let nextViewController = UIViewController()
        nextViewController.view.backgroundColor = UIColor.white
        nextViewController.title = "次のページ"

        // トランジションアニメーションの設定
        let transition = CATransition()
        transition.duration = 0.5
        transition.type = CATransitionType.push
        transition.subtype = CATransitionSubtype.fromRight
        navigationController?.view.layer.add(transition, forKey: kCATransition)

        navigationController?.pushViewController(nextViewController, animated: false)
    }
}

このコードでは、新しいページへの遷移時にトランジションアニメーションを適用しています。

CATransitionを使用してアニメーションのタイプや持続時間を設定し、ページ遷移の際にそのアニメーションを実行します。

このコードを実行してmoveToNextPageメソッドを呼び出すと、新しいページへの遷移が右からのプッシュアニメーションとして表示されます。

●ナビゲーションバーのさらなる応用例

Swiftを用いたナビゲーションバーの設定には、基本的な表示やカスタムビューの組み込みだけでなく、さらに進んだ応用例も存在します。

これらの応用例を知ることで、アプリの操作性やデザイン性を向上させることができます。

○サンプルコード8：サブメニューの追加

ナビゲーションバーにサブメニューを追加することで、より多くの操作をユーザーに提供できます。

ここでは、ナビゲーションバーにドロップダウンスタイルのサブメニューを追加するサンプルコードを紹介します。

import UIKit

class ViewController: UIViewController {
    let menuItems = ["項目1", "項目2", "項目3"]

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

    func setupNavigationBar() {
        let menuButton = UIBarButtonItem(title: "メニュー", style: .plain, target: self, action: #selector(showMenu))
        self.navigationItem.rightBarButtonItem = menuButton
    }

    @objc func showMenu() {
        // アクションシート形式でメニューを表示
        let alertController = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
        for item in menuItems {
            alertController.addAction(UIAlertAction(title: item, style: .default, handler: nil))
        }
        alertController.addAction(UIAlertAction(title: "キャンセル", style: .cancel, handler: nil))
        present(alertController, animated: true, completion: nil)
    }
}

このコードでは、ナビゲーションバーの右側に「メニュー」というボタンを配置し、そのボタンがタップされた際にアクションシート形式でメニュー項目を表示しています。

このコードを実行すると、ナビゲーションバーの右上に「メニュー」というボタンが配置され、そのボタンをタップすると、項目1、項目2、項目3の3つのメニュー項目がアクションシート形式で表示されます。

○サンプルコード9：スクロール時の動的変化

ユーザーがページをスクロールするとナビゲーションバーの色や透明度が動的に変化するという挙動は、一般的なアプリのUIにおいて非常に魅力的です。

下記のサンプルコードでは、ユーザーがページをスクロールするとナビゲーションバーの背景色が動的に変わる機能を実装しています。

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    var scrollView: UIScrollView!

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

    func setupScrollView() {
        scrollView = UIScrollView(frame: self.view.bounds)
        scrollView.contentSize = CGSize(width: self.view.bounds.width, height: self.view.bounds.height * 2)
        scrollView.delegate = self
        view.addSubview(scrollView)
    }

    // スクロールが発生する度に呼び出されるデリゲートメソッド
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        if offsetY > 100 {
            self.navigationController?.navigationBar.backgroundColor = UIColor.red
        } else {
            self.navigationController?.navigationBar.backgroundColor = UIColor.blue
        }
    }
}

このコードでは、UIScrollViewのスクロールオフセットに基づき、ナビゲーションバーの背景色を動的に変更しています。

このコードを実行すると、ページをスクロールすると、ナビゲーションバーの背景色が青から赤へと変わる動きを観察することができます。

○サンプルコード10：ユーザーインタラクションの反映

ユーザーからの入力やアクションをナビゲーションバーに反映させることは、アプリの対話性を高める上で非常に重要です。

ここでは、ユーザーがスイッチを操作することで、ナビゲーションバーの表示・非表示を切り替えるサンプルコードを紹介します。

import UIKit

class ViewController: UIViewController {
    var switchControl: UISwitch!

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

    func setupSwitchControl() {
        switchControl = UISwitch(frame: CGRect(x: (view.bounds.width - 60) / 2, y: view.bounds.height / 2 - 30, width: 60, height: 30))
        switchControl.addTarget(self, action: #selector(switchChanged), for: .valueChanged)
        view.addSubview(switchControl)
    }

    @objc func switchChanged() {
        if switchControl.isOn {
            navigationController?.setNavigationBarHidden(false, animated: true)
        } else {
            navigationController?.setNavigationBarHidden(true, animated: true)
        }
    }
}

このコードでは、中央に配置されたスイッチをオン・オフにすることで、ナビゲーションバーの表示・非表示を切り替えることができます。

このコードを実行すると、スイッチを操作することでナビゲーションバーがアニメーションと共に表示・非表示になる機能を確認することができます。

●カスタマイズの方法

Swiftでのナビゲーションバーのカスタマイズは、アプリケーションのブランドやデザインを強化するための鍵となります。

ユーザーエクスペリエンスを向上させるために、ナビゲーションバーを独自に設計する方法をいくつか詳しく解説していきます。

○サンプルコード11：背景色やテキストカラーの変更

ナビゲーションバーの背景色やテキストカラーを変更することで、アプリの雰囲気やブランドカラーを反映させることができます。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // ナビゲーションバーの背景色を変更
        self.navigationController?.navigationBar.barTintColor = UIColor.green

        // ナビゲーションバーのテキストカラーを変更
        self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
    }
}

このコードでは、barTintColorを使ってナビゲーションバーの背景色を緑に変更し、titleTextAttributesを使ってタイトルのテキストカラーを白に変更しています。

結果、緑の背景に白いタイトルテキストのナビゲーションバーが表示されます。

○サンプルコード12：シャドウや境界線のカスタマイズ

ナビゲーションバーの境界線やシャドウをカスタマイズすることで、デザインに深みや独自性を持たせることが可能です。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // ナビゲーションバーの境界線を非表示にする
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

        // シャドウを追加する
        self.navigationController?.navigationBar.layer.shadowColor = UIColor.black.cgColor
        self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 2.0)
        self.navigationController?.navigationBar.layer.shadowRadius = 4.0
        self.navigationController?.navigationBar.layer.shadowOpacity = 0.5
        self.navigationController?.navigationBar.layer.masksToBounds = false
    }
}

このコードでは、shadowImageとsetBackgroundImageを使用して、ナビゲーションバーの境界線を非表示にしています。

その後、layerのプロパティを使用して、ナビゲーションバーにシャドウを追加しています。

結果、シャドウが付与されたナビゲーションバーが表示され、より立体的な印象を持つデザインになります。

○サンプルコード13：フォントやテキストスタイルの変更

Swiftでナビゲーションバーのタイトルのフォントやテキストスタイルを変更することは、アプリのブランドやデザインに合わせてユーザーエクスペリエンスを向上させる効果的な方法の一つです。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // フォントとテキストスタイルをカスタマイズ
        if let customFont = UIFont(name: "AvenirNext-Bold", size: 20) {
            self.navigationController?.navigationBar.titleTextAttributes = [
                .font: customFont,
                .foregroundColor: UIColor.blue
            ]
        }
    }
}

このコードではUIFontを使って”AvenirNext-Bold”というフォントをサイズ20で適用し、テキストの色を青色に変更しています。

この変更を行うことで、ナビゲーションバーのタイトルが青色の”AvenirNext-Bold”フォントで表示されます。

○サンプルコード14：アイコンやロゴの追加

ナビゲーションバーにアイコンやロゴを追加することで、アプリのブランドを強調したり、ユーザーに追加の情報や機能を提供することができます。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // ナビゲーションバーにロゴを追加
        let logo = UIImage(named: "AppLogo")
        let imageView = UIImageView(image: logo)
        self.navigationItem.titleView = imageView
    }
}

このコードでは、アイコンやロゴを含む画像をUIImageで取得し、UIImageViewにセットしてから、navigationItemのtitleViewプロパティに代入しています。

これにより、ナビゲーションバーの中央部分にロゴが表示されます。

●注意点と対処法

Swiftでナビゲーションバーをカスタマイズする際、多くの開発者が直面するいくつかの一般的な問題や注意点があります。

これらの問題に対する対処法やヒントを、サンプルコードを交えて詳しく説明します。

○ナビゲーションバーの高さとレイアウト

ナビゲーションバーの高さはデフォルトで一定の値が設定されていますが、カスタマイズすることで変更することも可能です。

しかし、高さを変更する際には、その影響を他のUI要素に与えないよう注意が必要です。

if let navigationBar = self.navigationController?.navigationBar {
    var frame = navigationBar.frame
    frame.size.height = 80 // 高さを80に変更
    navigationBar.frame = frame
}

このコードでは、ナビゲーションバーの高さを80に変更しています。

しかし、この変更により、下にあるUI要素がナビゲーションバーに隠れる可能性があるため、レイアウトの調整が必要となることが考えられます。

○オーバーレイや重なりの問題

ナビゲーションバーは画面の上部に固定表示されるため、他のUI要素との重なりやオーバーレイが発生することがあります。

これは特に、ナビゲーションバーの透明度を変更した際に顕著になります。

self.navigationController?.navigationBar.isTranslucent = true

このコードでは、ナビゲーションバーの透明度を変更しています。

透明度を変更すると、背景のコンテンツが見えるようになるため、コンテンツとのバランスを取る必要があります。

○レスポンシブデザインの考慮点

デバイスのサイズや向き（横向き、縦向き）に応じて、ナビゲーションバーのデザインやレイアウトが適切に表示されるようにすることは非常に重要です。

特に、異なるデバイスでの表示を考慮する際、Auto LayoutやSize Classを使用すると、効果的にレスポンシブなデザインを実現できます。

Swiftでのナビゲーションバーのカスタマイズは、アプリの見た目やユーザビリティを向上させるための強力な手段ですが、上記のような注意点を意識しながら進めることで、より良いユーザーエクスペリエンスを実現することができます。

●ナビゲーションバーのトリックとコツ

Swiftでナビゲーションバーを扱う際、単なる基本的な使い方を超え、さらに洗練されたUIやユーザーエクスペリエンスを提供したいと思うことがあります。

そんな時に役立つトリックやコツを、サンプルコードと合わせてご紹介します。

○サンプルコード15：非表示や半透明の設定

ナビゲーションバーを非表示にしたり、半透明に設定することで、コンテンツをより引き立てることができます。

// ナビゲーションバーを非表示にする
self.navigationController?.setNavigationBarHidden(true, animated: true)

// ナビゲーションバーを半透明にする
self.navigationController?.navigationBar.isTranslucent = true

このコードでは、最初にナビゲーションバーを非表示にしています。

次に、半透明に設定しています。

これにより、背景のコンテンツが透けて見えるようになり、よりデザイン性の高いUIを実現することができます。

○ユーザビリティの向上のためのヒント

ナビゲーションバーのデザインや配置だけでなく、ユーザビリティも非常に重要です。

例えば、ボタンのタップ領域を大きく取る、明確なアイコンやテキストを使用するなどの工夫が求められます。

let customButton = UIButton(frame: CGRect(x: 0, y: 0, width: 60, height: 44))
customButton.setTitle("戻る", for: .normal)
customButton.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)

let barButtonItem = UIBarButtonItem(customView: customButton)
self.navigationItem.leftBarButtonItem = barButtonItem

このコードでは、カスタムボタンを作成し、そのボタンをナビゲーションバーの左側に配置しています。

このようにカスタムボタンを使用することで、タップ領域を調整したり、独自のデザインを適用することが可能です。

まとめ

Swiftを用いたナビゲーションバーのカスタマイズについて、基本的な使い方から高度なトリック、そしてユーザビリティを向上させるコツまで幅広く解説してきました。

ナビゲーションバーはアプリの使いやすさやデザインの要となる部分です。

今回学んだ知識を活かし、ユーザーにとって使いやすく、同時にデザイン性の高いアプリケーションを開発していきましょう。

Swiftの柔軟性と高いカスタマイズ性を最大限に活用することで、さまざまなUIやUXを実現することができます。

今回紹介したサンプルコードやコツは、あくまで一部に過ぎません。

日々の開発の中で、新たな発見やアイディアを取り入れながら、独自のナビゲーションバーを作成してください。

ユーザーエクスペリエンスを向上させるためには、常にユーザーの立場に立ってアプリを考えることが大切です。

ナビゲーションバーのデザインや機能だけでなく、アプリ全体の使いやすさを常に意識しながら開発を進めていきましょう。