読み込み中...

SwiftでのTabBar作成のたった10の方法

Swiftと、「TabBer作成」のテキスト Swift
2023.10.15
この記事は約26分で読めます。

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

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

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

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

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

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

はじめに

TabBarは、多くのアプリで使用される機能の一つで、ユーザーが簡単に画面を切り替えることができるコンポーネントです。

しかし、SwiftでのTabBarの実装やカスタマイズは初心者にとって難しいと感じるかもしれません。

この記事を読めば、SwiftでのTabBar作成の手法が身につき、アプリの使いやすさを向上させることができます。

●SwiftとTabBarの基本

○Swiftの概要

Swiftは、Appleが提供するプログラミング言語で、iOSやmacOS、watchOS、tvOSといったAppleの製品向けのアプリケーションを開発するための言語です。

その特徴として、高速な実行速度や、読みやすく、書きやすいシンタックスが挙げられます。

Swiftを使用することで、効率的に、そして安全にアプリケーションを開発することができます。

○TabBarとは？

TabBarは、スクリーンの下部に配置されるボタンのグループで、ユーザーがこれをタップすることでアプリ内の異なるセクションや機能にアクセスすることができます。

主に、アプリ内の主要なナビゲーションとして使用されます。

iOSにおけるTabBarのデフォルトのデザインは、アイコンとテキストの組み合わせで、選択されているタブは色が変わるなどのハイライトが表示されるのが一般的です。

このTabBarをSwiftを使って実装する方法、そしてそれをさらにカスタマイズしていく方法を、この記事で詳しく解説していきます。

●TabBarの作成方法

アプリ開発において、ユーザーの操作性を向上させるためには、画面遷移をスムーズにすることが重要です。

そのための手段として、多くのアプリではTabBarが採用されています。

ここでは、Swiftを使ったTabBarの基本的な作成方法から始め、徐々にカスタマイズ方法も深掘りしていきます。

○サンプルコード1：基本的なTabBarの実装

まずは、Swiftでの最も基本的なTabBarの作成方法を見ていきましょう。

ここでは、２つのタブを持つシンプルなTabBarを実装するサンプルコードを紹介します。

import UIKit

class ViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .red
        firstViewController.tabBarItem.title = "First"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .blue
        secondViewController.tabBarItem.title = "Second"

        self.viewControllers = [firstViewController, secondViewController]
    }
}

このコードでは、2つのUIViewControllerを作成しています。

それぞれの背景色を異なるものに設定し、TabBarのタイトルもそれぞれ”First”と”Second”としています。

最後に、これらのUIViewControllerをviewControllersプロパティにセットすることで、タブとして表示されるようにしています。

このコードを実行すると、画面下部に”First”と”Second”の2つのタブが表示され、タブをタップすることで、それぞれの背景色が変わることが確認できます。

○サンプルコード2：TabBarのアイコンとテキストを設定

次に、TabBarのアイコンとテキストの設定方法を見ていきましょう。

下記のサンプルコードでは、タブにアイコンを追加し、テキストも変更しています。

import UIKit

class IconViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .green
        firstViewController.tabBarItem.title = "Home"
        firstViewController.tabBarItem.image = UIImage(named: "homeIcon")

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .yellow
        secondViewController.tabBarItem.title = "Settings"
        secondViewController.tabBarItem.image = UIImage(named: "settingsIcon")

        self.viewControllers = [firstViewController, secondViewController]
    }
}

このコードでは、タブのテキストを”Home”と”Settings”に変更し、それぞれに”homeIcon”と”settingsIcon”の画像をアイコンとして設定しています。

UIImage(named:)を使って、アイコン画像を指定していますので、アセットカタログに該当の画像を追加しておく必要があります。

このコードを実行すると、タブにアイコンとテキストが併用された状態で表示されます。

○サンプルコード3：TabBarの位置を変更

iOSのデフォルトの設定では、TabBarは画面の下部に配置されています。

しかし、デザインの要件やユーザビリティの向上を目指して、TabBarの位置を上部に変更したい場合もあるでしょう。

ここでは、TabBarの位置を上部に変更する方法を解説します。

下記のサンプルコードは、UITabBarControllerのサブクラスを作成し、TabBarの位置を上部に変更する方法を表しています。

