スワイプジェスチャ認識エンジンを追加する

[アーティクル]
07/13/2023

スワイプジェスチャが発生するのは、指が画面に沿って水平または垂直方向に動かされたときで、多くの場合コンテンツのナビゲーションを開始するために使われます。この記事のコード例は、Swipe Gesture サンプルから取得されています。

View にスワイプジェスチャを認識させるには、SwipeGestureRecognizer インスタンスを作成し、Direction プロパティに SwipeDirection 列挙値 (Left、Right、Up、または Down) を設定し、必要に応じて Threshold プロパティを設定し、Swiped イベントを処理して、新しいジェスチャ認識エンジンをビューの GestureRecognizers コレクションに追加します。次に示すコード例は、BoxView に関連付けられている SwipeGestureRecognizer です。

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

C# での同等のコードを次に示します。

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);

SwipeGestureRecognizer クラスには Threshold プロパティも含まれています。このプロパティには、必要に応じて、スワイプが認識されるために必要な最小スワイプ距離を表す、デバイスに依存しない単位の uint 値を設定できます。このプロパティの既定値は 100 で、これはデバイスに依存しない単位で 100 未満のスワイプは無視されることを意味します。

スワイプの方向を認識する

上の例では、Direction プロパティに SwipeDirection 列挙型の 1 つの値が設定されています。ただし、このプロパティに SwipeDirection 列挙型の複数の値を設定し、複数の方向のスワイプに対して Swiped イベントが生成されるようにすることもできます。ただし、1 つの SwipeGestureRecognizer では同じ軸上で発生するスワイプしか認識できないという制約があります。したがって、水平軸上で発生するスワイプは、Direction プロパティに Left と Right を設定することによって認識できます。

<SwipeGestureRecognizer Direction="Left,Right" Swiped="OnSwiped"/>

同様に、垂直軸上で発生するスワイプは、Direction プロパティに Up と Down を設定することによって認識できます。

var swipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up | SwipeDirection.Down };

または、各スワイプ方向に対する SwipeGestureRecognizer を作成すると、すべての方向のスワイプを認識することができます。

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Up" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Down" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

C# での同等のコードを次に示します。

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
var rightSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
rightSwipeGesture.Swiped += OnSwiped;
var upSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
upSwipeGesture.Swiped += OnSwiped;
var downSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Down };
downSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);
boxView.GestureRecognizers.Add(rightSwipeGesture);
boxView.GestureRecognizers.Add(upSwipeGesture);
boxView.GestureRecognizers.Add(downSwipeGesture);

注意

上の例では、Swiped イベントの発生に対して同じイベントハンドラーが応答します。ただし、各 SwipeGestureRecognizer インスタンスでは、必要に応じて、異なるイベントハンドラーを使用できます。

スワイプに応答する

次の例では、Swiped イベントに対するイベントハンドラーを示します。

void OnSwiped(object sender, SwipedEventArgs e)
{
    switch (e.Direction)
    {
        case SwipeDirection.Left:
            // Handle the swipe
            break;
        case SwipeDirection.Right:
            // Handle the swipe
            break;
        case SwipeDirection.Up:
            // Handle the swipe
            break;
        case SwipeDirection.Down:
            // Handle the swipe
            break;
    }
}

SwipedEventArgs を調べることでスワイプの方向を特定し、必要に応じてカスタムロジックでスワイプに応答できます。スワイプの方向は、イベント引数の Direction プロパティから取得できます。このプロパティには、SwipeDirection 列挙型の値のいずれかが設定されます。さらに、イベント引数には Parameter プロパティもあり、CommandParameter プロパティ (定義されている場合) の値が設定されます。

コマンドを使用する

SwipeGestureRecognizer クラスには、Command プロパティと CommandParameter プロパティも含まれています。通常、これらのプロパティは、Model-View-ViewModel (MVVM) パターンを使用するアプリケーションで使用されます。 Command プロパティではスワイプジェスチャが認識されたときに呼び出される ICommand が定義されており、CommandParameter プロパティでは ICommand. プロパティに渡されるオブジェクトが定義されています。次のコード例では、インスタンスがページの BindingContext として設定されているビューモデルで定義されている ICommand に Command プロパティをバインドする方法が示されています。

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left, CommandParameter = "Left" };
leftSwipeGesture.SetBinding(SwipeGestureRecognizer.CommandProperty, "SwipeCommand");
boxView.GestureRecognizers.Add(leftSwipeGesture);

同等の XAML コードを次に示します。

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Command="{Binding SwipeCommand}" CommandParameter="Left" />
    </BoxView.GestureRecognizers>
</BoxView>

SwipeCommand は、ページの BindingContext として設定されているビューモデルのインスタンスで定義されている ICommand 型のプロパティです。スワイプジェスチャが認識されると、SwipeCommand オブジェクトの Execute メソッドが実行されます。 Execute メソッドへの引数は、CommandParameter プロパティの値です。コマンドについて詳しくは、コマンドインターフェイスに関するページをご覧ください。

スワイプコンテナーを作成する

次のコード例で示されている SwipeContainer クラスは、スワイプジェスチャの認識を実行するために View にラップされる一般化されたスワイプ認識クラスです。

public class SwipeContainer : ContentView
{
    public event EventHandler<SwipedEventArgs> Swipe;

    public SwipeContainer()
    {
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Left));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Right));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Up));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Down));
    }

    SwipeGestureRecognizer GetSwipeGestureRecognizer(SwipeDirection direction)
    {
        var swipe = new SwipeGestureRecognizer { Direction = direction };
        swipe.Swiped += (sender, e) => Swipe?.Invoke(this, e);
        return swipe;
    }
}

SwipeContainer クラスでは、4 つのスワイプ方向すべてに対して SwipeGestureRecognizer オブジェクトが作成されて、Swipe イベントハンドラーが関連付けられます。これらのイベントハンドラーでは、SwipeContainer によって定義されている Swipe イベントが呼び出されます。

次に示すのは、BoxView をラップしている SwipeContainer クラスの XAML コード例です。

<ContentPage ...>
    <StackLayout>
        <local:SwipeContainer Swipe="OnSwiped" ...>
            <BoxView Color="Teal" ... />
        </local:SwipeContainer>
    </StackLayout>
</ContentPage>

次に示すコードは、C# ページにおいて SwipeContainer で BoxView をラップする方法の例です。

public class SwipeContainerPageCS : ContentPage
{
    public SwipeContainerPageCS()
    {
        var boxView = new BoxView { Color = Color.Teal, ... };
        var swipeContainer = new SwipeContainer { Content = boxView, ... };
        swipeContainer.Swipe += (sender, e) =>
        {
          // Handle the swipe
        };

        Content = new StackLayout
        {
            Children = { swipeContainer }
        };
    }
}

BoxView がスワイプジェスチャを受け取ると、で SwipeGestureRecognizerSwiped イベントが生成されます。これは SwipeContainer クラスによって処理され、クラスで独自の Swipe イベントが生成されます。この Swipe イベントは、ページで処理されます。その後、SwipedEventArgs を調べることでスワイプの方向を特定し、必要に応じてカスタムロジックでスワイプに応答できます。

スワイプ ジェスチャ認識エンジンを追加する

スワイプの方向を認識する

スワイプに応答する

コマンドを使用する

スワイプ コンテナーを作成する

関連リンク

その他のリソース

スワイプジェスチャ認識エンジンを追加する

スワイプコンテナーを作成する