ボタン押下したら、テキストボックスにテキストが表示されるお約束のような単一ビューのアプリを作成してみる。
プロジェクトの作成～画面作成
まず、「iOS開発メモ2」を参考に単一ビューアプリケーションのプロジェクトを作成する。作成したら、Main.storyboardを選択してインタフェースビルダー(以降IB)を起動する。
部品となるボタンとテキストボックスをXcode右下のツールボックスからメインビューにドラッグして配置する。
ボタンとテキストボックスを配置すると、IBの左側にツリー形式でUI部品の親子関係ツリーが表示される。(Visual Studioのドキュメントアウトラインのようなもの)
ここで部品の親子関係を変更したり、順序を入れ替えたりなどできるようになる。
これだけで、ビルド＆実行すれば、IB上の見た目と同じアプリが起動されるが、ボタンをしても何も反応しないはずである。UI部品のインスタンスがどこかに生成されて画面に描画されるだけで、ハンドリングされてないわけである。
IBOutletとIBAction
Xcodeによる開発では、インスタンス化されたボタンにイベント処理を付与したり、テキストボックスのテキストを書き込むために、プログラム変数と緋付ける操作をする必要がある。
IBOutletとは、IB上で定義した部品へアクセスするための変数宣言であり、生成したインスタンスのポインタを手元の変数に代入するようなイメージになる。
IBActionは、部品がもつさまざまなイベントとプログラムで定義したコールバック関数を緋付けるものである。
紐付け方法は、
-
Assistant Editorボタンを押して、IBとソースコードの2分割画面にする。ソースコードは、紐付ける変数を配置するクラス(この場合はViewController.swift)をアクティブにする。
-
IB上でテキストボックスに対して、右クリックメニューを表示すると、紐付けられる項目が表示されるので、Referencing Outletsの変数(1個しかないはず)横のマルをドラッグする。
-
線が伸びるので、クラスメンバ変数の定義あたりでリリースすると、ポップアップが表示されるので、変数名などを入力して確定すると、IBOutletの変数が追加される。
-
同じようにボタンでも同様に、クリックイベント(Touch Up Inside)からViewControllerに対して紐付ける。成功すると、イベントコールバックの関数の雛形が出力される。
ボタンアクションの実装
追加したIBActionメソッドがボタンをタップしたときにコールされるようになるので、この関数内でテキストボックスに文字列を設定する処理を記述する。
ViewContorllerで右クリックメニューを表示すると、上記の紐づけが確認できる。
@IBAction func onTouchUpInside(_ sender: Any ){
textBox.text = "Hello World!"
}
動作確認
今回はシミュレータで行う。Xcode上部のターゲットをプルダウンして、"Add additional Simulators"を選択する。おそらくXcodeインストール時の最新のiOSが選択されているはずなので、ターゲット用のiOSバージョンのシミュレータをダウンロードする。
(1GBほどあるので、時間がかかる)
ダウンロードが完了したら、ターゲットから選択してデバッグ実行する。シミュレータが起動してしばらくすると、作成したアプリが起動するので、ボタンをタップしてテキストボックスに文字列が表示されることを確認する。
IBActionメソッド内にブレークポイントを置いて、デバッグできることも確認する。
まとめ
難しい部分は何もないが、プロジェクト構成とインタフェースビルダー上で部品の追加とプログラムとの紐付け(IBOutletやIBAction)が基礎的なポイントになる。Visual Studio上での開発とはちょっと風景が違うが、まずは慣れるしかないと思う。