import UIKit

class TopTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // タブの初期設定
        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .purple
        firstViewController.tabBarItem.title = "上部1"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .orange
        secondViewController.tabBarItem.title = "上部2"

        self.viewControllers = [firstViewController, secondViewController]

        // TabBarの位置を上部に変更
        tabBar.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: tabBar.frame.size.height)
    }
}

このコードでは、２つのUIViewControllerを作成し、それぞれの背景色とTabBarのタイトルを設定しています。

そして、TabBarのframeプロパティを使用して、位置を上部に変更しています。具体的には、CGRectのy値を0に設定することで、画面の最上部にTabBarを移動させています。

このコードを実行すると、画面上部にTabBarが表示され、下部には表示されないことが確認できます。

○サンプルコード4：TabBarの背景色をカスタマイズ

アプリのデザインやブランドカラーに合わせて、TabBarの背景色をカスタマイズしたいことはよくあります。

Swiftでは、TabBarのtintColorプロパティを利用して、簡単に背景色を変更することができます。

ここでは、TabBarの背景色を深緑色に変更するサンプルコードを紹介します。

import UIKit

class ColorfulTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .white
        firstViewController.tabBarItem.title = "タブ1"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .white
        secondViewController.tabBarItem.title = "タブ2"

        self.viewControllers = [firstViewController, secondViewController]

        // TabBarの背景色を深緑色に設定
        tabBar.barTintColor = UIColor(red: 0, green: 0.5, blue: 0, alpha: 1.0)
    }
}

このコードでは、tabBarのbarTintColorプロパティを使用して、背景色を深緑色に変更しています。

UIColorのred:green:blue:alpha:メソッドを使用して、具体的な色の値を指定しています。

このコードを実行すると、TabBarの背景が深緑色に変わることが確認できます。

○サンプルコード5：TabBarの選択時のアニメーションを追加

TabBarのアイテムをタップしたときにアニメーションを追加することで、ユーザー体験を向上させることができます。

下記のサンプルコードは、TabBarのアイテムを選択したときに、縮小してから元のサイズに戻るアニメーションを追加する方法を表しています。

import UIKit

class AnimatedTabBarController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.delegate = self

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .gray
        firstViewController.tabBarItem.title = "アニメ1"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .lightGray
        secondViewController.tabBarItem.title = "アニメ2"

        self.viewControllers = [firstViewController, secondViewController]
    }

    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        guard let tabBarIndex = tabBarController.selectedIndex, 
              let tabView = tabBar.subviews[tabBarIndex + 1] else { return }

        UIView.animate(withDuration: 0.1, animations: {
            tabView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
        }) { _ in
            UIView.animate(withDuration: 0.1) {
                tabView.transform = CGAffineTransform.identity
            }
        }
    }
}

このコードでは、UITabBarControllerDelegateプロトコルのtabBarController(_:didSelect:)メソッドを実装しています。

選択したタブのインデックスを取得し、該当するタブのビューを縮小するアニメーションを追加しています。

その後、元のサイズに戻るアニメーションを追加しています。このコードを実行すると、タブを選択するたびにアニメーションが再生されることが確認できます。

●TabBarの応用例

SwiftでのTabBarのカスタマイズは、基本的な操作からさまざまな応用例まで幅広く扱うことができます。

ここでは、TabBarのさらに進んだ応用例を取り上げ、具体的なサンプルコードとともにその実装方法を解説します。

○サンプルコード6：TabBarにバッジを表示

アプリのタブに新しい通知や未読のメッセージなどの情報を伝えたい場合、バッジを利用すると視覚的にユーザーに伝えることができます。

下記のコードは、特定のタブにバッジを表示しています。

import UIKit

class BadgeTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .blue
        firstViewController.tabBarItem.title = "通知"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .green
        secondViewController.tabBarItem.title = "メッセージ"

        self.viewControllers = [firstViewController, secondViewController]

        // 通知タブにバッジを設定
        firstViewController.tabBarItem.badgeValue = "3"
    }
}

このコードでは、最初のタブ（通知タブ）に「3」というバッジを表示しています。

tabBarItemのbadgeValueプロパティに文字列を設定することで、簡単にバッジを表示することができます。

