【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

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

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

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

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

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

目次

環境

・Swift 5.9
・Xcode 15

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

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

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

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

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

ステップ2:StoryboardにUIImageViewを配置する

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

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

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

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

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

ステップ5:ViewControllerにUIImageViewを紐づけ

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

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

ステップ6: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.isUserInteractionEnabledtrue にする。
このコードは、UIImageViewのインスタンスでユーザーのインタラクション(例えば、タップ)を検知できるようにするためのものです。デフォルトはfalese です

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

以上で実装は完了です!お疲れ様でした
アプリを実行して、画像をタップすると、コンソールに画像がタップされましたと表示されることを確認しましょう。

ジェスチャーレコグナイザーの種類

UIKitでは、さまざまなジェスチャーレコグナイザーが提供されています。以下はその例です。

  • UITapGestureRecognizer: タップジェスチャーを検出します。
  • UIPinchGestureRecognizer: ピンチ(拡大・縮小)ジェスチャーを検出します。
  • UISwipeGestureRecognizer: スワイプジェスチャーを検出します。
  • UIPanGestureRecognizer: パン(ドラッグ)ジェスチャーを検出します。
  • UILongPressGestureRecognizer: 長押しジェスチャーを検出します。

まとめ

この記事では、SwiftとXcode15を使用してUIImageViewにタップ検知機能を実装する方法を詳しく解説しました。この知識を活用すれば、よりインタラクティブなiOSアプリを開発することが可能になります。
この記事が皆様のお役に立てれば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

目次