UITabBarControllerの基本的な使用方法を説明します。

UITabBarControllerはUIViewControllerのサブクラスで画面の下にタブを表示しタップすることで新しい画面を呼び出すことができます。

例えばTwitterアプリでタイムラインとメンション、検索画面を使い分けたい場面で使われる汎用性の高いコントローラーです。

プログラムの作成

UITabBarControllerを使ったアプリを作成する最も簡単な方法はプロジェクト作成時に「Tabbed Application」を選択する方法です。

S 2016 05 17 13 38 30

▲プロジェクトの作成で「iOS > Application」と進み「Tabbed Application」を選択します。この段階で実行すると2つのタブが存在するアプリが実行できます。

タブのアイコン/文字列の変更

タブのアイコンや文字列を変更するにはTab Bar Controller側ではなく、遷移先のView Controller側でTab Bar Itemの属性を設定します。

S 2016 06 27 15 37 27 2

例えばSecond View ControllerのTab Bar Itemを選択し、Attributes Inspectorでアイコンや文字列を設定します。独自のアイコンのほか、MoreやFavorites等iOS組み込みのアイコンを設定することも可能です。

タブの追加

Tab Bar Controllerに新しいタブを追加するには、まずView Controllerを新しく追加しTab Bar Controllerから追加したView ControllerにCtrl + ドラッグします。

S 2016 06 27 15 38 19 2

ポップアップしたSegue選択ウィンドウで「view controllers」を選ぶとTab Bar Controllerに新しいタブが追加されます。

ナビゲーションコントローラーの併用

タブベースのアプリケーションにナビゲーションコントローラを追加して併用することもできます。

画面の下部にタブがあり、それぞれの画面の上部にナビゲーションコントローラが設置された構造は、iOSアプリケーションでは割と使用する頻度の高い構造だと思います。

S 2016 05 17 13 41 11

▲ナビゲーションコントローラを使用したいビューコントローラを選択し、Xcodeのメニューから「Editor > Embed In > Navigation Controller」を選択します。

実行すると先頭の画像のようにFirstViewControllerにナビゲーションコントローラが追加されていることを確認できます。

タブバーアイテムの並び替え

タブバー上のアイテムはドラッグ＆ドロップで入れ替えることができます。

タブバーのタブアイテムの見分け

各タブのView ControllerをリファクタリングしてStoryboard Referenceに変換すると、タブバーのアイコンが全て「Item」に変換されてしまいます。このときは各Storyboard Referenceを選択肢、中に含まれるTabBarItemを編集してラベルやアイコンを設定することができます。