UITabTBarControllerでのタブの切り替え、UINavigationControllerを用いた画面遷移

はじめに

本記事はSwiftにおけるUITabBarControllerでのタブの切り替え、UINavigationControllerを用いた画面遷移について、storyboardでの実装方法、コードでの実装方法をそれぞれご紹介します。

実行環境

この記事は以下の動作環境で動作確認しています。

  • Xcode 11.5
  • Swift 5.2.4

プロジェクト作成

  • Single View Appにてプロジェクトを作成し、Main.storyboardに移動してください
このような画面になれば大丈夫です

TabBarControllerのタブの切り替え

storyboardでの実装

手順としては以下のような形になります

  • ViewControllerを選択し、カーソルを上部に持っていき、EditorからEmbed In → TabBarControllerを選択する
View ControllerにTab Bar Controllerが紐づいた状態になります
  • Command + Shift + Lや右上の+ボタンからUIライブラリーを出し、ViewControllerを配置する
View Controllerをドラッグ&ドロップさせます
新たにView Controllerが配置されました
  • TabBarControllerを選択し、controlキーを押しながら新たに配置したViewControllerに伸ばすといくつかの選択肢が現れます。そこからview controllersを選択
新たに配置したView ControllerもTab Bar Controllerに紐づいた状態になりました
  • 完成(わかりやすくするためにそれぞれのViewControllerに背景色を付けました)

シミュレーターを起動すると(command + Rまたは左上の▶︎)以下のようになります

コードでの実装

コードでの実装ではUITabBarControllerのクラスファイルを作成し、そこにタブとして表示させたいView Controllerを定義する形になります。

手順としては以下の形になります。

① UITabBarControllerのクラスファイルを作成 (ファイル名をMainTabBarControllerとします)

import Foundation
import UIKit

class MainTabBarController: UITabBarController {
    
}

② はじめに表示させるstoryboard(初期状態だとMain.storyboard)に先ほど作成したMainTabBarControllerを紐付けます

右上のCustom ClassのClassに設定します

③ タブとして表示させたいViewControllerを作成します(ここではFirstViewController, SecondViewController, ThirdViewControllerの3つを作成します)

import UIKit

class FirstViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Viewの背景色を設定してます
        view.backgroundColor = .red
    }
}
import UIKit

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Viewの背景色を設定してます
        view.backgroundColor = .orange
    }
}
import UIKit

class ThirdViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Viewの背景色を設定してます
        view.backgroundColor = .green
    }
}

④ ①で作成したMainTabBarControllerに③で作成したViewControllerをセットします

import UIKit

class MainTabBarController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ① ViewControllerのインスタンスの空配列を作成
        var viewControllers: [UIViewController] = []
        
        // ② 各ViewControllerのインスタンスを作成
        let firstViewController = FirstViewController()
        let secondViewController = SecondViewController()
        let thirdViewController = ThirdViewController()
        
        // ③ 各インスタンスのViewControllerに対して、アイコンなどのTabBarItemを設定
        firstViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 1)
        secondViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 2)
        thirdViewController.tabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 3)
        
        // ④ 空配列に各ViewControllerをappend
        viewControllers.append(firstViewController)
        viewControllers.append(secondViewController)
        viewControllers.append(thirdViewController)
        
        // ⑤ setViewControllersにviewControllersを渡す
        self.setViewControllers(viewControllers, animated: false)
    }
}

ここで行っていることは4つあります

  1. ViewControllerのインスタンスのArrayを変数で定義する
  2. 各ViewControllerのインスタンスを作成
  3. 各インスタンスにtabbarItemを設定
  4. setViewControllersに設定したインスタンスを渡す

シミュレーターを起動すると、以下のようになります

UINavigationControllerの画面遷移

storyboardでの実装(Segueを使用)

手順としてはTab Bar Controllerと似ており、以下のような形になります

  • Single View Appでプロジェクトを作成し、Main.storyboardへ移動
  • ViewControllerを選択し、カーソルを上部に持っていき、EditorからEmbed In → Navigation Controllerを選択する
View ControllerにNavigation Controllerが紐づいた状態になります
  • 画面遷移するために必要なボタンを設置します
  • Main.storyboardに新たにView Controllerを配置し、先ほど作成したボタンをcontrolを押しながらViewControllerにドラッグ&ドロップし、Action SegueのShowを選択します
作成したView ContollrerにもNavigation Controllerが紐づいた状態になりました(わかりやすいように背景色を付けてます)

以上でUINavigationControllerを用いて画面遷移ができるようになったため、シミュレーターで確認すると、以下のようになります

コードでの実装(Segueを使わない)

UINavigationControllerをコードで実装する場合、画面遷移先のstoryboard IDが必要になります。以下、手順になります(storyboard上の設定はSeugeを使った画面遷移のボタンを配置するまでは同じです)

※ はじめに生成されているViewController.swiftはFirstViewController.swiftに命名を変更しています

  • 画面遷移先のViewControllerのクラスを作成(ここではSecondViewControllerとします)し、storyboard上のViewControllerと紐付けを行う
  • 画面遷移したいViewControllerにstoryboard IDを設定する
右側のIdentifyのStoryboard IDに設定します(設定する文字は任意のもので大丈夫です)
  • 画面遷移のボタンを押した際にイベントを発火させるアクションを設定します(この中にナビゲーションコントローラーでの画面遷移のコードを記載します)
import UIKit

class FirstViewController: UIViewController {
    
    @IBAction func goNextButton(_ sender: Any) {
        let vc = self.storyboard?.instantiateViewController(identifier: "SecondViewController") as! SecondViewController
        self.navigationController?.pushViewController(vc, animated: true)
    }
    

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

アクションの中で行っていることは、2点あります

  1. 遷移先のViewControllerの取得 → (identifier: “—–“)で取得している文字列は先ほどstoryboardで設定した文字列と同じものを設定してください
  2. navigationController.pushViewControllerに遷移先のViewControllerを指定して画面遷移します

シミュレーターで確認するとSegueで出来上がったものと同じものができていると思います

おわりに

UITabBarControllerやUINavigationControllerは、アプリ開発の多くの場面で利用することになると思います。UITabBarControllerやUINavigationControllerには様々な機能がありますが、今回はそのうちの一つであるタブの切り替えと画面遷移機能をご紹介しました。この記事が皆様の参考になれば幸いです。