ボタンのタッチイベント(クリックイベント)の実装 - ボタンのタップ時に処理を実行する

ボタンのクリック時に処理を実行するコードを紹介します。

手順

こちらの記事で作成したプロジェクトを利用します。
Single View Applicationを作成し、UIデザイナにラベルを配置します。


右下のコントロールの一覧から[Button]をクリックして選択します。


[Button]コントロールをUIデザイナにドラッグ&ドロップします。Buttonコントロールが配置されます。


メインウィンドウのファイルツリービューから"ViewControl.swift"ファイルをダブルクリックします。


別窓でコードウィンドウが表示されます。

ボタンのクリックイベント(TouchDown)の作成

コードウィンドウを表示したまま、UIデザイナのボタンをクリックして選択します。右クリックすると下図のポップアップウィンドウが表示されます。


ウィンドウの"TouchDown"の[+]アイコンから"ViewControl.swift"のコードウィンドウにドラッグします。下図の青線が表示されます。


コードウィンドウでドロップします。下図のメソッド作成ポップアップウィンドウが表示されます。


メソッド名を入力します。[Name]のテキストボックスに"ButtonTouchDown"を入力します。入力ができたら[Connect]ボタンをクリックします。


UIデザイナの[TouchDown]イベントにViewControlのButtonTouchDownメソッドと接続された表示に変わります。またViewControl.swiftに"ButtonTouchDown"メソッドが作成されます。



ラベルの宣言

UIデザイナで配置してあるLabelコントロールをクリックして選択します。選択したラベルコントロールを[Ctrl]キーを押しながら、コードウィンドウにドラッグし、ドロップします。ドロップすると下図の接続設定ポップアップウィンドウが表示されます。


ポップアップウィンドウの[Name]テキストボックスにラベルの名称を入力します。今回は"Label1"とします。入力後[Connect]ボタンをクリックします。


Label1の宣言がコードに追加されます。


UIデザイナのLabelコントロールのReferencing Outletsの項目も関連付けされた旨の表示に変わります。


生成されたコードです。


生成されたButtonTouchDownにコードを実装します。

コードの実装

下記のコードを実装します。
//
//  ViewController.swift
//  SimpleApp
//
//  Created by Penta on 2016/02/08.
//  Copyright c 2016年 iPentec. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBOutlet weak var Label1: UILabel!

    @IBAction func ButtonTouchDown(sender: AnyObject) {
        Label1.text = "Button Tap Down!";
    }

}

解説

ButtonTouchDownメソッドの
  Label1.text = "Button Tap Down!";
の部分のみが追記部分です。他のコードは生成されたコードです。
ボタンのタップによりButtonTouchDownメソッドが実行されます。Label1.textに値を代入することで、UIデザイナに配置したLabelコントロールの文字列を変更できます。今回は"Button Tap Down!"に文字列を変更します。
なお、コードを見やすくするために、Label1の宣言部をButtonTouchDownメソッドより上に配置しなおしていますが、ButtonTouchDownメソッドよりLabel1の宣言が後であっても、正しく実行できます。

プロジェクトの実行

プロジェクトを実行します。


シミュレーターが起動し下図の画面が表示されます。画面の[Button]をタップします。
Labelの文字列がコードに記述した"Button Tap Down!"の文字列に変化します。Buttonのタップ時に処理を実行できました。

著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
掲載日: 2016-02-14
iPentec all rights reserverd.