｢Single View Application」でスタートしたプロジェクトにTabBar を組み込みます。
前回（第一回）が終了したプロジェクトの状態から始めます。
TabBar の埋め込み
「Single View Application」にTabBar を埋め込みます。
Step 1> ビューコントローラを選択
「Project Navigator｣（左パネル）の[Main.Storyboard]を選択し、ドキュメントアウトラインの "View Controrller" をクリックして選択します。（図１）
図１ ViewControllerの選択
Step 2> 「Tab Bar Controller」の埋め込み
"View Controller" を選択した状態で、[Editor]メニュー > [Embed in] > [Tab Bar Controller] を選択します。（図２）
図２ Tab Bar Controller の埋め込み
Tab Bar アイコンの追加と設定
TabBar 用のアイコンを設定します。
Step 0> 以下にサンプルを用意しましたので、あらかじめダウンロードしておいてください。
[first.pdf], [second.pdf]
Step 1> 「Project Navigator｣（左パネル）の[Images.xcassets]を選択します。
Step 2> 「Step 0｣でダウンロードした２つのPDFファイルを、ドキュメントアウトラインにドラッグ・ドロップします。（図３）
図３ 画像リソースの追加
Step 2> リソースタイプの変更
PDFはベクターフォーマットなので、すべてのデバイスに対応させるために"Image Types"を[Vectors]に変更します。ドキュメントアウトラインの"first","second"を２つ選択した状態で「Attribute Inspector」（右パネル）の[Types] から「Vectors」を選択します。
Step 3> リソースをすべてのデバイスに指定
PDFの画像リソールを、すべてのデバイスに割り当てます。"first","second"それぞれで図４の操作を行ってください。
図４ アイコンをすべてのデバイスに指定
Step 4> View Controller のタブバーアイコンをクリックして「Attribute Inspector」（右パネル）の [Title] に「Fall」と入力、[Image] を「first」に指定します。図５
図５ タブバーアイコンの指定
Step 4> 実行してみる
実行すると図６のような動きになります。
図６ シミュレーターで実行
ボールの着地地点がタブバーに隠れてしまいました。これを、解決しなければいけません。
境界領域の調整
タブバーの高さに合わせて、境界の調整をします。generalGravity メソッドの以下の1行を削除して、リスト２のコードに置き換えます。
....
collisionBehavior.translatesReferenceBoundsIntoBoundary = true
....
リスト１ 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)が１つしか登録されていません。
そこで、新しいビューコントローラを作成して、タブバーに追加します。
Step 1> 新規ビューコントローラの作成
[プロジェクト・ナビゲーター] （左パネル）の「Main.storyboad」をクリックして、Storyboadを表示し、[オブジェクト・ライブラリー]（右パネル）から[View Controller]を Storyboard にドラッグ＆ドロップします。（図７）
図７ 新規ビューコントローラの配置
Step 2> タブバーコントローラへの追加
Storyboardの[Tab Bar Controller]（右パネル）を選択し、[Connection Inspector] の [Triggered Segues] > [view controllers] の右側の「●」をドラッグして「Step 1」で新規に作成したView Controller にドロップします。（図８）
図８ タブバーへの追加
Step 3> タブバーアイコンの変更
接続した新規のビューコントローラをクリックし、下部にはるアイコンをクリックします。[Attribute Inspector]（右パネル）を選択し、[Bar Item] のタイトルを「Push」に、[Image] を「second」に指定します。（図９）
ブッシュは次回実装するチュートリアルのサンプル名です。
図９ タブバーアイコンとタイトルの変更
Step 4> シミュレーターで実行・確認
実行して確認してみます。（図１０）
図１０ シミュレーターで実行
以上で、２つのビューコントローラをタブに登録できました。
次回は２つ目のビューコントローラ「Push」の実装をします。
