【Swift】ボタンのダブルタップを有効にする方法をサンプルコードを示しながら解説！

2024年3月8日2024年4月2日

ふくしま

こんにちは！株式会社メモリアインクのふくしまです！

本記事では、UIButtonにダブルタップジェスチャを実装し、それを検出する方法について、実用的なサンプルコードを交えて詳細に解説します。

この記事を読んで分かること…
・ダブルタップジェスチャの基本的な設定方法
・シングルタップとダブルタップを区別する方法

環境

・Xcode 15
・Swift 5.9

ダブルタップジェスチャーの設定

ブルタップジェスチャーを設定するには、UITapGestureRecognizerクラスを使用します。このクラスは、ユーザーが画面をタップした際のジェスチャを認識し、それに応じたアクションを実行するためのものです。Swiftでは、このジェスチャーリコグナイザーを簡単に設定し、特定のメソッドに紐付けることができます。

UITapGestureRecognizer については、以下の記事で解説していますので、合わせてご覧ください。

シングルタップとダブルタップの区別

アプリケーションにおいてシングルタップとダブルタップの両方を有効にする場合、これら二つのジェスチャーを区別し、正確に検出する必要があります。通常、ダブルタップはシングルタップよりも特定の条件下でのみ検出されるべきです。これを実現するために、タイマーを使用してタップの間隔を計測し、適切なジェスチャーを判断します。

ボタンのダブルタップを有効にする方法

概要

UIButtonにダブルタップジェスチャーを追加し、ダブルタップが検出された際にログを出力する方法を例にサンプルコードを示しつつ解説していきます！

サンプルコード

import UIKit

class ViewController: UIViewController {
    
    private var button: UIButton!
    private var tapTimer: Timer?
    private let tapMaxInterval: TimeInterval = 0.3

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ボタンの作成と設定
        button = UIButton(type: .system)
        button.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        button.setTitle("タップミー", for: .normal)
        button.tintColor = .white
        button.backgroundColor = .systemOrange
        button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        self.view.addSubview(button)
    }
    
    @objc func buttonTapped(_ sender: UIButton) {
        // タイマーが既に存在する場合は、それをダブルタップと見なしてタイマーをキャンセル
        if let timer = tapTimer {
            timer.invalidate()
            tapTimer = nil
            handleDoubleTap()
        } else {
            // 最初のタップでタイマーを設定
            tapTimer = Timer.scheduledTimer(withTimeInterval: tapMaxInterval, repeats: false) { [weak self] _ in
                self?.handleSingleTap()
                self?.tapTimer = nil // シングルタップの処理後にタイマーをリセット
            }
        }
    }
    
    @objc func handleSingleTap() {
        print("ボタンがシングルタップされました")
        // シングルタップに対する処理
    }
    
    func handleDoubleTap() {
        print("ボタンがダブルタップされました")
        // ダブルタップに対する処理
    }
}

サンプルコードの説明

◾️５−７行目：
・private var button: UIButton!: ビューコントローラー内で使用するUIButtonのインスタンスを宣言します。
・private var tapTimer: Timer?: シングルタップとダブルタップを区別するために使用するタイマーのインスタンスを宣言します。
・private let tapMaxInterval: TimeInterval = 0.3: シングルタップとダブルタップの区別に使用する最大時間間隔を0.3秒として定義します。
◾️１３−１９行目：
・button = UIButton(type: .system): システムスタイルのUIButtonを作成します。
・button.frame = CGRect(x: 100, y: 100, width: 200, height: 50): ボタンの位置とサイズを設定します。
・button.setTitle("タップミー", for: .normal): ボタンの通常状態でのタイトルを設定します。
・button.tintColor = .white: ボタンのテキスト色を白に設定します。
・button.backgroundColor = .systemOrange: ボタンの背景色をシステムオレンジに設定します。
・button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside): ボタンがタップされた時に呼び出されるメソッドを設定します。
・self.view.addSubview(button): ボタンをビューのサブビューとして追加します。
◾️２２−３５行目：
・@objc func buttonTapped(_ sender: UIButton) {: ボタンがタップされたときに呼び出されるメソッド。
・if let timer = tapTimer {: 既にタイマーが設定されているか確認します。
・timer.invalidate(): タイマーが存在する場合、タイマーを無効にします。
・tapTimer = nil: タイマーをリセットします。
・handleDoubleTap(): ダブルタップが検出された場合に実行されるメソッドを呼び出します。
・tapTimer = Timer.scheduledTimer(withTimeInterval: tapMaxInterval, repeats: false) {: 最初のタップでタイマーを設定し、指定された時間内に次のタップがない場合はシングルタップとして処理します。
・self?.handleSingleTap(): シングルタップが検出された場合に実行されるメソッドを呼び出します。
・self?.tapTimer = nil: シングルタップの処理後にタイマーをリセットします。
◾️３７−４５行目：
・@objc func handleSingleTap() {: シングルタップが検出されたときに実行されるメソッド。シングルタップ時のアクションを定義します。
・func handleDoubleTap() {: ダブルタップが検出されたときに実行されるメソッド。ダブルタップ時のアクションを定義します。