Partager via

Ajouter un module de reconnaissance de mouvement de balayage

  • Article

Un mouvement de balayage se produit lorsqu’un doigt est déplacé sur l’écran dans une direction horizontale ou verticale et est souvent utilisé pour lancer la navigation dans le contenu.

Pour qu’un View reconnaisse un mouvement de balayage, créez une instance SwipeGestureRecognizer, définissez la propriété Direction sur une valeur d’énumération SwipeDirection (Left, Right, Up ou Down), définissez éventuellement la propriété Threshold, traitez l’événement Swiped, et ajoutez le nouveau module de reconnaissance de geste sur la collection GestureRecognizers sur la vue. L'exemple de code suivant montre un SwipeGestureRecognizer attaché à un BoxView :

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

Voici le code C# équivalent :

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

boxView.GestureRecognizers.Add(leftSwipeGesture);

La classe SwipeGestureRecognizer inclut également une propriété Threshold, qui peut éventuellement être définie sur une valeur uint qui représente la distance de balayage minimale devant être parcourue pour qu’un balayage soit reconnu, en unités indépendantes de l’appareil. La valeur par défaut de cette propriété est 100, ce qui signifie qu’un balayage inférieur à 100 unités indépendantes de l’appareil est ignoré.

Reconnaissance du sens du balayage

Dans les exemples ci-dessus, la propriété Direction est définie sur une seule valeur de l’énumération SwipeDirection. Toutefois, il est également possible de définir cette propriété sur plusieurs valeurs de l’énumération SwipeDirection, pour que l’événement Swiped soit déclenché en réponse à un balayage dans plusieurs directions. Toutefois, la contrainte est qu’un seul SwipeGestureRecognizer peut seulement reconnaître les balayages qui se produisent sur le même axe. Par conséquent, les balayages qui se produisent sur l’axe horizontal peuvent être reconnus en définissant la propriété Direction sur Left et Right :

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

De même, les balayages qui se produisent sur l’axe vertical peuvent être reconnus en définissant la propriété Direction sur Up et Down :

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

Sinon, un SwipeGestureRecognizer pour chaque direction de balayage peut être créé afin de reconnaître les balayages dans toutes les directions :

<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>

Voici le code C# équivalent :

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);

Remarque

Dans les exemples ci-dessus, le même gestionnaire d’événements répond au déclenchement de l’événement Swiped. Toutefois, chaque instance SwipeGestureRecognizer peut utiliser un autre gestionnaire d’événements si nécessaire.

Réponse au balayage

Un gestionnaire d'événements pour l’événement Swiped est illustré dans l’exemple suivant :

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;
    }
}

Les SwipedEventArgs peuvent être examinés pour déterminer le sens du balayage, avec une logique personnalisée répondant au balayage en fonction des besoins. Vous pouvez obtenir le sens du balayage à partir de la propriété Direction des arguments d’événement, définie sur une des valeurs de l’énumération SwipeDirection. Par ailleurs, les arguments d’événement ont également une propriété Parameter définie sur la valeur de la propriété CommandParameter, le cas échéant.

Utilisation des commandes

La classe SwipeGestureRecognizer inclut également les propriétés Command et CommandParameter. Ces propriétés sont généralement utilisées dans les applications qui utilisent le modèle modèle-vue-vue modèle (MVVM). La propriété Command définit le ICommand à appeler quand un mouvement de balayage est reconnu, avec la propriété CommandParameter définissant un objet à passer à ICommand.. L’exemple de code suivant montre comment lier la propriété Command à un ICommand défini dans le modèle de vue dont l’instance est définie comme page BindingContext :

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);

Le code XAML équivalent est :

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

SwipeCommand est une propriété de type ICommand définie dans l’instance de modèle de vue qui est définie comme page BindingContext. Quand un mouvement de balayage est reconnu, la méthode Execute de l’objet SwipeCommand est exécutée. L’argument de la méthode Execute est la valeur de la propriété CommandParameter. Pour plus d’informations sur les commandes, consultez Interface de commande.

Création d’un conteneur de balayage

La classe SwipeContainer, illustrée dans l’exemple de code suivant, est une classe de reconnaissance de balayage généralisée encapsulable autour d’un View pour la reconnaissance de mouvement de balayage :

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;
    }
}

La classe SwipeContainer crée des objets SwipeGestureRecognizer pour les 4 directions de balayage et attache les gestionnaires d'événements Swipe. Ces gestionnaires d’événements appellent l’événement Swipe défini par le SwipeContainer.

L’exemple de code XAML suivant montre la classe SwipeContainer qui encapsule un BoxView :

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

L’exemple de code suivant montre comment SwipeContainer encapsule un BoxView dans une page C# :

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 }
        };
    }
}

Quand BoxView reçoit un mouvement de balayage, l’événement Swiped dans SwipeGestureRecognizer est déclenché. Cet événement est traité par la classe SwipeContainer qui déclenche son propre événement Swipe. Cet événement Swipe est traité dans la page. Les SwipedEventArgs peuvent ensuite être examinés pour déterminer le sens du balayage, avec une logique personnalisée répondant au balayage en fonction des besoins.