[Xamarin.Forms] Un primer vistazo a SwipeView

Opciones contextuales

Los dispositivos móviles han cambiado la forma en la que el usuario interactua con el contenido de la aplicación. Un ejemplo de ello, es el uso de opciones contextuales. Hablamos de las opciones contextuales a las que podemos acceder realizando un gesto de deslizamiento (swipe).

Opciones contextuales

En Xamarin.Forms 4.4 nos llega SwipeView, un nuevo control con el objetivo de cubrir la funcionalidad relacionada con opcones contextuales. Disponible para Android, iOS y UWP (pronto también en Tizen).

SwipeView

SwipeView permite tener una colección de elementos a los que acceder haciendo un gesto de deslizamiento (Swipe).

SwipeView

Izquierda, derecha, arriba o abajo

El uso habitual de estas opciones contextuales va asociada a un listado de elementos, pero el control SwipeView puede usarse en cualquier contexto. Podemos usar SwipeView junto con BindableLayouts, ListView, CollectionView, CarouselView o incluso sin ninguna colección.

Además, se permite hacer el swipe hacia cualquier dirección:

  • Arriba
  • Abajo
  • Izquierda
  • Derecha

Para definir la dircción del swipe, SwipeView permite definir diferentes colecciones de SwipeItems:

  • TopItems
  • BottomItems
  • LeftItems
  • RightItems

Veamos un ejemplo:

<SwipeView>
     <SwipeView.BottomItems>
          <SwipeItems
               Mode="Execute">
               <SwipeItem 
                    Text="Delete"
                    Icon="coffee.png"
                    BackgroundColor="Red"
                    Invoked="OnInvoked"/>
          </SwipeItems>
     </SwipeView.BottomItems>
     <SwipeView.Content>
          <Grid
               HeightRequest="60"
               WidthRequest="300"
               BackgroundColor="LightGray">
               <Label
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Text="Swipe Up (Execute)"/>
    </Grid>
    </SwipeView.Content>
</SwipeView>

Swipe en cualquier dirección

SwipeItem o SwipeItemView

La colección de SwipeItems contiene uno o N SwipeItem. Contamos con dos tipos:

SwipeItem

Es un elemento básicos que permite definir:

  • Text: El texto a mostrar debajo del icono.
  • Icon: Una propiedad de tipo ImageSource (se soportan imagenes desde recursos, URL, etc.).
  • BackgroundColor: Define el color de fondo.

SwipeItemView

Si quieres mostrar algo con más opciones de personalización, SwipeItemView permite definir una View, es decir, se puede crear el contenido de forma personalizada con una composición de elementos.

SwipeItemView es idóneo si se quiere una mayor personalización (contenido personalizado, bordes redondeados, etc.) como por ejemplo:

Usando SwipeItemView

Ambas opciones, cuentan tanto con comando (pensando en MVVM) como con eventos.

  • Command: Comando a ejecutar.
  • CommandParameter: Es el parámetro (opcional) que podemos utilizar con el comando.
  • Invoked: Además de lanzar el comando, se lanza este evento.

Diferentes modos

Se cuentan con dos modos a la hora de trabajar con SwipeItems:

  • Reveal: En el modo mostrar, se desliza para abrir un menú de uno o varios comandos y se debe pulsar explícitamente un comando para ejecutarlo.
  • Execute: En el modo ejecutar, si se suelta el elemento que se está deslizando antes de pasar un umbral, el menú se cierra y el comando no se ejecuta. Si el usuario desliza el dedo más allá del umbral y luego lo suelta, el comando se ejecuta inmediatamente.

SwipeBehaviorOnInvoked

Se puede tener control sobre lo que ocurre al pulsar un elemento gracias a la propiedad SwipeBehaviorOnInvoked. Las opciones disponibles son:

  • Auto.
  • Close: Cuando se invoque el elemento, el SwipeView siempre se cerrará y volverá al estado normal, independientemente del modo.
  • RemainOpen: Cuando se invoque el elemento, el SwipeView siempre seguirá abierto, independientemente del modo.

Ejemplo:

leftSwipeItems.SwipeBehaviorOnInvoked = SwipeBehaviorOnInvoked.Auto;

Veámoslo en funcionamiento:

SwipeBehaviorOnInvoked

Eventos

Contamos con diferentes eventos que nos permiten controlar el estado del SwipeView:

  • SwipeStarted: Se lanza justo al iniciar el deslizamiento. Ofrece la dirección del swipe como información.
  • SwipeChanging: Se lanza cada vez que el deslizamiento cambia. Además de indicar la dirección, permite obtener el offset.
  • SwipeEnded: Es similar a SwipeStarted pero este se lanza al terminar el deslizamiento.

Eventos

¿Controlar la transición?

Por defecto, se realiza una transición de revelación de cada SwipeItem. Es decir, se hace un deslizamiento del contenido mientras que el conjunto de SwipeItems permanece fijo.

¿Y si podemos elegir entre diferentes opciones?.

Podemos hacerlo gracias a un Platform Specific en Android e iOS.

