UIButtonをストーリーボードで配置して機能させる

[UIKit] [Stroryboard] [UIButton]

Buttonの設置

ストーリーボードで簡単にボタンを設置

ストーリーボードの機能を使えば、ボタンの設置はとても簡単に行うことができます。 以下の手順でやってみましょう。 (※ プロジェクト新規作成状態での解説になっていますので、自分の環境に則して読みましょう)

まず、プロジェクトを開いたら、Main.storyboardをクリックしてストーリーボードを表示します。

/data/uploads/20200420224754.png

Xcode画面右上の「+」ボタンをクリックしてUIKitパーツをストーリーボードに追加します。

/data/uploads/20200420224754-2.png

今回はButtonを選択して、ストーリーボードにドラッグ&ドロップしましょう。

/data/uploads/2020-04-21_11_37_30.png

これでストーリーボードへボタンの設置は完了しました。

レイアウトの調整など他にもやることはありますが、 とりあえずコードを書かなくても画面へのボタンは簡単に設置できます。

ボタンをソースコードと関連付けて機能させる

ストーリーボードに設置しただけではボタンは押せるだけで何もしません。 ボタンを押すとどうするのか具体的にプログラムを記述してやる必要がありますので ソースコードと関連付けて実際に動かせるようにします。

その前に、今は特に必要のないインスペクタの画面表示を閉じておきましょう。

/data/uploads/20200420224809.png

続いて、下の画像にある部分をクリックして「Assistant」をクリックしましょう。

/data/uploads/20200420224854.png

新規作成したプロジェクトでは、ViewControllerのストーリーボードとソースコードは自動生成されていますので、「Assistant」をクリックすることで、ViewController.swiftの内容がストーリーボードの横に表示されます。

/data/uploads/20200420224918.png

ソースコード内でボタンを変数として扱うためにIBOutletで接続する

ストーリーボードに配置したボタンをcontrolキーを押しながらコード側にドラッグ&ドロップします。

/data/uploads/20200423012325.png

ここでは接続したときの変数名を「button1」とします。 「Name」の部分に「button1」と入力して「Connect」ボタンを押します。

/data/uploads/20200423012533.png

これでコード内で「button1」という変数名でボタンを使用することができるようになりました。

ボタンを押したときの処理をするためにIBActionで接続する

次に、ボタンを押したときの処理を行うためにIBActionを設定します。 ボタンを押して指が離れたとき(touchUpInside)のときのメソッドを追加します。

ストーリーボードに配置したボタンを右クリックしてアクション一覧を表示させます。

touchUpInsideの右側にある◯にマウスを持っていくと「+」に変わるので、それをコードにドラッグ&ドロップします。

/data/uploads/20200423012533.png

出てきた設定入力画面で、「Name」の部分に「touchButton1」と入力して「Connect」ボタンを押します。

/data/uploads/20200423013240.png

これで、ボタンを押したときの処理をコードで書くことでボタンを機能させることができるようになりました。

ボタンが押されたことを確かめる

ソースコードでtouchButton1のメソッドの中にデバッグプリントを記述しましょう。

  @IBAction func touchButton1(_ sender: Any) {
    print("ボタンが押されました")
  }

print()を書くことで、デバッグコンソールという画面でボタンが押されたことを確かめることができます。

ここまで出来たら、Xcodeにある「▷」を押してアプリをiPhoneシミュレーターで実行してみましょう。

/data/uploads/20200423013525.png

iPhoneシミュレーターが起動し、アプリが実行されます。

画面に表示されている「Button」を押してみましょう。

/data/uploads/20200423013826.png

そうすると、Xcodeのデバッグコンソールが表示され、 「ボタンが押されました」という文字が出力されます。

/data/uploads/20200423014007.png

これで基本的なボタンの配置は完了です。

Posted_at:2020-04-23