こんにちは、コン(@pippi_kon)です。
画面の下にボタンが付いているアプリってありますよね。
そのボタンをタップすると画面が切り替わるアレです。
この画面切り替え処理はボタンで実装するものだと思っていたのですが、Swiftに標準で搭載されている「タブバー」という機能を使えば簡単に実装できることを知りました。
このタブバーを使えば、わざわざボタンで切り替え処理を作り込まなくてもいいのです。
そこで今回は、『タブバー付きのアプリを作るためのプロジェクト作成方法』をご紹介します。
タブバーとは
タブバー(UITabBar)とは、アプリの画面を切り替えるボタンを並べるバーのことです。
例えば、iPhoneに標準でインストールされている時計アプリのタブバーは以下のような感じです。

タブバーを使うと、ボタンの形や色を変えたり、バッチを表示することが簡単にできます。
プロジェクト作成方法
プロジェクトの作成方法について記載します。
まず、Xcodeを起動し、起動画面の「Create a new Xcode project」を選択します。

選択すると以下の画面が表示されますので、「Tabbed App」を選択し、「Next」を選択します。(Xcode8では Tabbed Application という名称でしたがXcode9から変わったようです)

その後、通常のプロジェクトのようにProduct NameやTeamなどを入力し、プロジェクトを作成します。
これでタブバーを持つプロジェクトの作成が完了しました。
プロジェクトの構成は以下のようになっています。

「FirstViewController.swift」と「SecondViewController.swift」があるのがポイントです。
storyboardで確認
画面構成がどのようになっているのか、storyboardで確認してみましょう。

このように「Tabbed App」で作成したプロジェクトは、初期状態で2つのタブを持つ画面が作成されます。
シミュレータで確認
プロジェクトを作成したら、特に設定やプログラムをいじることなくシミュレータ実行できます。
シミュレータでタブバーの動作を確認してみましょう。
シミュレータを実行すると、まず初めに「First View」が表示されます。

画面下にあるタブバーの「Second」をタップすると、「Second View」に切り替わります。

画面下にあるタブバーの「First」をタップすると、「FIrst View」に戻せます。
最後に
今回は、『タブバー付きのアプリを作るためのプロジェクト作成方法』をご紹介しました。
画面下のボタンで表示を切り替える処理は、タブバーを使うと簡単に実装できます。
タブバーに対応したプロジェクトを作るのは難しくありませんので、興味がある方はぜひチャレンジしてみてください。