leftSwipeView.On<Android>().SetSwipeTransitionMode(PlatformConfiguration.AndroidSpecific.SwipeTransitionMode.Drag);

Contamos con dos opciones:

  • Reveal
  • Drag

A continuación, puedes ver las diferencias:

Platform Specific para establecer la transición

Cerrar programáticamente el SwipeView

En ocasiones, puede ser necesario cerrar el SwipeVIew programáticamente. Esto se puede conseguir de forma sencilla utilizando el método Close:

swipeView.Close();

El resultado:

Cerrar

Un detalle importante!

SwipeView instancia y liberar recursos al abrirse o cerrarse. La ventaja de esto es que, si tenemos un listado de 1000 elementos haciendo uso de SwipeView sin tener ninguno abierto, tendremos la misma jerarquía beneficiando el rendimiento.

Llegamos al final de la introducción al SwipeView. Usaremos este control en algun GoodLooking UI sample pronto (con su correspondiente artículo!). Sin embargo, ¿qué te parece esta nueva opción?. Cualquier feedback es bienvenido en los comentarios del artículo.

Más información

[Tips and Tricks] Universal Apps. Behavior para gestionar gestos swipe con comando

SwipeIntroducción

En las aplicaciones móviles la pantalla táctil permite una interacción profunda del usuario con la misma. Gracias a la pantalla táctil el usuario puede interactuar utilizando gran variedad de gestos. Tocar, un toque prolongado, deslizar, pinzamientos y asi cubriendo una gran variedad de gestos con uno o varios dedos.

En aplicaciones Windows Phone 8.1 Silverlight asi como en aplicaciones Universales WinRT tenemos a nuestra disposición un conjunto de eventos de manipulación que nos permiten gestionar la actividad dada en la pantalla táctil con uno o más dedos. Podemos determinar toques, toques prolongados, deslizamientos, etc. Sin embargo, la gestión es mediante eventos, ¿que ocurre si deseamos una gestión igual de sencilla pero manteniendo nuestra arquitectura sólida basada en MVVM?

En este artículo vamos a ver como crear un Behavior que nos permita capturar un tipo de gestos e invocar un comando de nuestra ViewModel.

¿Te apuntas?

Crear el Behavior

Comenzamos creando un nuevo proyecto:

Nueva Aplicación Universal

Nueva Aplicación Universal

Añadimos las carpetas Views, ViewModels y Services además de las clases base necesarias para implementar el patrón MVVM de la misma forma que vimos en este artículo.

Nuestro objetivo sera muy sencillo. Nuestra aplicación de ejemplo tendra un Behavior asociado al Grid principal que capturará los gestos de tipo Swipe lanzando un comando de la ViewModel pasando como parámetro la dirección del gesto.

NOTA: El Behavior se podrá asociar a cualquier elemento derivado de UIElement.

Los Behaviors nos permiten añadir lógica a nuestro XAML para realizar acciones sencillas (pero increíblemente útiles). Entre el conjunto variado de acciones que nos permiten ejecutar, podemos lanzar animaciones, cambiar el estado de un VisualState, realizar la navegación de páginas o invocar un comando. En líneas generales suelen permitir realizar tareas habituales sin necesidad de escribir código en el code-behind de la vista lo que hace posible que mantengamos una arquitectura sólida sin código auxiliar repartido en distintas partes.

Añadir extensión Behaviors

Añadir extensión Behaviors

Con la llegada del SDK de Windows 8.1 recibimos también la incorporación del Behavior SDK. Disponible en una librería aparte del Core de .NET, podemos utilizarlo facilmente añadiendo la referencia a la misma.

NOTA: Con la llegada de Windows Phone 8.1 recibimos acceso a la misma extensión.

Si para nuestros objetivos, ninguno de los Behaviors que tenemos disponible nos cubre, podemos crear Behaviors nuevos totalmente personalizados.

A diferencia de la implementación que teníamos en WPF por ejemplo, no contamos con clases del tipo Behavior<T> de las que derivar, sino que contamos con interfaces, IBehavior. Disponible en el namespace Microsoft.Xaml.Interactivity.

public abstract class Behavior<T> : DependencyObject, IBehavior
       where T : DependencyObject
{

     public T AssociatedObject { get; set; }

     protected virtual void OnAttached()
     {
     }

     protected virtual void OnDetaching()
     {
     }

     public void Attach(DependencyObject associatedObject)
     {
            if (associatedObject == this.AssociatedObject ||
                DesignMode.DesignModeEnabled)
            {
                return;
            }

            this.AssociatedObject = (T)associatedObject;
            OnAttached();
     }

     public void Detach()
     {
            if (!DesignMode.DesignModeEnabled)
            {
                OnDetaching();
            }
     }

     DependencyObject IBehavior.AssociatedObject
     {
            get { return this.AssociatedObject; }
     }
}

La clase superior implementa la interfaz IBehavior de modo que facilmente podemos sobreescribir la propiedad AssociatedObject. Creamos un nuevo Behavior para los elementos que deriven de UIElement:

public class SwipeBehavior : Behavior<UIElement>
{

}

Implementamos la interfaz:

