iOSアプリでタブバーレイアウトを実装する方法を徹底解説

この記事では、iOSアプリケーションでタブバーレイアウトを活用する方法を、手順を追ってわかりやすく解説します。

タブバーとは？

Appleの公式ドキュメントによると、タブバーは以下のように定義されています。

タブバーはアプリ画面の下部に表示され、アプリ内の異なるセクション間を素早く切り替える機能を提供します。タブバーは半透明で、背景色（ティント）を設定できる場合があります。画面の向きに関わらず常に同じ高さを維持し、キーボードが表示されている間は非表示になります。タブバーには任意の数のタブを含めることができますが、実際に表示されるタブの数はデバイスのサイズや画面の向きによって異なります。

詳細については、AppleのHuman Interface Guidelinesをご覧ください。
https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

実装手順

それでは、実際にタブバーレイアウトを作成していきましょう。

ステップ1：新規プロジェクトの作成

Xcodeで新しいSingle View Applicationを作成し、プロジェクト名を「TabBarController」とします。

ステップ2：タブバーコントローラーの追加

Main.storyboardを開き、オブジェクトライブラリからTab Bar Controllerを追加します。以下の図のように配置してください。

ステップ3：既存ビューコントローラーの削除と新規ファイルの作成

ストーリーボード上の既存のビューコントローラーを削除します。次に、新規ファイル作成から「SecondViewController」という名前のSwiftファイルを新しく作成します。

ステップ4：クラスの割り当て

ストーリーボードに戻り、2つのビューコントローラーにそれぞれクラスを設定します。Item 1には「ViewController.swift」を、Item 2には「SecondViewController.swift」を割り当ててください。

ステップ5：背景色の変更

2つのビューコントローラーの背景色を、それぞれグレーと黒に変更します。これにより、タブの切り替え時に画面が正しく変化しているか視覚的に確認しやすくなります。

ステップ6：Initial View Controllerの設定

タブバーコントローラーを「Is Initial View Controller」として設定するのを忘れないでください。この設定を怠ると、アプリ起動時にタブバーが表示されません。

ステップ7：プロジェクトの実行

プロジェクトをビルドして実行します。以下のように、下部にタブバーが表示され、タブをタップすることで画面を切り替えられれば成功です。

まとめ

以上、たった7つのステップでiOSアプリにタブバーレイアウトを実装できました。タブバーは、複数の機能を持つアプリにおいてユーザーが目的の画面へ素早くアクセスするための重要なナビゲーション要素です。ぜひ本記事の手順を参考に、自分のアプリに取り入れてみてください。