Interface Builderでのレイアウト

次は、Inteface Builderでの作業になる。プロジェクトウインドウにある、MemoPadViewController.xibファイルをダブルクリックする。Interface Builderが起動するので、そちらに移ろう。

Interface Builderの動作画面は、次のようになっていると思う。

ここでは、4つのウインドウが表示されている。それぞれを簡単に説明しよう。

MemoPadViewController.xibというタイトルのウインドウは、先ほどクリックしたxibファイルの内容を表すものだ。このウインドウは、xibウインドウと呼ばれる。

Viewというタイトルのウインドウは、アプリケーションを実行したときに表示される画面になる。このウインドウの上に、様々な部品を並べていくことになる。

いろいろな設定項目が並んでいるウインドウは、インスペクタだ。ここでは、ビュー上に配置した部品に対して、様々な設定を行う。レイアウトする部品は、ライブラリウインドウから選択することになる。この2つのウインドウは、Toolsメニューから開くことができる。

では、ユーザインタフェースをレイアウトを行おう。このアプリケーションでは、上部にナビゲーションバーとバーボタン、その下にテキストビューを配置する。それぞれの部品をライブラリから探して、ビューの上にドラッグ&ドロップで追加していこう。配置するときはガイドが表示されるので、簡単に適切な大きさにリサイズできると思う。

ナビゲーションバーには、タイトルを設定しておく。ダブルクリックでテキストを入力することができるので、「Memo Pad」と書いておく。バーボタンは、Doneボタンにしておく。これは、システム側でそのようなボタンが用意されているので、それを使おう。追加したボタンを選択した状態で、インスペクタを表示する。「Style」と「Identifier」という設定項目があるので、両方とも「Done」にしておこう。

ちなみに、Identifierとして他の項目を選択すると、自動的にタイトルや画像が設定される。

テキストビューには、文字がいろいろと書かれていると思う。これは消してしまおう。