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クラスのオブジェクトを張り付け、ビューの底辺に沿わせて配置します

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