○サンプルコード7：TabBarを非表示にする

ある画面ではTabBarを非表示にして、フルスクリーンでコンテンツを表示したい場合があります。

下記のサンプルコードは、画面遷移時にTabBarを非表示にしています。

import UIKit

class HideTabBarController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .yellow
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // TabBarを非表示にする
        self.tabBarController?.tabBar.isHidden = true
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        // TabBarを再表示する
        self.tabBarController?.tabBar.isHidden = false
    }
}

このコードでは、viewWillAppearメソッド内でTabBarを非表示にし、viewWillDisappearメソッド内で再表示しています。

画面が表示される際にTabBarを非表示にし、他の画面に遷移する前に再表示することで、スムーズな画面遷移を実現しています。

○サンプルコード8：TabBarの選択時に特定の処理を実行

TabBarのアイテムを選択したときに、特定の処理を行いたい場面は多々あります。

例えば、ユーザーがあるタブを選択したときにデータの更新を行う、あるいは新しい画面を表示するなどの操作が考えられます。

下記のコードでは、TabBarのアイテムを選択した際にアラートを表示するシンプルな例を表しています。

import UIKit

class TabBarController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.delegate = self

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .red
        firstViewController.tabBarItem.title = "ホーム"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .blue
        secondViewController.tabBarItem.title = "設定"

        self.viewControllers = [firstViewController, secondViewController]
    }

    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        if viewController is SecondViewController {
            let alert = UIAlertController(title: "選択確認", message: "設定タブを選択しました。", preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default))
            viewController.present(alert, animated: true, completion: nil)
        }
    }
}

このコードを使用すると、ユーザーが設定タブを選択した際に、「設定タブを選択しました。」というアラートメッセージが表示されます。

具体的には、UITabBarControllerDelegateのtabBarController(_:didSelect:)メソッドをオーバーライドし、選択されたviewControllerの型を確認して条件分岐を行っています。

○サンプルコード9：TabBarのカスタムビューを作成

デフォルトのTabBarデザインだけではなく、オリジナルのデザインや動きを取り入れたい場合もあるでしょう。

下記のコードは、カスタムビューを使用してTabBarをカスタマイズする方法を表しています。

import UIKit

class CustomTabBarController: UITabBarController {

    let customView: UIView = {
        let view = UIView(frame: .zero)
        view.backgroundColor = UIColor.black.withAlphaComponent(0.8)
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .white
        firstViewController.tabBarItem.title = "タイムライン"

        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .gray
        secondViewController.tabBarItem.title = "プロフィール"

        self.viewControllers = [firstViewController, secondViewController]

        tabBar.addSubview(customView)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        customView.frame = tabBar.bounds
    }
}

このコードにより、タブバー上に半透明の黒色のビューが表示されます。

このように、カスタムビューを使用することで、オリジナルのデザインやアニメーションをTabBarに追加することが可能です。

○サンプルコード10：TabBarのアイコンを動的に変更

TabBarのアイコンは固定ではなく、動的に変更することも可能です。

例えば、ユーザーのアクションやアプリの状態に応じてアイコンを変更したい場面が考えられます。

下記のコードは、ボタンのタップによってTabBarのアイコンを変更する例を表しています。

import UIKit

class DynamicIconViewController: UIViewController {

    let changeIconButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("アイコン変更", for: .normal)
        button.addTarget(self, action: #selector(changeIcon), for: .touchUpInside)
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .lightGray
        view.addSubview(changeIconButton)
        changeIconButton.center = view.center
    }

    @objc func changeIcon() {
        let newIcon = UITabBarItem(title: "新しいアイコン", image: UIImage(named: "newIcon"), selectedImage: nil)
        tabBarController?.tabBar.items?[1] = newIcon
    }
}

このコードでは、「アイコン変更」というボタンをタップすることで、TabBarの2番目のアイコンが「新しいアイコン」というタイトルに変更されます。

このように、動的な振る舞いを取り入れることで、ユーザーエクスペリエンスを向上させることが期待できます。

●注意点と対処法

TabBarの利用においては、多くの便益が享受できますが、同時にいくつかの注意点とそれに伴う対処法も存在します。

ここでは、それらの問題と、それを解決するための具体的な手法について説明します。

