ストーリーボードでUIButtonを配置して機能させる
Buttonの設置
ストーリーボードで簡単にボタンを設置
ストーリーボードの機能を使えば、ボタンの設置はとても簡単に行うことができます。 以下の手順でやってみましょう。 (※ プロジェクト新規作成状態での解説になっていますので、自分の環境に則して読みましょう)
まず、プロジェクトを開いたら、Main.storyboardをクリックしてストーリーボードを表示します。
Xcode画面右上の「+」ボタンをクリックしてUIKitパーツをストーリーボードに追加します。
今回はButtonを選択して、ストーリーボードにドラッグ&ドロップしましょう。
これでストーリーボードへボタンの設置は完了しました。
レイアウトの調整など他にもやることはありますが、 とりあえずコードを書かなくても画面へのボタンは簡単に設置できます。
ボタンをソースコードと関連付けて機能させる
ストーリーボードに設置しただけではボタンは押せるだけで何もしません。 ボタンを押すとどうするのか具体的にプログラムを記述してやる必要がありますので ソースコードと関連付けて実際に動かせるようにします。
その前に、今は特に必要のないインスペクタの画面表示を閉じておきましょう。
続いて、下の画像にある部分をクリックして「Assistant」をクリックしましょう。
新規作成したプロジェクトでは、ViewControllerのストーリーボードとソースコードは自動生成されていますので、「Assistant」をクリックすることで、ViewController.swiftの内容がストーリーボードの横に表示されます。
ソースコード内でボタンを変数として扱うためにIBOutletで接続する
ストーリーボードに配置したボタンをcontrolキーを押しながらコード側にドラッグ&ドロップします。
ここでは接続したときの変数名を「button1」とします。 「Name」の部分に「button1」と入力して「Connect」ボタンを押します。
これでコード内で「button1」という変数名でボタンを使用することができるようになりました。
ボタンを押したときの処理をするためにIBActionで接続する
次に、ボタンを押したときの処理を行うためにIBActionを設定します。 ボタンを押して指が離れたとき(touchUpInside)のときのメソッドを追加します。
ストーリーボードに配置したボタンを右クリックしてアクション一覧を表示させます。
touchUpInsideの右側にある◯にマウスを持っていくと「+」に変わるので、それをコードにドラッグ&ドロップします。
出てきた設定入力画面で、「Name」の部分に「touchButton1」と入力して「Connect」ボタンを押します。
これで、ボタンを押したときの処理をコードで書くことでボタンを機能させることができるようになりました。
ボタンが押されたことを確かめる
ソースコードでtouchButton1のメソッドの中にデバッグプリントを記述しましょう。
@IBAction func touchButton1(_ sender: Any) {
print("ボタンが押されました")
}
print()を書くことで、デバッグコンソールという画面でボタンが押されたことを確かめることができます。
ここまで出来たら、Xcodeにある「▷」を押してアプリをiPhoneシミュレーターで実行してみましょう。
iPhoneシミュレーターが起動し、アプリが実行されます。
画面に表示されている「Button」を押してみましょう。
そうすると、Xcodeのデバッグコンソールが表示され、 「ボタンが押されました」という文字が出力されます。
これで基本的なボタンの配置は完了です。