このページの本文へ

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

UIToolbarを深く知る

ボタンを集約的に配置できるツールバーを利用する

2018年01月01日 17時00分更新

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

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

 前回は、iOSアプリに使われる基本的なUIの1つとしてタブバーを取り上げました。iOSのタブバーは一般的なPCのブラウザーのタブバーなどと同じく、タブとして登録されたビュー全体を、ごそっと丸ごと入れ替えるものでした。ただし、実際に入れ替えているのはビュー単体ではなく、そのビューを管理するビューコントローラー単位となっています。その点ではナビゲーションコントローラーとも共通する、というのが前回までの話です。

 今回取り上げるツールバー(UIToolbar)は、見た目はタブバーともよく似ています。しかし、素性も動作もまったく異なるものです。まず素性ですが、タブバーを管理するタブバーコントローラー(UITabBarController)は、その名前からもわかるように一種のビューコントローラー(親クラスはUIViewController)でした。それに対し、ツールバーにはそれを管理するツールバーコントローラーのようなものは存在しません。ツールバーは一種のビュー(親クラスはUIView)なので、1つのビューとして既存のビューの上に配置して使います。その点では、これまでに扱ってきたような、1つのUIパーツに過ぎません。

 ツールバーが普通のUI部品と異なるのは、その上にさらにボタンを配置して、一種のDockのように機能させることができる点です。ツールバー上のボタンには、アクションを設定できるので、簡単に複数のボタンを一箇所にまとめられます。また、iOSのツーバーにはちょっと意外な点で、macOSアプリのツールバーと共通する特徴もあります。

空のツールバーを配置する

 とりあえず、いつものように最小限のコードでツールバーを表示するところから始めましょう。とはいえ、上で述べたようにツールバーは単なるビューなので既存のビューの上に位置を決めて配置する必要があります。そのため、どうしてもビューコントローラーを用意して、その中で作成して配置することになります。

 ビューコントローラーのプロパティとしてUIToolbarのオブジェクトを用意し、いつものようにviewDidLoadメソッドの中でビューに張り付け、viewWillLayoutSubviewsメソッドで位置を決めましょう。

ツールバーを表示するためにビューコントローラーを用意し、そのビューにUIToolbarクラスのオブジェクトを張り付け、ビューの底辺に沿わせて配置します

 ツールバーは、単なるビューとして画面のどこにでも配置できることになりますが、底辺に沿って配置するのが標準的です。その慣習を破るとユーザーが混乱することになるだけで、そうすることにメリットを見出すのはかなり難しいはずです。ここでは、タブバー固有の高さを調べてから、それを考慮してビューの底辺に沿って配置しています。

ツールバー単体では、その上に何も載っていない単なるバーで、デフォルトでは半透明の白い帯状の領域が表示されるだけです。ツールバーは一種のビューなので、sizeToFitメソッドで中身に応じた大きさを設定することができます

 デフォルトのタブバーの色は、半透明の白で、親のビューの背景色が少し透けて見えています。なお、タブバーに対してsizeToFitメソッドを実行しているのは、タブバー固有の高さを設定するためです。それを省くと、このプログラムでは何も表示されなくなります。

この連載の記事

ASCII倶楽部の新着記事

会員専用動画の紹介も!