ツールバーにボタンを1つ配置する

　ツールバーの上に配置するボタンは、UIBarButtonItemクラスのオブジェクトとして作成して、ツールバーのsetItemsメソッドで配置します。このメソッドには、ボタンの配列を与えるようになっているので、複数のボタンをまとめて設定できます。ボタンを作成する際には、システム規定のアイテムを指定すれば、それに応じたアイコンが自動的に設定されます。ためしにアクションボタンを1つだけ配置してみましょう。

UIBarButtonItemのオブジェクトを用意すれば、ツールバーのsetItemsメソッドを使ってツールバーにボタンを配置することができます。システム規定のアイテムを使えば、名前を指定するだけでアイコンも表示可能です

　アクションボタンは、「共有」ボタンとして使われることの多い、四角と上向き矢印を組み合わせたアイコンを持っています。

　ボタン（UIBarButtonItem）とツールバー（UIToolbar）、アプリ画面に相当するビューの関係を整理しておきましょう。

UIBarButtonItemとUIToolbar、そしてUIViewの関係を模式図で示します。ボタンはツールバーにsetItemsメソッドで、ツールバーはビューにaddSubviewメソッドで張り付けています

　ボタンはツールバーのsetItemsメソッドでツールバー上に配置し、そのツールバーは、ビューのaddSubviewメソッドでビューの上に配置するわけです。

ツールバーに複数のボタンを配置する

　次にもう1つボタンを作って、同時に2つのボタンをツールバー上に配置してみましょう。新しいボタンは、やはりシステムアイテムのトラッシュ（ゴミ箱）とします。

ツールバーのsetItemsメソッドはボタンのオブジェクトを配列で与えるので、複数のボタンを同時に配置できます。ボタンは左詰で表示されます

　アクションとトラッシュ、2つのボタンは左寄せに詰めて配置されました。これでは使いにくいので、次にこの部分をなんとかしてみましょう。その前に余談ですが、2つのボタンオブジェクトを配列の要素としてsetItemsメソッドに渡している部分の記述は、なんとなく視覚的で、Auto LayoutのVFLを思い出させるのではないでしょうか。配列を表す「[]」が、ツールバーの形を表し、その中にボタンを並べているように見えてきます。

　なお、ツールバーに配置可能なシステム規定のボタンには、今回取り上げているもの以外にも、いろいろな種類があります。ブラウザー、メール、音楽プレーヤーなど、一般的なアプリで使えそうなものが含まれています。

ツールバー上のボタンの間にスペースを入れる

　今見たように、複数のボタンを配列に入れて配置すると、ツールバーの左からかなり詰めて配置されました。ボタンの間隔を調整するため、間にスペースを入れることができます。スペースには固定幅と、可変幅（フレキシブル）のものがあります。

　いずれも、ボタンと同じ、UIBarButtonItemのオブジェクトとして作成します。前者はUIBarButtonSystemItemのfixedSpace、後者は同じくflexibleSpaceとして指定します。ここでは、アクションとトラッシュの間に可変幅のスペースを入れてみましょう。

UIBarButtonItemのオブジェクトとして、システムアイテムのflexibleSpaceを作成して配置すると、ボタンの間に幅が自動的に変化するスペースを入れることができます

　結果は予想どおりでしょうか。これによって左端にアクション、右端にトラッシュの各ボタンが配置されました。その間の何もない部分が可変幅のスペースというわけです。

　このようなボタンとスペースの配置は、macOSアプリのツールバーに対するボタンなどの配置に似ています。例えばSafariのツールバーのカスタマイズダイアログを開くと「伸縮自在のスペース」という項目があります。iOSのツールバーの可変幅のスペースは、その「伸縮自在のスペース」と同様の働きをするわけです。

iOSのツールバーのflexibleSpaceは、macOSアプリのツールバーをカスタマイズする際に使える「伸縮自在のスペース」とほぼ同じ働きをするものと考えられます

ツールバー上のボタンをセンタリングする

　さらにもう1つ（合計3つ）のボタンを配置し、隣り合うボタンの間に可変幅のスペースを入れてみましょう。すると、2番めのボタンは、ツールバーのちょうど中央に配置されます。

