XCode タブバーの使い方

今回はiPhoneアプリ開発で使用される「Xcode」を用いて、Viewの下部に表示されるタブバーを作成してみようと思います。

 

タブバーは「TabBarController」というオブジェクトを使用することで簡単に作成できるので、参考にしてみてください。

はじめに

 

まずは、Xcodeでタブバーを追加するプロジェクトを作成しましょう。

普段作成する時に使う「Single View Application」か、「Tabbed Application」を選択してください。

 

この2つの違いは、初期状態でタブバーが追加されているかどうかだと思います。

※他にもあるかもしれません。

 

XcodeのSingle View Applicationボタン

 

Single View Applicationを選択した場合

 

プロジェクト作成画面で「Single View Application」を選択した場合は、storyboardには特に何も配置されていません。

 

そこで、Tab Bar Controllerを新しく配置する必要があります。

storyboardに移動してから、以下の画像にあるオブジェクトを配置してください。

 

Tab Bar Controllerボタン

 

「Tab Bar Controller」「Item1」「Item2」がそれぞれ配置されるので、空いているスペースに置いておきましょう。

 

Tab Bar Controllerを設置したXcode

 

これでSingle View ControllerからTab Bar Controllerを配置することができましたね。

 

Tabbed Applicationを選択した場合

 

今回はタブバーを作成することが目的なので「Tabbed Application」を選択しました。

ですので、初期状態でこれらタブが配置されています。

 

プロジェクト名や、iPhone iPadの対応設定などは適当に設定しておきましょう。

プロジェクトの作成が完了したら、storyboardが以下のようになっていると思います。

 

Tab Bar Controllerを設定したStroyboard

 

これだけでタブバーとして使用することはできるのですが、必ずしもタブの数が2つとは限りませんし、アイコンも丸じゃないものを使用したい時がありますよね。

そこで、続いてタブバーに表示される「Item」の数を追加していきましょう。

 

タブの項目を追加する

 

タブバーに項目を追加するためには、View Controllerを新たに追加した後、Tab Bar Controllerとセグエ(矢印)で接続する必要があります。

詳しくは以下を参考にしてみてください。

 

新規View Controllerの追加

新規View Controllerを追加

 

controlを押しながらひっぱるか、マウスの右クリックを押しながらでView Controllerと接続

 

View Controllerと接続

 

表示される項目の中から「view controllers」を選択

 

view controllers

 

追加したView Controllerとセグエで接続できていたらOK

 

セグエ接続されたViewController

 

これで、タブの項目を新たに追加することができたと思います。

Tab Bar Controllerに追加した項目が表示されているか確認してみてください。

 

新たに追加されたタブバー

 

ここまででタブの追加はできるようになりました。

ですが、まだタブのアイコンが丸や四角などのシンプルなものなので、この部分を調整しましょう。

 

タブのアイコンを変更する

 

タブのアイコンを変更するためには、まずタブの項目を選択する必要があります。

 

First View Controllerの中にある「First」を選択してください。

(Tabbed Applicationを選択しなかった場合は「Item」だったと思います)

 

Firstボタン

 

すると、First View Controllerのタブが強調表示されるはずです。

(強調表示の色を変更しているため、デフォルトのカラーじゃないかも?)

 

Xcode 強調表示されたタブ

 

この状態で「Attributes inspector」を開くと、以下の項目が見つかるのでカスタマイズしましょう。

 

自由なアイコンとテキストの場合

 

  1. 「Title」ー>タブの下に表示されるテキスト
  2. 「Image」ー>タブのアイコン画像

 

といった具合に編集してみてください。

 

タイトルを設定したXcode

 

デフォルトで追加されているアイコンの場合

 

System Item」を選択すると表示される項目の中から、タブの内容に合ったものを探してみましょう。

 

System Itemの一覧

 

どこかで見たことあるようなアイコンもあるのではないでしょうか。

これで、タブバーに追加されている項目のアイコン、テキストを変更できるようになりました。

 

同じようにして、それぞれの項目をカスタマイズしてみましょう。

 

Xcodeのタブバー

 

まとめ

 

今回紹介した方法を使うことで、タブバーのついたiPhoneアプリを作成できるようになりました。

アイコンに画像を使ったり、テキストを自由に設定できたりとカスタマイズ性はしっかりしているので、今回紹介した以外の使い方もできそうですね。

 

ゲームであれば「キャラ」「装備」「アイテム」「設定」みたいな感じでしょうか。

 

 

是非使いこなせるようにしておきましょう。

ではまた。

過去にレビューしたアイテム