protected override void OnAttached()
{
     base.OnAttached();

     this.AssociatedObject.ManipulationMode =
                this.AssociatedObject.ManipulationMode |
                ManipulationModes.TranslateX |
                ManipulationModes.TranslateY;

     this.AssociatedObject.ManipulationCompleted += OnManipulationCompleted;
}

protected override void OnDetaching()
{
     base.OnDetaching();

     this.AssociatedObject.ManipulationCompleted -= OnManipulationCompleted;
}

private void OnManipulationCompleted(object sender,
            ManipulationCompletedRoutedEventArgs e)
{

}

SwipeBehavior hereda de la clase Behavior<T>.  En el evento sobreescrito OnAttached nos suscribimos al evento ManipulationCompleted gestionando los modos de trasladación en el eje X e Y (Swipes). En el método OnDetaching realizamos la dessuscripción del evento ManipulationCompleted.

public ICommand SwipeCommand
{
     get { return (ICommand)GetValue(SwipeCommandProperty); }
     set { SetValue(SwipeCommandProperty, value); }
}

public static readonly DependencyProperty SwipeCommandProperty =
     DependencyProperty.Register("SwipeCommand",
     typeof(ICommand),    
     typeof(SwipeBehavior),  
     new PropertyMetadata(null));

public static ICommand GetSwipeCommand(DependencyObject d)
{
     return (ICommand)d.GetValue(SwipeCommandProperty);
}

Creamos una DependencyProperty de tipo ICommand. De esta forma, permitimos bindear un comando a ejecutar pasándole como parámetro la dirección del gesto.

Gestión de gestos

Verificaremos valores recibidos de ManipulationCompletedRoutedEventArgs. Concretamente haremos varias verificaciones tanto en el eje X como en el Y para determinar la dirección del gesto. Creamos dos sencillas constantes para simplificar los cálculos:

private const double Min = 0.5;
private const double Max = 100;

En el evento ManipulationCompleted:

bool right = e.Velocities.Linear.X.CompareTo(Min) >= 0 && e.Velocities.Linear.X.CompareTo(Max) <= 0;
bool left = e.Velocities.Linear.X.CompareTo(-Max) >= 0 && e.Velocities.Linear.X.CompareTo(-Min) <= 0;
bool up = e.Velocities.Linear.Y.CompareTo(-Max) >= 0 && e.Velocities.Linear.Y.CompareTo(-Min) <= 0;
bool down = e.Velocities.Linear.Y.CompareTo(Min) >= 0 && e.Velocities.Linear.Y.CompareTo(Max) <= 0;

var swipeCommand = GetSwipeCommand(this);

if (swipeCommand != null)
{
     if (right && !(up || down))
                    swipeCommand.Execute(SwipeDirection.Right);
     if (left && !(up || down))
                    swipeCommand.Execute(SwipeDirection.Left);
     if (up && !(right || left))
                    swipeCommand.Execute(SwipeDirection.Up);
     if (down && !(right || left))
                    swipeCommand.Execute(SwipeDirection.Down);
}

El argumento de tipo ManipulationCompletedRoutedEventArgs, cuenta con toda la información relacionada con la manipulación realizada (gesto). Entre el conjunto de propiedades disponibles contamos con Velocities.Linear.X y Velocities.Linear.Y que nos permiten determinar la dirección del gesto. Dependiendo de la dirección del gesto, ejecutaremos el comando bindeado en la propiedad SwipeCommand pasándole como parámetro la dirección.

En nuestra interfaz, detectaremos el gesto de tipo Swipe y segun la orientación del gesto, mostrando un texto de información indicándola.

En nuestra ViewModel, definiremos la propiedad que mostrará en pantalla la orientación del gesto:

private string _info;

public string Info
{
     get { return _info; }
     set
     {
          _info = value;
          RaisePropertyChanged();
     }
}

Al lanzar un gesto de tipo Swipe lanzaremos un comando:

private ICommand _swipeCommand;

public ICommand SwipeCommand
{
     get { return _swipeCommand = _swipeCommand ?? new DelegateCommand<SwipeDirection>(SwipeCommandExecute); }
}

private void SwipeCommandExecute(SwipeDirection direction)
{
     switch (direction)
     {
          case SwipeDirection.Up:
               Info = "Arriba";
               break;
          case SwipeDirection.Down:
               Info = "Abajo";
               break;
          case SwipeDirection.Left:
               Info = "Izquierda";
               break;
          case SwipeDirection.Right:
               Info = "Derecha";
               break;
     }
}

Recibimos como parámetro el tipo del Swipe de modo que podemos ejecutar en consecuencia.

En la interfaz de usuario, ante cualquier elemento visual derivado de UIElement:

<interactivity:Interaction.Behaviors>
     <behaviors:SwipeBehavior
          SwipeCommand="{Binding SwipeCommand}" />
</interactivity:Interaction.Behaviors>

Sencillo, ¿verdad?

GesturesBehavior

GesturesBehavior

Podéis descargar el sencillo ejemplo realizado a continuación:

También podéis acceder al código fuente directamente en GitHub:

Ver GitHub

Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.

Más información