Swift

【Swift】タブバー付きのプロジェクトを作成する方法

こんにちは!KON(@pippi_kon)です。

画面の下にボタンが付いているアプリってありますよね。

そのボタンをタップすると画面が切り替わるアレです。

この画面切り替え処理はボタンで実装するものだと思っていたのですが、Swiftに標準で搭載されている「タブバー」という機能を使えば簡単に実装できることを知りました。

このタブバーを使えば、わざわざボタンで切り替え処理を作り込まなくてもいいのです。

そこで今回は、タブバー付きのアプリを作るためのプロジェクト作成方法をご紹介します。

バージョン情報

この記事は以下のバージョンで記載しています。

Xcode:9.2

Swift:4.0.3(Swift4)

この記事をおすすめしたい人
  • タブバーを設定したい方

タブバーとは

タブバー(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」に戻せます。

 


最後に

いかがだったでしょうか?

今回は、タブバー付きのアプリを作るためのプロジェクト作成方法をご紹介しました。

画面下のボタンで表示を切り替える処理は、タブバーを使うと簡単に実装できます。

タブバーに対応したプロジェクトを作るのは難しくありませんので、興味がある方はぜひチャレンジしてみてください。

どなたかのご参考になれば幸いです。

あわせて読みたい
【Swift】基本的なプロジェクト(Single View App)の作成方法 この記事は、主にプログラミング言語「Swift」の初心者向けに、iPhoneアプリを作るための情報を記載しています。 今回...