flexibleSpaceは、ほかのアイテムの間の間隔を均等に保つように変化するという性質を持っています。3つのボタンの間に2つの可変スペースを挟むと、真ん中のボタンはセンタリングされます

　これは、可変幅スペースの性質として、ほかのアイテムの間のスペースが均等化されるというものがあるからです。

ツールバー上にカスタムなボタンを配置する

　ここまでは、ツールバーに配置するボタンとしてシステム規定のものを作ってきましたが、もちろんカスタムなボタンを作成することも可能です。その際には、UIBarButtonSystemItemの名前の代わりに、システムアイコン用画像の名前とスタイルを指定します。

　アイコン画像は、前回も使ったASCII倶楽部のロゴのPNG画像を流用しましょう。スタイルには、UIBarButtonItemStyleの値を指定しますが、現在はplainとdoneしかありません。後者は、一種の「戻る」ボタン用なので、ここではplainを指定しました。これを2番めのボタンとして、最初の可変幅スペースの前に配置してみました。

UIBarButtonItemのオブジェクトは、システム規定のボタンだけでなく、アイコン画像などを指定してカスタムなボタンとしても作成できます。前回のタブバーのボタン同様、アルファチャンネルだけが使用され、シルエットのみの表示になります

　結果は、最初の2つのボタンがくっついて配置され、3番目のボタンは相変わらず中央に、4番目のボタンは右端に配置されました。この場合、2番目と3番目の間のスペースと、3番目と4番目の間のスペースの幅は異なります。上で書いたような「均等な」スペースにはなっていません。これは、間にスペースを挟まない、くっついたボタンがあると、それらは1つのグループとみなされ、そのグループの左端から、次のグループ、またはボタンまでのスペースが均等になるように配置されるものと考えられます。

ツールバー上のボタンにアクションを設定する

　ここまでは、各ボタンのアクションにはすべてnilを設定していました。これでは、ユーザーがボタンをタップしても何も起こりません。このnilの部分にセレクターでメソッドを指定すれば、何らかの処理を実行できます。ボタンごとに異なる内容の処理を実現するには、各ボタンに異なるメソッドを指定するという方法もありますが、ここではすべてのボタンに同じメソッドを設定してみました。ただし、そのアクションのメソッド内でタップされたボタンを識別できるように、各ボタンにはあらかじめタグを指定しています。

複数のボタンに同じアクションを設定し、アクションのメソッド内でボタンを識別するために各ボタンにタグを付けています

　タグは、普通のボタン（UIButton）などを識別するために使う例としてはよく見かけるでしょう。その場合のタグ（tag）というプロパティはビュー（UIView）に固有のものです。ところがUIBarButtonItemはビューではありません。またtagというプロパティも持っていません。しかし、その親クラスのUIBarItemにはtagというプロパティがあるのです。安心して設定してください。

　さて、アクションとしてのメソッドでは、まずそのタグを調べて、その値に応じた名前を変数bNameに設定しています。その後、その名前をメッセージとし、「ツールバーボタン」をタイトルとしてアラート（UIAlertController）を作成して表示しています）。

ツールバー上のボタンがタップされると呼び出されるメソッド内では、ボタンのタグを見てアラートに表示する文字列を変化させています

　このアラートには、「OK」という名前のキャンセルボタンを配置しています。ユーザーが「OK」をタップしても、アラートが閉じる以外何も起こりません。

「ツールバーボタン」というタイトルと、ボタンの名前を含むメッセージと「OK」という名前のキャンセルボタンのみを配置したアラートが表示されます

　もちろん、このプログラムのままでは何の役にも立ちませんが、ビューにツールバーを配置し、さらにその上にボタンやスペースを配置し、それぞれのボタンにアクションを設定する方法を示すことはできたはずです。

次回の予定

　今回は、ツールバーの使い方をひととおり取り上げました。ちょっとしたUIなら、ビューの上に直接配置するよりもツールバーを用意して、その上に配置したほうが簡単で、かつすっきりとしたUIを実現できるでしょう。次回は、さらに別のバーというわけではありませんが、これまでに登場していなかったiOSの基本的なUI機能を、また取り上げることになりそうです。