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

次に行うのは、Interface Builderを使ってのGUIの作成です。「MyIAppViewController.xib」をInterface Builderで開き、nibファイルウインドウにある「View」アイコンをダブルクリックして開いて、デザインウインドウを表示しましょう。

ここに、Libraryウインドウの「Objects」にあるリストからGUIコンポーネントをドラッグ＆ドロップして配置します。今回は、以下の３つの部品を配置します。

Label――テキストを表示するためのものです。配置し、ダブルクリックすると、表示されているテキストを編集することができます。ここでは、「please type your name.」とか適当にかいておきます。

Text Field――テキストを入力するためのフィールドです。これは配置しておくだけでOKです。

Round Rect Button――タッチして何かを実行する、プッシュボタンです。配置した後、ダブルクリックして表示されているテキストを編集します。ここでは「click」としておきます。

これらは、配置した後、マウスでドラッグして位置を動かしたり、大きさを変更したりできます。また配置した部品は、左右の端や中央、また上下左右に隣接する部品と一定間隔離れたところなどでグリッドされ、きれいに整列して配置できるようになっています。この機能をうまく使って、部品を配置するとよいでしょう。


続いて、配置したGUIコンポーネントと、先ほどソースコードに記述したプロパティやメソッドを接続しましょう。以下の手順に従って接続を行ってください。

◯label1プロパティとLabelの接続
1. nibファイルウインドウの「File's Owner」を右ボタンでプレスし、そのままドラッグします。すると、File's Ownerのアイコンからマウスポインタまでびよ〜んとゴムのように線が伸びます。

2. そのままデザインウインドウのLabelまでドラッグして離します。画面に黒い半透明のウインドウがポップアップして現れます。

3. ここで、Outletsというところにある「label1」を選びます。これで、label1プロパティと、配置したLabelが接続されました。

◯field1プロパティとText Fieldの接続
1. 同様に、File's Ownerから、デザインウインドウに配置したText Fieldまで右ドラッグし、びよ〜んと伸びた線をText Fieldにドロップします。

2. 現れた黒い半透明のウインドウで「field1」を選びます。これで、field1プロパティと、配置したText Fieldが接続されました。

◯Round Rect Buttonのアクションとbtn1Action:の接続
1. 今度は、逆になります。配置したRound Rect Buttonから、File's Ownerまで右ドラッグし、File's Ownerのアイコンにドロップします。

2. 画面に黒い半透明のウインドウが現れるので、「Events」というところにある「btn1Action:」という項目を選びます。これで、Round Rect Buttonをタッチしたときに発生するイベントで、btn1Action:メソッドが呼び出されるようになります。

――以上で、プロパティとメソッドがGUIのコンポーネント類と接続されました。これらの接続は、「プロパティは、File's OwnerからGUIコンポーネントへ、イベントのメソッドは、GUIコンポーネントからFile's Ownerへ」というようにドラッグして行います。逆にしてしまうと黒いウインドウに項目が表示されないので注意してください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

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