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).
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).
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>
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:
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:
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.
¿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:
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:
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
- GitHub: SwipeView
- GitHub: Add SwipeViewRenderer on Tizen
¡Genial!. Lo estaba esperando 🙂
Gracias.
Saludos.
Estupendo!
¿Como se podría animar para indicar al usuario que existe la opción de hacer swipe?
Gracias, un saludo
¿Podrías darme más detalles acerca de lo que quieres conseguir?
En lugar de usar ShowCaseView para indicar al usuario el funcionamiento, animar como en el primer medio segundo de la imagen del ejemplo de SwipeItemView en este articulo (con el ratón se desliza un poco el SwipeItemView hacia la izquierda… pero la idea seria hacerlo automático, programáticamente, la primera vez que el usuario ve la pantalla).
Deslizando unos pixeles hacia el sentido del Swipe para que el usuario sepa que ese comportamiento está implementado… y animándole así a usarlo.
¿Qué tal hacer un .gif* , tal como el ejemplo, que aparezca en el sitio adecuado mostrando la funcionalidad Swipe un par de segundos y luego desapareza y deje en primer plano al SwipeView?
*https://javiersuarezruiz.wordpress.com/2019/12/04/xamarin-forms-soporte-a-gifs/ 😉
Saludos.
Pingback: Continue the flight with Xamarin.Forms 4.4 / Microsoft Blog / Habr – Developers