libro
www.tuyano.com
初心者のためのiphone/ipadプログラミング入門

Interface Builderを使ってアプリを作成する! (2/5)

作成:2011-03-17 08:02
更新:2011-04-02 15:14

■Interface Builderのウインドウ類について

では、Xcodeにある「MainWindow.xib」を開きましょう。Xcode 3.2ではそのままファイルをダブルクリックしてInterface Builderを起動してください。Xcode 4では、ファイルを選択すると自動的にInterface Builderの画面が現れます。

Interface Builderでは、編集のためのさまざまなウインドウが現れ、これらを操作して作業を行います。Xcode 4の場合、初期状態ではいくつかのウインドウは表示されず、メインウインドウの右上にある「View」というところのボタンをクリックすることでウインドウの表示をON/OFFできます。――では、これらの基本的な働きについて理解しておきましょう。

nibファイルウインドウ
Xcode 3.2では、真ん中の下の方に見える、アイコンがいくつか並んだウインドウです。これは、nibファイルを開いたときに現れるウインドウで、複数のnibファイルを開けば、それぞれのnibファイルごとにこのウインドウが現れます。Xcode 4では、GUIのデザイン画面左側に、細長いエリアが用意され、ここに必要なアイコン類が並んで表示されます。

ここに表示されるアイコンは、nibファイルの基本的なオブジェクト類になります。ざっと整理すると以下のようになるでしょう。

File's Owner――自身を示すアイコンです。例えば、MainWindow.xibならばアプリケーションのオブジェクト((UIApplicationクラスというもの)になりますし、◯◯VewController.xibならば、◯◯VewControllerというクラスのインスタンスになります。

First Responder――これは、フォーカスを最初に受け取るオブジェクトを示すものです。例えば、コピー&ペーストなどのように、現在フォーカスのあるものに対して処理を行うようなことがありますので、「今、フォーカスのあるオブジェクト」を扱うのにFirst Responderが用いられます。

その他のアイコン(〇〇AppDelegate、◯◯ViewController、View、Windowなど)――これらは、そのnibファイルで使われるオブジェクト類です。例えば、MainWindow.xibではウインドウを示すWindowsアイコンがありますし、使用する◯◯ViewControllerクラスを示すアイコンもあります。◯◯VewController.nibでは、表示するビュー(View)のアイコンが用意されています。

Libraryウインドウ
Xcode 3.2の図で、一番左側にある細長いウインドウです。Xcode 4では、画面の右下に表示されています。

これは、GUIで利用できるさまざまな部品類をまとめたものです。以下の3つ(または4つ)の切り替えボタンがあり、これらによりさまざまな部品が一覧表示されます。

「Objects」――GUIのコンポーネント類が一覧表示されます。
「Classes」――GUIとして扱えるコンポーネントではない、(画面にGUIとして表示されない)一般的なクラスが表示されます。Xcode 4では、「File Template Library」となっています。
「Media」――イメージファイルなどのデータ類が一覧表示されます。
「Code Snipet」――Xcode 4から追加されたもので、ソースコードの汎用文を部品としてまとめたものです。

ここから、使いたい部品を選んで、デザインウインドウにドラッグ&ドロップすることで、その部品を配置ししていくことができます。

デザインウインドウ
下の図で、中央にある、グレーで一面表示されているウインドウです。これが、開いたMainWindow.xibのウインドウの表示デザインをするためのウインドウです。ウインドウや「ビュー」と呼ばれる画面表示の部品類を開くと、このようなウインドウが現れます。ここに、Library運動から必要なコンポーネントをドラッグ&ドロップしたり、配置した部品を移動やリサイズして画面の表示を作成していきます。

Inspectorウインドウ
Xcode 3.2の図で、右側にある細長いウインドウです。Xcode 4では、右側上部に配置されます。ウインドウの上部にある4つ(または6つ)のアイコンを表示したボタンを切り替えながら、さまざまな情報や設定を表示し、変更することができます。配置したGUI部品を選択すると、その部品に関する各種情報・設定類が表示されるので、このウインドウのボタンを切り替えながら設定を行います。用意されているアイコンは、以下のようになっています。

File Inspector――Xcode 4から新たに追加されたもので、ファイルの属性などを管理します。
Quick Help――これもXcode 4から追加されたもので、クイックヘルプを表示します。
Attributes Inspector――選択した部品の細かな属性を設定します。
Connections Inspector――GUI部品と、Xcodeに用意したプロパティやメソッドとの接続(関連付け)に関する設定を管理するものです。
Size Inspector――GUI部品の大きさに関する設定を行います。
Identitiy Inspector――GUI部品の名前やID、使用クラスなどの設定を行います。

これらのウインドウを切り替えつつ、GUIを配置したり、選択したGUIの設定を行ったりしながら、GUIの作成を行うことになります。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。


※関連コンテンツ

「初心者のためのiphone/ipadプログラミング入門」に戻る