2014年11月24日

UIKit Dynamics ステップアップチュートリアル in Swift (2) 番外編 - TabBar

UIKit Dynamics のチュートリアルシリーズなのですが、実践的に拡張するために、今回、番外編。

「Single View Application」でスタートしたプロジェクトにTabBar を組み込みます。

前回(第一回)が終了したプロジェクトの状態から始めます。


TabBar の埋め込み



「Single View Application」にTabBar を埋め込みます。

Step 1> ビューコントローラを選択
「Project Navigator」(左パネル)の[Main.Storyboard]を選択し、ドキュメントアウトラインの "View Controrller" をクリックして選択します。(図1)

sel_viewcontroller0.png
図1 ViewControllerの選択

Step 2> 「Tab Bar Controller」の埋め込み
"View Controller" を選択した状態で、[Editor]メニュー > [Embed in] > [Tab Bar Controller] を選択します。(図2)
Embed_tabbar_In_Editor.png
図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)

draganddrop_icon_resources.png
図3 画像リソースの追加

Step 2> リソースタイプの変更
PDFはベクターフォーマットなので、すべてのデバイスに対応させるために"Image Types"を[Vectors]に変更します。ドキュメントアウトラインの"first","second"を2つ選択した状態で「Attribute Inspector」(右パネル)の[Types] から「Vectors」を選択します。

Step 3> リソースをすべてのデバイスに指定

PDFの画像リソールを、すべてのデバイスに割り当てます。"first","second"それぞれで図4の操作を行ってください。
assign_pdf_to_all.gif
図4 アイコンをすべてのデバイスに指定

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

Step 4> 実行してみる
実行すると図6のような動きになります。
fall_ng_w_tabbar.gif
図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)

drag_view_controller.gif
図7 新規ビューコントローラの配置

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

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

Step 4> シミュレーターで実行・確認
実行して確認してみます。(図10)
exec_sim3.gif
図10 シミュレーターで実行

以上で、2つのビューコントローラをタブに登録できました。

次回は2つ目のビューコントローラ「Push」の実装をします。


posted by ayagu at 17:04| Comment(0) | iOS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。