ContentView自体にタップ判定をつけよう

タップジェスチャーを取得する方法

タイトルだけ見て「なんだそれ」って思った方もいるかも知れない。ただ単にタップされたかどうかをとってきたいのであれば、onTapGesture() を使えば苦もなく実装できるからだ。

ところがこれでは上手くいかないような状況がある。というのもonTapGesture()は同時に一つしか実行できないためだ。これがどういうふうに困るかというのは次の図を見ればわかるのではないかと思う。

要するにタップしたときの挙動が TabView 自体に備わっているのでめんどくさいことになるのである。

デモアプリ

例えば以下のコードはタブの中に表示されているコンテンツをタップするとそのタブの番号を返すコードである。

ビルドしてみればわかるが、確かにTab Content 1をタップすれば1と表示されるし、Tab Content 2をタップすれば2と表示される。ここまでは問題がないように思える。

1
import SwiftUI
2

3
struct ContentView: View {
4
    @State var selection: Int = 1
5
    var body: some View {
6
        TabView(selection: $selection,
7
                content:  {
8
                    Text("Tab Content 1").tabItem { Text("Tab1") }.tag(1)
9
                        .onTapGesture {
10
                            print(selection)
11
                        }
12
                    Text("Tab Content 2").tabItem { Text("Tab2") }.tag(2)
13
                        .onTapGesture {
14
                            print(selection)
15
                        }
16
                    Text("Tab Content 3").tabItem { Text("Tab3") }.tag(3)
17
                        .onTapGesture {
18
                            print(selection)
19
                        }
20
                })
21
    }
22
}

ではこの TabView 自体がタップされたときに別の挙動をしたい場合はどうすればよいだろうか。単純に思いつくのは TabView 自体にもonTapGesture()を追加する方法である。TabView 自体にonTapGesture()を追加してどういう意味があるのかと思うだろうが、ちょっと前の記事で触れたように「指定時間操作がなければ別の画面に遷移する」というような機能を実装しようとしたら「最後にアプリを操作した時間」というのが必要になる。

よって、最も大きいビュー自体をタップされたかどうかを検知する必要があるというわけだ。

TabView

1
import SwiftUI
2

3
struct ContentView: View {
4
    @State var selection: Int = 1
5
    var body: some View {
6
        TabView(selection: $selection,
7
                content:  {
8
                    Text("Tab Content 1").tabItem { Text("Tab1") }.tag(1)
9
                        .onTapGesture {
10
                            print(selection)
11
                        }
12
                    Text("Tab Content 2").tabItem { Text("Tab2") }.tag(2)
13
                        .onTapGesture {
14
                            print(selection)
15
                        }
16
                    Text("Tab Content 3").tabItem { Text("Tab3") }.tag(3)
17
                        .onTapGesture {
18
                            print(selection)
19
                        }
20
                })
21
            // 追加
22
            .onTapGesture {
23
                print("TabView")
24
            }
25
    }
26
}

で、やってみればわかるのだがこのアプリは想定通りの動作をしない。というのも TabView 自体がタップされた場所で$selectionの値を変更してタブを切り替えるという動作が実装されているからだ。

つまり、TabView 自体にonTapGesture()をつけた時点でそちらの機能が優先されてしまい、タブが切り替わらなくなってしまうのである。

第一、この方式はあまり推奨されない。何故ならこれだと TabView のタップされた判定しかとってこれないからだ。他のビューでも同様にタップされたかの判定を書く必要が生じるが、それはオブジェクト指向に反する。

App.swift

ならばアプリのルートに対してonTapGesture()をつければいいじゃないかという話になるが、やはりこれもタブの切替ができなくなってしまう。

1
@main
2
struct TouchDemoApp: App {
3
    var body: some Scene {
4
        WindowGroup {
5
            ContentView()
6
                .onTapGesture {
7
                    print("TAPPED")
8
                }
9
        }
10
    }
11
}

解決策

どうしたものかと頭を悩ませていたのだが、世界中の知識が集まるStackOverflowに解決策が載っていた。

まず、以下のような Extension を作成する。これは SwiftUI というよりは Objective-C に近いのではないかと勝手に思っている。

1
extension UIApplication {
2
    func addTapGestureRecognizer() {
3
        guard let window = windows.first else { return }
4
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapAction))
5
        tapGesture.requiresExclusiveTouchType = false
6
        tapGesture.cancelsTouchesInView = false
7
        tapGesture.delegate = self
8
        window.addGestureRecognizer(tapGesture)
9
    }
10

11
    @objc func tapAction(_ sender: UITapGestureRecognizer) {
12
        print("tapped")
13
    }
14
}
15

16
extension UIApplication: UIGestureRecognizerDelegate {
17
    public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
18
        return true // もし他のジェスチャーと競合したくない場合はfalseを設定する
19
    }
20
}

最後にこの関数をonAppear()を使って ContentView 自体に適用する。

1
@main
2
struct TouchDemoApp: App {
3
    var body: some Scene {
4
        WindowGroup {
5
            ContentView()
6
                .onAppear(perform: UIApplication.shared.addTapGestureRecognizer)
7
        }
8
    }
9
}

なんとこれだけで終わりである、神かな？