このページの本文へ

Swift Playgroundsで学ぶiOSプログラミング第69回

UITabBarControllerを知る

タブによる画面の切り替え機能をマスター

2017年12月27日 17時00分更新

文● 柴田文彦 編集●吉田ヒロ

  • この記事をはてなブックマークに追加
  • 本文印刷

 このところ、これまでこの連載ではあえて扱ってこなかったAuto LayoutによるUIのレイアウトについて、さまざまな「拘束」の設定方法を見てきました。今回取り上げるのは、それとはほとんど何の関係もない、タブによる画面の切り替え機能です。Auto Layoutとの共通点は、これまでこの連載では扱ってこなかったということだけでしょう。

 iOSのタブは、タブバーコントローラー(UITabBarController)によって実現されています。それを使って、アプリの画面(ビュー)を、ビューコントローラーごと切り替えるのです。ビューコントローラーごと画面を切り替えると言えば、以前にはナビゲーションコントローラーを扱いました。それと似ている部分もあります。それは、このタブバーコントローラーが、ほかのビューコントローラーを管理するかたちになっているということです。しかし、基本的にはまったく異なる考え方で設計されたもので、使い方も用途も異なります。

 ナビゲーションバーは、画面の上部に配置されるものでしたが、タブバーは底部に位置します。また、タブバーの上には切り替え可能なビューコントローラーの一覧が、個々のタブとしてあらかじめ配置されています。その状態からはナビゲーション機能のように、プログラムによってビューコントローラーをプッシュしたりポップしたりすることなく、ユーザーがタブバーを操作することでビューコントローラーが自動的に切り替わります。

 プレイグラウンド上の小規模なプログラムでは、あまりタブバーを活用しようとは思わないかもしれませんが、使い方は簡単なので、覚えておくと便利なこともあるでしょう。

3つのビューコントローラーをタブバーで切り替える

 とりあえず可能な限り少ないコードで、タブバーを表示してビューを切り替えるプログラムを書いてみましょう。ビューを切り替えるには、最低限2つのビューコントローラーを用意すればいいのですが、それでも寂しいので3つのビューコントローラーを用意し、それぞれに異なる背景色を設定しておきます。タブ機能は、タブバーコントローラー(UITabBarController)のオブジェクトを作って、そのviewControllersというプロパティに、表示して切り替えたいビューコントローラーの配列を設定するだけで使えます。

タブバーコントローラーは、ナビゲーションコントローラーと同様に、ビューコントローラーの切り替えを実現する仕組みです。切り替えたいビューコントローラーを配列としてセットします。タブバーコントローラー自体も一種のビューコントローラーです

 このプログラムを実行すると、タブバーに設定した配列の最初のビューコントローラーのビューが表示されます。しかし、タブバー自体は区切りもない白い半透明のバーなので、そのままでは、それがタブバーであるかどうかもよくわかりません。しかし、タブバーの真ん中あたりや、右側あたりをタップすれば、配列として与えた2番目、3番目のビューコントローラーに切り替えることができます。

ビューコントローラーをそのまま設定しただけでは、タブバーには何も表示されず、タブがいくつあるのかどころか、それがタブバーなのかさえもよくわかりません。この状態でもタブバーのしかるべき場所にタップすれば、ビューコントローラーを切り替えることはできます

この連載の記事

ASCII倶楽部の新着記事

会員専用動画の紹介も!