このページは「iPhoneプログラミング入門」(工学社刊、ISBN 978-4-7775-1541-7)を読んで、もっと先へ進んでみたいと思った人への説明です。

次へ->
「次の一歩」一覧へ

「バーボタンアイテム」の利用1

ナビゲーションバー上のボタンを使ったアホアプリ

「ナビゲーションバー上のボタン」を使いたい

「最も簡単なモーダルビュー」で、ナビゲーションバーの上にボタンを配置する作業は面白かったですね。インターフェイス・ビルダーには、「ナビゲーションバーの上に置くボタン」のために驚くほどたくさんの選択肢が用意されていて、GUIな作業だけでボタンの形や機能を詳しく設定できるのです。
しかし、「最も簡単なモーダルビュー」でのボタンの使い方は、やや変則的です。何がか、と言いますと、「UIButton」クラスのオブジェクトを使ったことです。本書でも用いたように、ビューの上に置いて、クリックするとかけ算を行ったりする「普通のボタン」です。
図1 普通の「UIButton」をナビゲーションバー上に置いた
でも、「ナビゲーションバー」には、そこに置く専用のボタンがあります。「UIBarButtonItem」というクラスのオブジェクトです。「インターフェイス・ビルダー」の「ライブラリ」では「Bar Button Item」という名前で選択できます。
図2 ナビゲーションバー上に置く専用のボタン
このボタンの「identifier」という欄にはいろいろな選択肢があって、たとえば「Add」を選べば「+」の表示にできます。
図3 「Identifier」にいろいろな選択肢
でも、なぜか「モーダルビュー」などでよく使う、「i」の形のボタンは、UIButtonの属性インスペクタからしか選択できないんです。将来のiOS SDKで、このへんを統一してくれるように希望します。
図3 「i」のボタンは「UIButton」じゃないと選べないんですヨ
そこで、この記事では、「せっかくナビゲーションバーを使えるようになったんだから、ナビゲーションバー専用のボタンを使いたい」という目的のために、ひとつアホなアプリを作ります。図2のように「Add」に設定した「Bar Button Item」をクリックすると、画面に表示される「Ge」の字が増えるというものです。
図5 ナビゲーションバー上の「+」ボタンで「Ge」の字が増える、きわめてアホなアプリ

これまでの知識と経験でできること

「ナビゲーションコントローラ」を自力で導入

アプリケーションで使うビューにはラベルを1個しか置きません。ですから、初期設定でやたら複雑なビューを作ってくれる「Navigation-based Application」のテンプレートは使いません。「View-based Application」のプロジェクトを作成し、「ナビゲーションコントローラ」は自力で導入します。
アプリケーション名(プロジェクト名)は「ButtonItem」にしましょう。
この「ButtonItem」アプリケーションについて、自分で作るナビゲーションと全く同じように、ナビゲーションコントローラの設定をします。

ButtonItemViewController.xibにラベルを置く

インターフェイス・ビルダー上でButtonItemViewController.xibを編集し、画面にラベルをひとつ加えます。

置いたラベルを編集する

まず、大事な設定をします。それは、このラベルの「Text」の欄を空白にしておくことです。このラベルに表示する値はプログラムの中で指定するのですが、そのときインターフェイス・ビルダー上で初期値が指定されていると、プログラム中での指定がうまく反映されないようです。
理由は正確にはわかりませんが、おそらくButtonItemViewControllerが、ナビゲーションコントローラーの上に載っているのが原因と思われます。不具合とは行かないまでも改善してほしい事項です。
図6ラベルの「Text」は空白にしておく
もうひとつ。ラベルの(文字がないので選択しにくいかもしれませんが、カンで)「ハンドル」を操作して、占める領域を少し大きくしておきます。本書でラベル「output」などの占める領域を大きくしたのと同じ作業です。

バーボタンアイテムの作り方

MainWindow.xibを開く

バーボタンアイテムはナビゲーションバーの上に置きますから、「MainWindow.xib」を開いて編集します。

Bar Button itemをバーの上に置く

ライブラリから、図2に示した「Bar Button Item」を選択し、ドラッグドロップで、ナビゲーションアイテムの上に置きます。

Bar Button Itemの選択は簡単

置いた「バーボタンアイテム」を選択します。これは、とても簡単です。簡単でなかったのは、「最も簡単なモーダルビューの作り方」で、ナビゲーションバー上にUIButtonを置いたときです。このとき、インターフェイス・ビルダーは、「Bar Button Item」を選んだように認識したがっていましたね。今回は、まさにそれです。属性インスペクタのタイトルが「Bar Button Item Attributes」になっていれば激烈オッケーです。
図3のように、「Identifier」のリストから「Add」を選択します。ボタンが「+」の表示になりましたね。

一度実行してみよう

ここまで作業したら、全てのファイルを保存して、一度実行してみましょう。ナビゲーションバーの下に「BarButtonItem」のビューが表示されていれば成功です。また、「ナビゲーションバー」には「+」のボタンが表示されているでしょう。「BarButtonItem」ビューに何も表示されないのは、初期値を空白にしたのですから、正常です。


次に、これらのビューコントローラやボタンを使うプログラムを編集していくのですが、なんと、編集するのは、BarButtonItemViewControllerクラスだけです。ナビゲーションバーやバーボタンアイテムを置いた「MainWindow.xib」と連携するのは「BarButtonItemAppDelegate」クラスなのですが、こちらの定義には、「もう」手をつけなくていいのです。
BarButtonItemViewControllerクラスの定義を編集して、ラベルに「Ge」という文字列を増やします