【Swift】画像(UIImageView)を表示してタップ検知(UITapGestureRecognizer)を実装するステップバイステップ

2024年2月15日2024年4月2日

【iOS/Xcode15】SwiftでUIImageViewにタップ検知を実装するステップバイステップ

ふくしま

お疲れ様です！株式会社メモリアインクの福嶋です！
お忙しい中記事をご覧いただきありがとうございます。

この記事では、UIImageViewにタップ検知を実装する方法を初心者にも理解しやすいようステップバイステップで解説します。
今回は画像にタップ機能を追加してみましょう！

この記事を読んで分かること…
・画像(UIImageView)の配置方法
・UIImageViewにタップ検知機能を実装するための具体的なコードの書き方

環境

・Swift 5.9
・Xcode 15

画像のタップ検知機能の実装

それでは早速、画像のタップ検知機能を実装していきましょう！
画像をタップしたらコンソール上にイベント内容を表示するような処理を例に、実装方法を解説します。

ステップ１：プロジェクトに画像ファイル入れる

①画像ファイルをナビゲーターエリアのプロジェクト配下にドラッグ&ドロップ
②「Copy items if needed」、「Create group」にチェックが入っていることを確認する
③Finishをタップ

ステップ２：StoryboardにUIImageViewを配置する

①＋アイコンをタップ
②「Image View」をStoryboard上にドラッグ&ドロップ

ステップ３：UIImageViewに画像ファイルを紐づけ

ステップ２で配置したImageViewを選択して、ユーティリティエリアのImagesで該当の画像ファイルを選択する

ステップ５：ViewControllerにUIImageViewを紐づけ

Storyboard上のUIImageViewを選択して、ViewControllerに紐づける。

ステップ６：ViewControllerにタップ検知の処理を実装

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.isUserInteractionEnabled = true
        imageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(imageViewTapped(_:))))
    }
    
    @objc func imageViewTapped(_ sender: UITapGestureRecognizer) {
        print("画像がタップされました")
    }

}

コードの説明
🔸画像タップ時の処理の定義
12行目@objc キーワードをつけてimageViewTapped 関数を定義
画像をタップするとコンソールに「画像がタップされました」と表示されます。

🔸ViewDidLoad内でImageViewの設定をする
8行目imageView.isUserInteractionEnabled をtrue にする。
このコードは、UIImageViewのインスタンスでユーザーのインタラクション（例えば、タップ）を検知できるようにするためのものです。デフォルトはfalese です

9行目addGestureRecognizer メソッドは、タップ、ピンチ（2本指での拡大・縮小）、スワイプなどのユーザーのジェスチャーを検出し、それに応じたアクションを実行することが可能になります。
今回は、タップを検出するためにUITapGestureRecognizer を指定しています。
UITapGestureRecognizerのtargetパラメーターにはジェスチャーが認識されたときにアクションメッセージを受け取るオブジェクト(今回はViewControllerなのでself)を指定し、actionパラメーターにはそのアクションメッセージ(画像タップ時の処理を定義したimageViewTapped 関数)を指定します。このアクションメッセージは、ジェスチャーが認識されたときに実行されるメソッドを示します。
#selector は@objc をつけたメソッドを使うためのおまじないぐらいに考えておけばOKです！