「Single View Application」でスタートしたプロジェクトにTabBar を組み込みます。
前回(第一回)が終了したプロジェクトの状態から始めます。
TabBar の埋め込み
「Single View Application」にTabBar を埋め込みます。
Step 1> ビューコントローラを選択
「Project Navigator」(左パネル)の[Main.Storyboard]を選択し、ドキュメントアウトラインの "View Controrller" をクリックして選択します。(図1)

図1 ViewControllerの選択
Step 2> 「Tab Bar Controller」の埋め込み
"View Controller" を選択した状態で、[Editor]メニュー > [Embed in] > [Tab Bar Controller] を選択します。(図2)

図2 Tab Bar Controller の埋め込み
Tab Bar アイコンの追加と設定
TabBar 用のアイコンを設定します。
Step 0> 以下にサンプルを用意しましたので、あらかじめダウンロードしておいてください。
[first.pdf], [second.pdf]
Step 1> 「Project Navigator」(左パネル)の[Images.xcassets]を選択します。
Step 2> 「Step 0」でダウンロードした2つのPDFファイルを、ドキュメントアウトラインにドラッグ・ドロップします。(図3)

図3 画像リソースの追加
Step 2> リソースタイプの変更
PDFはベクターフォーマットなので、すべてのデバイスに対応させるために"Image Types"を[Vectors]に変更します。ドキュメントアウトラインの"first","second"を2つ選択した状態で「Attribute Inspector」(右パネル)の[Types] から「Vectors」を選択します。
Step 3> リソースをすべてのデバイスに指定
PDFの画像リソールを、すべてのデバイスに割り当てます。"first","second"それぞれで図4の操作を行ってください。

図4 アイコンをすべてのデバイスに指定
Step 4> View Controller のタブバーアイコンをクリックして「Attribute Inspector」(右パネル)の [Title] に「Fall」と入力、[Image] を「first」に指定します。図5

図5 タブバーアイコンの指定
Step 4> 実行してみる
実行すると図6のような動きになります。

図6 シミュレーターで実行
ボールの着地地点がタブバーに隠れてしまいました。これを、解決しなければいけません。
境界領域の調整
タブバーの高さに合わせて、境界の調整をします。generalGravity メソッドの以下の1行を削除して、リスト2のコードに置き換えます。
....
collisionBehavior.translatesReferenceBoundsIntoBoundary = true
....
リスト1 generalGravity メソッド(変更前)
....
let fromPoint? = tabBarController?.tabBar.frame.origin
let x = tabBarController?.tabBar.frame.origin.x
let width = tabBarController?.tabBar.frame.size.width
let toY = tabBarController?.tabBar.frame.origin.y;
collisionBehavior.addBoundaryWithIdentifier("tabbar", fromPoint: fromPoint!, toPoint: CGPoint(x: x!+width!, y: toY!))
....
リスト2 generalGravity メソッド(変更後)
冗長な感がありますが、実は、これでないとコンパイルが通りません。
Optional Value が影響しているのですが、詳細に関しては、別の機会に詳しく説明したいと思っています。
タブバーへのビューコントローラの追加
タブバーには、現在、ビューコントローラ(Fall)が1つしか登録されていません。
そこで、新しいビューコントローラを作成して、タブバーに追加します。
Step 1> 新規ビューコントローラの作成
[プロジェクト・ナビゲーター] (左パネル)の「Main.storyboad」をクリックして、Storyboadを表示し、[オブジェクト・ライブラリー](右パネル)から[View Controller]を Storyboard にドラッグ&ドロップします。(図7)

図7 新規ビューコントローラの配置
Step 2> タブバーコントローラへの追加
Storyboardの[Tab Bar Controller](右パネル)を選択し、[Connection Inspector] の [Triggered Segues] > [view controllers] の右側の「●」をドラッグして「Step 1」で新規に作成したView Controller にドロップします。(図8)

図8 タブバーへの追加
Step 3> タブバーアイコンの変更
接続した新規のビューコントローラをクリックし、下部にはるアイコンをクリックします。[Attribute Inspector](右パネル)を選択し、[Bar Item] のタイトルを「Push」に、[Image] を「second」に指定します。(図9)
ブッシュは次回実装するチュートリアルのサンプル名です。

図9 タブバーアイコンとタイトルの変更
Step 4> シミュレーターで実行・確認
実行して確認してみます。(図10)

図10 シミュレーターで実行
以上で、2つのビューコントローラをタブに登録できました。
次回は2つ目のビューコントローラ「Push」の実装をします。