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

ビギグラマーのノート

自作PCやプログラミングについてのブログです。

TabBarの使い方

環境 Swift 3, app for iOS10

 様々なアプリケーションで使用されるTabBarについて書いていきます。TabBarは例えばApple純正の時計アプリとかを想像してもらうとわかりやすいかもしれません。

f:id:BegiGrammer:20170312081145p:plain

 TabBarとはこのように下にいくつかのタブが並び画面を簡単に移動することができる機能です。複数の画面をあらかじめ読み込ませた状態で画面移動するため、ページ移動の負荷が軽くなります。また同じような機能をボタンによるSegueで実現しようとするとTabBarと比べて複雑になりがちです。

 StoryBoardとしてはこのような形になります。

f:id:BegiGrammer:20170312081914p:plain

  TabBarはこのようにメインのコントローラーで複数のページを制御する形です。メインとサブをつなぐSegueはRelationshipになります。

f:id:BegiGrammer:20170312082732p:plain

  あらかじめ出来合いのTabBarControllerがあるのでそこから始めると容易にTabBarを実装できます。新たにitem(子ページ)を追加する場合はViewController追加後Tab Bar Itemを置き、親ページとRelationshipのSegueで接続することで追加ができます。

f:id:BegiGrammer:20170312082703p:plain

 TabBarのアイコンは標準のアイコンのほか、Retinaディスプレイで60x60ピクセルの画像を設定することができます。この場合ファイルの名前の最後に@2xをつけてください。(例: example@2x.png) 画像の色は透明部分以外TabBarItemに設定した色で塗りつぶされ表示されます。(上のStoryBoardの画像の歯車のアイコンはもともと黒色でした)

f:id:BegiGrammer:20170312083357p:plain

  違うTabBarのアイテムを選択した時に、どれを選択中かの値を受け取ることができます。UITabBarDelegateスーパークラスに追加してください。また、tabBarのデリゲートとしてselfを選択しておいてください。

func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem){}

 item.nameで選択中のアイテムの名前を知ることができ、item.tagで設定したtagの数値を受け取ることができます。

 TabBarの操作によって既に読み込まれた違うページを表示する場合、子ページ内のClassである幾つかのメソッドが実行されます。

f:id:BegiGrammer:20170312082655p:plain

 TabBarのitemはを選択された時にこの図のように4つのappearとdisappearメソッドを繰り返します。すなわちviewDidLoadは最初の一回しか行われません。起動時にitem2などの最初に現れないページを読み込ませる場合は、私はloadViewIfNeededを使用しています。

もちろんですが、TabBarのページ変更はユーザーが頻繁に行う場合があるので、この4つにはなるべく軽い処理か条件付けにより最適最小のものを実行するようにする必要があります。(まあそんなに気にしないでも良いレベルですが・・・)