前回の記事の続きです。

■InterfaceBuilderでユーザーインターフェースを編集する

InterfaceBuilderを使って、iPhone版の画面を作っていきます。InterfaceBuilderというのは、VisualBasicのフォームデザイナー画面のようなものです。ただし、VisualBasicやC#に比べるとUIとコードの連携が密ではないので、結構そこで苦労します。正直、開発環境はあまり使いやすくない気がしますね……。ドツボにはまりやすいです。

とりあえず画面を作成しましょう。XCodeのプロジェクトツリーに「MainWindow_iPhone.xib」というファイルがあるので、それをダブルクリックすると、InterfaceBuilderが起動します。要するにXIBファイルがインターフェースのデータを保存したものなわけですね。

ちなみに、XIBファイルは昔NIB(NeXT Interface Builderの略)という名前だったので、その名残でAPI名や警告メッセージなどに「NIBファイル」という言葉が時々出てきます。その場合はXIBファイルを指定してやればいいです。

ss100811_10

InterfaceBuilderの画面は複数のウィンドウで構成されていて、左から「ライブラリ」「書類」「プレビュー」「インスペクター」となります。ライブラリは部品入れ、書類はプロジェクトツリーみたいなもの、プレビューは実際のUIのイメージ、インスペクターはプロパティシートみたいなものです。

ss100811_11

余談ですが、MacOSのアプリはうしろに他のアプリのウィンドウが見えるのが苦手です。結構間違えてクリックしちゃうんですよね。InterfaceBuilderは特に酷いというか、XIBファイルを複数開くともうわけがわかりません。

話を戻して、「書類」ウィンドウに注目してください。最初からいくつか項目があります。

ss100811_11

「File’s Owner」はアプリケーションそのものと関連づけられています。
「First Responder」は簡単に説明できないので省略します(申し訳ない)。
「App Delegate」はこのUIと関連づけられているクラス、つまりAppDelegate_iPhoneクラスを表しています。
「Window」はメインウィンドウです。

Typeの欄を見ると、それぞれが関連づけられているクラスがわかります。

 

■ナビゲーションコントローラを追加する

このアプリでは「ナビゲーションコントローラ」をメインのインターフェースにしています。ナビゲーションコントローラというのは、上のナビゲーションバーに表示されるボタンで階層移動できるインターフェースのことです。標準の「メール」「iPod」など、多くのアプリに使われています。

Libraryウィンドウから「Navigation Controler」を書類ウィンドウにドラッグ&ドロップします。

ss100811_12

「Navigation Controller」の上にはあらかじめ「Navigation Bar」や「View Controller」「Navigation Item」などの部品が配置されています。書類ウィンドウの「Navigation Controller」をダブルクリックするとプレビューウィンドウが開き、外観を確認できます。

ss100811_13

Libraryに登録されている部品には、「コントローラ」「ビュー」「その他のボタンなどのアイテム」の3種類があります。コントローラはビューを制御するためのもの、ビューは画面に表示されて実際に仕事をする部分です。

InterfaceBuilderでビューだけを配置しておいたら、後でコントローラにしかないメソッドが必要になった……なんてこともよくあるので注意が必要です。

■Navigation Itemの名前を変更する

Navigation Itemはナビゲーションバーに表示されるタイトルなどを記憶しておくための部品です。Navigation Controllerの子のView Controllerの子として配置されています。

最初に表示されている画面の名前を変更しましょう。書類ウィンドウでNavigation Itemをクリックするか、プレビューウィンドウのナビゲーションバーをクリックし、InspectorウィンドウのTitle欄に「ブック一覧」と入力します。

ss100811_21

これで外観はできあがったので、上書き保存してXCodeに切り替えます。

 

話は次の記事に続きます。