読者です 読者をやめる 読者になる 読者になる

髪も切れるiOSエンジニアのブログ

元美容師エンジニアの成長と奮闘の記録

自作家計簿アプリ製作の軌跡① 〜UITabBarControllerの実装〜

まずは家計簿アプリのベースとなるTabBarを導入します。
正直な話、xcodeのNew Projectでテンプレートの「Tabbed Application」を選択すれば
タブバーベースの状態でプロジェクトをスタートできますが
今回はあえて「Single View Application」でスタートします。

環境

xcode 8
swift 3.0

実装

はじめに言っておきますが、基本的なタブバーのページ達を用意するだけなら
StoryBoard内だけで完結させられます。

UIViewControllerをUITabBarControllerに入れ替え

デフォルトで用意されているUIViewControllerを削除を削除します。
f:id:Tansok:20161112194201p:plain
これですね。
次にUITabBarControllerをドラッグアンドドロップします。
f:id:Tansok:20161112194647p:plain
するとご丁寧に2画面分のTabBarControllerが設置されました。

初期表示画面の設定

ただしこのままでは画面に表示されません。
起動時の最初に表示させる画面が設定されていないからです。
TabBarControllerを初期画面に設定します。
Show the attributes inspecter内の「Is initial View Controller」にチェックを入れます。
f:id:Tansok:20161112195123p:plain
これでTabBarControllerが初期画面に表示されました。

画面追加

今回の家計簿アプリは3画面必要なので一画面足します。
新たにViewControllerをStoryBoard上に足します。
そしてTabBarControllerからcontrol + ドラッグで新たに足したViewControllerに紐づけます。
f:id:Tansok:20161112195644p:plain
すると上のようなウィンドウが表示されるので、「view controllers」を選択します。
このview controllersはTabBarが管理する複数の画面が格納されるarray型のプロパティです。
f:id:Tansok:20161112195913p:plain
はい完成!
これで3画面分のタブバーをベースにした基本画面が完成しました。

つづく