iPhone徹底解剖： 最初の一歩

Interface BuilderによるiPhoneアプリケーションのUI構築

　現段階で、作成したプロジェクトにUIはありません。これを確認するには、Command-Rキーを押します（あるいは［Run］→［Run］を選択します）。これでアプリケーションがiPhoneシミュレータに配備されます。図4は、シミュレータに表示される空白の画面です。

　無論、これでは使い物になりません。そこで、アプリケーションのUIにコントロールをいくつか追加します。プロジェクトのファイルの一覧を見ると、.xibという拡張子を持つ2つのファイル「main.xib」、「HelloDevXViewController.xib」があります。.xibファイルは、アプリケーションのUIの定義を含むXMLファイルです。.xibファイルを編集するには、その内容のXMLを手作業で変更することもできますが、Interface Builderを使って編集する方が簡単です（これが正当なやり方です）。Interface BuilderはiPhone SDKに同梱されており、これを使えばドラッグアンドドロップ操作でiPhone（およびMac）アプリケーションのUIを構築できます。

図4　空白の画面: iPhoneシミュレータでのアプリケーションのテスト

　「HelloDevXViewController.xib」ファイルをダブルクリックしてInterface Builderを起動します。図5は、Interface Builderと、そこで表示される「HelloDevXViewController.xib」の内容（現時点では空）です。これを見るとわかるように、Libraryウィンドウに各種のコントロールがあり、それらのコントロールをiPhoneアプリケーションのUIに追加できます。ViewウィンドウにはUIのレイアウトがグラフィックスで示されます。

図5　UIの構築: Interface BuilderによるiPhoneアプリケーションのUI構築

　LabelコントロールをUIにドラッグアンドドロップします。追加されたLabelを選択し、［Tools］→［Inspector］をクリックします（図6を参照）。［Attributes］タブをクリックし、「Hello, DevX!」と入力します。さらに、このラベルのレイアウトを変更して中央に位置合わせします。

図6　Inspector Tool: Labelコントロールの属性の編集

　次に、Text Fieldコントロールをフォームに追加し、さらにRound Rect Buttonコントロールを追加します。Round Rect Buttonコントロールの属性を編集し、そのTitleを「Click Me!」に設定します（図7）。

図7　フォームの編集: Round Rect Buttonコントロールの属性の編集

　Command-Sキーを押して「HelloDevXViewController.xib」ファイルを保存します。Xcodeに戻り、Command-Rキーを押してアプリケーションを再び実行します。iPhoneシミュレータに、今度は変更されたUIが表示されます（図8を参照）。

図8　現時点のUI: コントロールが追加されたUI

　Text Fieldコントロールをタップして、キーボードが自動的に表示されることを確認します（図9を参照）。

図9　キーボードの起動: Text Fieldコントロールをタップするとキーボードが自動的に表示される

　iPhoneシミュレータのHomeボタンを押して、シミュレータにアプリケーションがインストールされていることを確認します（図10を参照）。HelloDevXアイコンを再びタップすると、アプリケーションに戻ります。

図10　完成！ シミュレータにアプリケーションがインストールされている

筆者注

　iPhone上で同時に複数のアプリケーションを実行することはできません（Appleの一部のビルトインアプリケーションは除く）。そのため、iPhoneの Homeボタンを押すと、アプリケーションは終了します。アプリケーションアイコンをタップすると、アプリケーションが再び最初から開始されます。

　iPhoneシミュレータは表示方向の変更にも対応しています。表示を横長モードに変更するには、Commandキーを押しながら右向き矢印キーを押します。Commandキーを押しながら左向き矢印キーを押すと、縦長モードに戻ります。

　作成したアプリケーションが、表示方向の変更に反応しないことに注意してください。アプリケーションのコードを修正して、表示方向が変更されたとき、それに反応するようにする必要があります。

　Xcodeで、「HelloDevXViewController.m」ファイルを編集し、次のコードセグメントを探します。

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

　上記のコードを次のように変更して、YESを返すようにします。

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
interfaceOrientation {
    // Return YES for supported orientations
    return YES;
}

　アプリケーションを再び実行します。今度は、表示方向の変更に応じてアプリケーションが回転します。