XcodeでUI部品とコードのバインディングを実施するには

XcodeのStoryBoardでボタンとかテキストを配置したはいいけど、そっからどうしてアプリを書けばいいの？な悩みに一ヶ月悩まされた結果をここに記しておきます。

色々イベントがある内、全てを網羅できた訳ではないのですが、今からiOSプログラミングを始める人の参考になれば。

こんな感じで適当に部品を配置したとします。

配置した時点では、何も紐付けはされていません。まあ当然っちゃ当然ですが。

で、配置が完了したら、まずViewController.hファイルを開きます。

ViewController.hファイルで、

を行う訳です。(コードとStoryBoardの紐付けは後で行います。まずは定義だけ)

UI部品のインスタンスは、接頭辞「IBOutlet」を付与して定義します。

-(IBAction)[任意のハンドラ名]:(id)sender;

で定義します。

ViewController.hファイルで定義したUI部品のインスタンスと、イベントハンドラの定義をもとに、ViewController.mファイルでイベントハンドラを実装します。

UI部品のインスタンスは、この時点でViewController.mファイルの中で自由に利用できます。(特殊な初期化が必要なUI部品、例えば画像ビューアなんかについては調べられてませんが)

後は定義済みのイベントハンドラを実装し、中で処理をゴリゴリ書きましょう。

StoryBoardとViewController.hファイルを使ってGUIベースで紐付けを実行します。

まずはStoryBoardで、ViewControllerクラスとStoryBoardのバインディングを実施します。

ここからViewControllerのアイコンを右クリックで選択して、上の画面にドラッグします。

ドラッグしたら「Outlets」から「view」を選択。

この操作により、このStoryBoardと、ViewControllerクラスがバインディングされます(多分)。ただし、この時点ではUI部品とイベントハンドラのインスタンスはバインディングされてません。

まずはStoryBoardとViewController.hファイルを並べます。

こうして見ると分かるのですが、ViewController.hファイルで定義したUI部品のインスタンスとイベントハンドラの横には、丁度ブレークポイントでも引っ掛けてそうな具合の丸が付いてる事が分かります。

そこから左クリックでドラッグして、UI部品にドロップすることで、StoryBoardの部品とコード側で定義した要素のバインディングが出来るようになります。

他にも、StoryBoardのViewControllerアイコンを右クリックすると、UI部品のインスタンスとイベントハンドラ一覧が出てくるので、これをドラッグして引っ張ってStoryBoardの部品とくっつけましょう。(手間を考えるとこっちがメインかな？)

これでバインディングは完了です。後はProduct > Runして、動作確認をしてみてください。

ね、簡単でしょう？

参考文献：
10日でおぼえる Objective-C 入門教室　　掌田津耶乃著　　翔泳社 2012年