【Swift】Tab Bar Controllerの使い方。複数画面と接続し、タブバーのボタンで画面を切り替える。(Swift 2.1、XCode 7.2)

2020年6月16日

Tab Bar Controllerとは

本記事ではSwiftで使える部品のUITabBarController(以下、タブバーコントローラー)について説明する。

Tab Bar Controller

 

タブバーコントローラーとは、複数画面と接続し、UITabBar(以下、タブバー)に並べられたボタンで画面の切り替えを行う部品である。前回の記事でタブバー単体で画面切り替えを行う実装を紹介したが、タブバーコントローラーを使うと、画面の追加削除が楽にできる。⇒「タブバーの記事

 

タブバーコントローラーを使ってみる

では、タブバーコントローラーを使って画面の切り替えを行うものを実装してみよう。

以降の手順を開始する前のXcodeプロジェクトをGitHubに置いたので、手順を試してみる人はご利用されたし。
⇒「テスト用プロジェクト

 

事前準備では、ストーリーボードに3つの画面を配置し、昼、夕方、夜の画像を画面いっぱいに表示した。この3つの画面をタブバーコントローラーを使って切り替えるものをこれから実装する。

テスト開始前のストーリーボード

 

ストーリーボードにある昼のビューコントローラーを選択したあとに、メニューの「Editor」⇒「Embed In」⇒「Tab Bar Controller」を選択する。

メニューからTab Bar Controllerを追加する

 

すると、下図のように昼画面に接続したタブバーコントローラーが表示される。

Ctrlキーを押しながらタブバーコントローラーをドラッグ&ドロップで夕方画面まで運んで吹き出しのメニューを表示させて「view controllers」を選択する。

同じようにして、タブバーコントローラーを夜画面まで運んで吹き出しのメニューを表示させ、「view controllers」を選択する。これでタブコントローラーが昼、夕方、夜の3つの画面と接続され、夕方と夜画面にもタブバーが表示されるようになった。

Tab Bar Controllerと夕方画面を接続する

 

赤枠のタブバーアイテムを選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示する。設定項目のTitleに「昼」、Imageに「day.png」、Tagに「0」を入力する。

続いて、紫枠のタブバーアイテムを選択し、設定項目のTitleに「夕方」、Imageに「evening.png」、Tagに「1」を入力する。黄枠のタブバーアイテムを選択し、設定項目のTitleに「夜」、Imageに「night.png」、Tagに「2」を入力する。これでタブバーに表示されるボタンの外観が変更された。

Tab Bar Itemのアトリビュートインスペクタ

 

シュミレーターを起動すると以下の動画のようになる。何とタブバーコントローラーを使えばコード無しで画面切り替えまでが実装できるのだ。

ボタンにバッチを表示する

タブバーのボタンの右上にバッチを付けることができる。バッチとは、未読や新着情報がある場合に、ユーザーに気づいてもらうためにボタンを目立たせるアクセサリーのことである。

バッチの表示例

 

では、ボタンにバッチを表示し、ボタンが選択されたらバッチを消す動きを実装してみよう。

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestTabBarController」、Subclass ofに「UITabBarController」を入力し、Nextボタンを押す。

クラス名を入力する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

保存先を指定する

 

ストーリーボードを開き、下図赤枠のタブバーコントローラーを選択する。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Classに「TestTabBarController」を入力する。これでタブバーコントローラーにカスタムクラスが使われるようになった。

Tab Bar Controllerにカスタムクラスを設定する

 

TesstTabBarController.swiftを以下のコードに変更する。

初期化時にボタンにバッチをつけておき、デリゲートメソッドの「ボタン押下時の呼び出しメソッド」で押されたボタンのバッチを消している。

ちなみに、スーパークラスのUITabBarControllerでUITabBarDelegateが適用されているので、サブクラスで適用したり、デリゲート先を指定する必要は無い。

 

以下は実際のプレイ動画