○TabBarの常見のトラブルとその解決策

TabBarを使用する上で、頻出するトラブルの一例として、アイテムのアイコンやテキストの表示が適切に更新されない、タップ反応が不安定、表示されるビューコントローラの内容が意図したものと異なる、などがあります。

例えば、下記のコードはTabBarのアイテムをタップした際に表示されるビューコントローラの内容が、更新ボタンを押しただけで変更されてしまう、というトラブルの解消法を表しています。

import UIKit

class UpdateViewController: UIViewController {

    // 更新ボタン
    let updateButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("更新", for: .normal)
        button.addTarget(self, action: #selector(updateContent), for: .touchUpInside)
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        view.addSubview(updateButton)
        updateButton.center = view.center
    }

    // 更新ボタンがタップされた際の処理
    @objc private func updateContent() {
        // 内容の更新処理
    }

    // TabBarのアイテムが選択された際の処理
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // 内容の更新処理は、更新ボタンがタップされた場合のみ行う
        // TabBarのアイテムが選択されても内容は更新されない
    }
}

このコードでは、viewWillAppearメソッド内でビューの内容の更新を行わず、更新ボタンがタップされた場合のみupdateContentメソッドを呼び出して内容を更新しています。

これにより、TabBarのアイテムをタップしただけでビューの内容が更新されるというトラブルを防げます。

その他にも、TabBarのアイコンやテキストが正しく表示されないトラブルに対しては、アイコンとテキストの設定方法を見直したり、アイテムの更新タイミングを調整するなどの対処法が考えられます。

具体的には、アイコンやテキストの設定はUITabBarItemのインスタンスを利用して正確に行い、更新はビューコントローラのライフサイクルに合わせて適切なタイミングで行うようにします。

●カスタマイズ方法

TabBarの魅力の一つは、豊富なカスタマイズオプションにあります。

Swiftを使用してTabBarを実装する際には、見た目や機能面で多くのカスタマイズが可能です。

ここでは、TabBarのデザインや機能面での主なカスタマイズ方法について、具体的なサンプルコードとともに解説します。

○デザイン面でのカスタマイズ

TabBarのデザインは、アイコンの色やサイズ、背景色、テキストのフォントや色など、多岐にわたります。

下記のサンプルコードは、TabBarの背景色と選択されたアイテムの色を変更する方法を表しています。

import UIKit

class CustomTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // TabBarの背景色を変更
        tabBar.barTintColor = UIColor.lightGray

        // 選択されたアイテムの色を変更
        tabBar.tintColor = UIColor.blue
    }
}

このコードを使用すると、TabBarの背景色が薄い灰色になり、選択されたアイテムの色が青色に変わります。

○機能面でのカスタマイズ

TabBarの機能面でのカスタマイズは、特定のアイテムを選択した際の振る舞いや、アイテム間の移動のアニメーションなど、ユーザーエクスペリエンスを向上させるための方法が考えられます。

下記のサンプルコードは、TabBarのアイテムを選択した際に特定のアクションを実行する方法を表しています。

import UIKit

class CustomTabBarController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self
    }

    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        if viewController is DesiredViewController {
            // DesiredViewControllerが選択された際の特定のアクション
            print("特定のビューコントローラが選択されました。")
        }
    }
}

このコードを利用することで、DesiredViewControllerが選択された際にコンソールにメッセージが出力されます。

このようにして、特定のタブを選択したときの振る舞いをカスタマイズできます。

まとめ

Swiftを用いたTabBarの実装は、アプリのナビゲーションを効果的に提供するための鍵となる要素です。

この記事を通じて、TabBarの基本的な実装方法から、さまざまなカスタマイズの方法までを学ぶことができたかと思います。

デザイン面から機能面まで、TabBarは多岐にわたるカスタマイズが可能であり、それによってユーザー体験を向上させることができます。

Swiftでのアプリ開発を進める中で、TabBarの実装やカスタマイズが難しく感じることもあるかと思いますが、この記事のサンプルコードや解説を参考にして、効果的なTabBarの実装に挑戦してみてください。

特に初心者の方にとっても、今回の内容を基に進めていくことで、TabBarの理解を深める手助けとなることを願っています。