Xamarin.Forms タップジェスチャでシングルタップとダブルタップを共存させる方法

今回はタップジェスチャでシングルタップとダブルタップ両方を有効にする方法について説明します。

Xamarin.FormsのTapGestureRecognizerではNumberOfTapsRequiredで何回タップしたらタップイベントが発火するかを設定することが可能です。
そのためダブルタップのイベントを入れたい際は

<Image Source="test.png">
    <Image.GestureRecognizers>
        <TapGestureRecognizer 
            Command="{Binding TapCommand}"
            NumberOfTapsRequired="2" />
    </Image.GestureRecognizers>
</Image>

このようにしてイベントを設定できます。
しかしListViewなどclickイベントが親のViewにある場合や、シングルタップと共存させたい場合などはNumberOfTapsRequiredの設定ではダブルタップの実装ができなくなってしまいます。

それを回避するためには、NumberOfTapsRequiredを指定せず、TapGestureRecognizerのCommand内で自力でタップ回数やタップの時間間隔などを利用して処理を書く必要があります。

実際のコード例は下記のとおりです。

DateTime? lastTap = null;
int numberOfTaps = 0; 
int NumberOfTapsRequired = 2;
int ToleranceInMs = 300;
public Command DoubleTapCommand => new Command(() => {
    if (lastTap == null || (DateTime.Now - lastTap.Value).TotalMilliseconds < ToleranceInMs) {
        if (numberOfTaps == (NumberOfTapsRequired - 1)){
            numberOfTaps = 0;
            lastTap = null;
            // ダブルタップ時実行したい処理
            return;
        } else {
            numberOfTaps++;
            lastTap = DateTime.Now;
        }
    } else {
        numberOfTaps = 1;
        lastTap = DateTime.Now;
    }

    Task.Factory.StartNew(async () => {
        await Task.Delay(ToleranceInMs);
        if (numberOfTaps == 1) {
            numberOfTaps = 0;
            lastTap = null;
            // シングルタップ時実行したい処理
        }
    });
});

この実装を応用すれば、3連続や4連続タップなど、任意のタップ回数のイベントも全て拾うことができるようになります。
参考にしてみてください。

タイトルとURLをコピーしました