完全に理解する Storyboard & UIKit (Day 10): Tab Bar Controllerの活用

Day 9で学んだ UINavigationController が「奥へ奥へ潜っていく」階層的な画面遷移だとすれば、今回学ぶ UITabBarController は、複数の機能を「独立して横に並べる」並列的な画面遷移を提供します。

X(旧Twitter)やInstagramなど、画面の下部に複数のアイコンが並んでいるUIの裏側には、必ずこのControllerが存在します。

1. UITabBarController とは？

UITabBarController もまた、Navigation Controllerと同じく他のViewControllerを管理する「コンテナViewController」の一種です。

主な役割

1. タブバーの提供: 画面下部にタブバー（TabBar）を表示します。
2. 独立した状態管理: 各タブは独立したViewControllerを保持します。「ホームタブ」で画面をスクロールしたまま「検索タブ」に切り替え、再度「ホームタブ」に戻ると、スクロール位置は保持されたままになっています。

2. Storyboardでの導入方法

Navigation Controllerの時と同様に、Storyboardの Embed In 機能を使えば一瞬で構築できます。

1. 最初の起点としたいViewController（例：ホーム画面）を選択します。
2. メニューバーから Editor > Embed In > Tab Bar Controller を選択します。
3. 新たにTab Bar Controllerが生成され、そこから元の画面に対して Relationship Segue (view controllers) が引かれます。キャンバス上の元の画面の下部にはタブバーが表示されます。

タブ（画面）を増やす方法

1. キャンバス上に、新しいViewControllerを配置します（例：検索画面）。
2. 大元の Tab Bar Controller を選択し、Control キーを押しながら新しいViewControllerへドラッグ＆ドロップします。
3. ポップアップメニューから Relationship Segue: view controllers を選択します。
4. これでタブが2つに増えました！

3. タブのアイコンとタイトルの設定

タブごとに表示されるアイコンや名前は、大元のTab Bar Controllerではなく、管理される側（子）のViewController が持っている情報を読み取って表示されます。

1. ホーム画面（子）のキャンバス下部にある Tab Bar Item（星のアイコンなどがある部分）をクリックして選択します。
   • ※見つからない場合はドキュメントアウトラインから選択してください。
2. Attributes Inspector (⌥⌘4) を開きます。
3. Title に "ホーム" などの文字を入力します。
4. Image でアイコンを設定します。SF Symbols（Appleの標準アイコンライブラリ）の house や house.fill などを入力すると綺麗に表示されます。

4. 複数コンテナの組み合わせ（超重要パターン）

実際のアプリ開発では、「タブバーの中に、ナビゲーションバーが存在する」という構成が一般的です（Instagramの「ホームタブ」から投稿詳細画面へPush遷移など）。

この場合、「Tab Bar Controller の子が Navigation Controller になり、さらにその子がコンテンツのViewControllerになる」 という入れ子構造にします。

作り方

1. 前述の通り、Tab Bar Controller と 複数の Navigation Controller を繋ぎます（Relationship Segue）。
2. 各 Navigation Controller を Embed In で作成した時のように、コンテンツ画面と繋ぎます（Relationship Segue）。
3. 注意点として、この構造では タブのアイコン・タイトル情報を持つのは中継役の Navigation Controller になります。Navigation Controller の Tab Bar Item を設定してください。

⚠️ やってはいけない構成 Navigation Controller の子として Tab Bar Controller を設定してはいけません。タブ遷移のたびに画面全体が遷移したり、NavigationBar二重表示に繋がるアンチパターンです。

5. コードでタブを切り替える

ユーザーのタップ以外でプログラムから特定のタブに切り替えたい場合は、tabBarController プロパティの selectedIndex にアクセスします。

swift
// どこかのViewController内から、2番目のタブ（インデックスは0始まりなので1）に強制切り替え
self.tabBarController?.selectedIndex = 1

📝 今日のまとめ

• UITabBarController は、複数の画面を「並列」に独立して管理するコンテナ。
• Storyboard上で Embed In や Relationship Segue を繋ぐだけで構築できる。
• タブのアイコン設定は、入れ歯の大元ではなく「子（中身の画面）」の Tab Bar Item で設定する。
• 実践では TabBarController > NavigationController > ViewController という入れ子の設計が基本となる。

第2部の完了です！これでアプリ全体の骨格・アーキテクチャである「レイアウト」と「画面遷移」をマスターしました。 明日の Day 11 からは第3部に入り、いよいよ個別のUI部品（ボタン、テキスト入力、画像など）の具体的な取り扱い方を深く学んでいきます。