Incorporación de un reconocedor de gesto de deslizar rápidamente
Un gesto de deslizar rápidamente se produce cuando un dedo se mueve a través de la pantalla en dirección horizontal o vertical y, a menudo, se usa para iniciar la navegación a través del contenido.
Para hacer que View reconozca un gesto de deslizar rápidamente, cree una instancia de SwipeGestureRecognizer, establezca la propiedad Direction en un valor de enumeración de SwipeDirection (Left, Right, Up o Down), opcionalmente establezca la propiedad Threshold, controle el evento Swiped y agregue el reconocedor de gestos nuevo a la colección GestureRecognizers de la vista. En el ejemplo de código siguiente se muestra un elemento SwipeGestureRecognizer adjunto a BoxView:
<BoxView Color="Teal" ...>
<BoxView.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
</BoxView.GestureRecognizers>
</BoxView>
El código equivalente en C# es el siguiente:
var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
boxView.GestureRecognizers.Add(leftSwipeGesture);
La clase SwipeGestureRecognizer también incluye una propiedad Threshold, que opcionalmente se puede establecer en un valor uint que representa la distancia mínima que debe deslizarse un dedo para que se reconozca el deslizamiento, en unidades independientes del dispositivo. El valor predeterminado de esta propiedad es 100, lo cual significa que cualquier deslizamiento por debajo de 100 unidades independientes del dispositivo se ignorará.
Reconocimiento de la dirección del deslizamiento
En los ejemplos anteriores, la propiedad Direction está establecida en un valor único de la enumeración de SwipeDirection. Sin embargo, también es posible establecer esta propiedad en varios valores desde la enumeración de SwipeDirection, por lo que el evento Swiped se desencadena en respuesta a un deslizamiento en más de una dirección. Sin embargo, la restricción es que un único elemento SwipeGestureRecognizer solo puede reconocer los deslizamientos que se produzcan en el mismo eje. Por lo tanto, se pueden reconocer los deslizamientos que se producen en el eje horizontal estableciendo la propiedad Direction en Left y Right:
<SwipeGestureRecognizer Direction="Left,Right" Swiped="OnSwiped"/>
De forma similar, se pueden reconocer los deslizamientos que se producen en el eje horizontal estableciendo la propiedad Direction en Up y Down:
var swipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up | SwipeDirection.Down };
Como alternativa, puede crearse un SwipeGestureRecognizer para cada dirección de deslizamiento para que reconozca los deslizamientos en cada dirección:
<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>
El código equivalente en C# es el siguiente:
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);
Nota:
En los ejemplos anteriores, el mismo controlador de eventos responde a la activación del evento Swiped. Sin embargo, cada instancia de SwipeGestureRecognizer puede usar un controlador de eventos distinto, si es necesario.
Respuesta al deslizamiento
En el ejemplo siguiente, se muestra un controlador de eventos para el evento 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 puede examinarse para determinar la dirección del deslizamiento, con lógica personalizada como respuesta al deslizamiento, según sea necesario. Se puede obtener la dirección del deslizamiento desde la propiedad Direction de los argumentos de evento, que se establecerán en uno de los valores de la enumeración de SwipeDirection. Además, los argumentos de evento también tienen una propiedad Parameter que se establecerá en el valor de la propiedad CommandParameter, si se ha definido.
Uso de comandos
La clase SwipeGestureRecognizer también incluye las propiedades Command y CommandParameter. Estas propiedades se utilizan normalmente en aplicaciones que usan el patrón Model-View-ViewModel (MVVM). La propiedad Command define el elemento ICommand que se invocará cuando se reconoce un gesto de deslizar rápidamente, con la propiedad CommandParameter que define un objeto que se pasará al elemento ICommand.. El ejemplo de código siguiente muestra cómo enlazar la propiedad Command a un elemento ICommand definido en el modelo de vista cuya instancia se ha establecido como la página 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);
El código XAML equivalente es:
<BoxView Color="Teal" ...>
<BoxView.GestureRecognizers>
<SwipeGestureRecognizer Direction="Left" Command="{Binding SwipeCommand}" CommandParameter="Left" />
</BoxView.GestureRecognizers>
</BoxView>
SwipeCommand es una propiedad de tipo ICommand definida en la instancia de modelo de vista que se establece como la página BindingContext. Cuando se reconoce un gesto de deslizar rápidamente, se ejecuta el método Execute del objeto SwipeCommand. El argumento para el método Execute es el valor de la propiedad CommandParameter. Para obtener más información sobre los comandos, consulte The Command Interface (La interfaz de comandos).
Creación de un contenedor de deslizamiento
La clase SwipeContainer, que se muestra en el siguiente ejemplo de código, es una clase de reconocimiento de deslizamiento que se ha ajustado alrededor de un elemento View para realizar el reconocimiento de gestos de deslizar rápidamente:
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 clase SwipeContainer crea objetos SwipeGestureRecognizer para las cuatro direcciones de deslizamiento y adjunta Swipe controladores de eventos. Estos controladores de eventos invocan el evento Swipe definido por SwipeContainer.
En el ejemplo de código XAML siguiente se muestra la clase SwipeContainer que realiza el ajuste de BoxView:
<ContentPage ...>
<StackLayout>
<local:SwipeContainer Swipe="OnSwiped" ...>
<BoxView Color="Teal" ... />
</local:SwipeContainer>
</StackLayout>
</ContentPage>
En el ejemplo de código siguiente se muestra cómo SwipeContainer realiza el ajuste de BoxView en una página de 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 }
};
}
}
Cuando BoxView recibe un gesto de deslizar rápidamente, el evento Swiped en SwipeGestureRecognizer se activa. Esto se controla mediante la clase SwipeContainer, que activa su propio evento Swipe. Este evento Swipe se controla en la página. Posteriormente, SwipedEventArgs puede examinarse para determinar la dirección del deslizamiento, con lógica personalizada como respuesta al deslizamiento, según sea necesario.