Gifs en Xamarin.Forms

Ahora con Xamarin.Forms versión 4.4 podremos utilizar el soporte de archivos .gif y animar nuestras UI´s permitiendo agregar animaciones en Xamarin.forms tanto para Android, iOS y UWP, lo que cual es grandioso al darles vida a nuestras aplicaciones móviles.

 xamarin-e1513671162339

El control Image ha sido extendido con la propiedad IsAnimationPlaying de esta forma en nuestro código XAML:

Es importante mencionar que Xamarin.Forms incluye la habilidad de descargar archivos, pero no soporta Caching o Streaming de Gif’s animados, esperemos que en alguna actualización futura incluyan estas nuevas características.

Recuerda que por definición, cuando un GIF animado es cargado, no se reproduce automáticamente, porque su valor por defecto es “Falso”, la animación debe activarse con el valor Booleano IsAnimationPlaying=“True”.

¿Qué necesitamos?

  • Xamarin.Forms 4.4 o superior.
  • En Xamarin.Android que este activado el soporte de Fast Renders, las animaciones no funcionarán si se usa Legacy Renders.
  • En Xamarin.UWP se requiere una versión mínima de Windows 10 Anniversary Update (version 1607).

Probémoslo

Crearemos un proyecto que pruebe una página estática, que navegue a una página con un CollectionView y otra página que use un CarouselView que carguen varios Gifs para probar como funcionan.

A1

Creemos un nuevo proyecto con Microsoft Visual Studio Community 2019 (usare la Versión 16.4.1).

Da clic en “Create a new project

A2

En la caja de texto puedes escribir “Xamarin.forms” para buscar la plantilla de proyecto, y selecciona “Mobile App(Xamarin.Forms)” y presione el botón Next.

A3

En Project Name escriba GifInMotion, en Location, selecciones una ruta corta como C:\Desa\, presione el botón Create.

A4

En Template selecciones Blank, en Platform seleccione Android, iOS, Windows(UWP) y de clic en OK.

A5

Se mostrara VS 2019 con los plataformas que seleccionó.

A6

De clic derecho sobre la solución y de clic en Manage Nuget Packages for Solution…

A7

En la siguiente ventana, de clic en la Pestaña Update, se mostrarán los Nugets que pueden actualizarse, de clic en Select all packages, y luego clic en el botón Update.

A8

Es posible que se le muestre la siguiente ventana, para aceptar los términos de licencia, de clic en “I Accept”.

A9

Al terminar seleccione la pestaña Browse, y agregue los siguientes paquetes Nuget en todas las plataformas.

  • Newtonsoft.Json versión 12.0.3
  • Refractored.MvvmHelpers versión 1.3.0
  • Xamarin.Forms.Visual.Material de preferencia la misma versión que Xamarin.Forms.

En la siguiente imagen se muestra la instalación del paquete Newtonsoft.Json versión  12.0.3.

A10

De un clic derecho sobre la el proyecto GifInMotion y busque la opción Add y seleccione New Folder, se creara un nuevo folder nómbrelo como Models, repita estos pasos para crear los Folders Services, ViewModels y Views.

A12

Esta es la estructura que debe tener su proyecto en este momento.

A13

Seleccione la carpeta Models de clic derecho Add y seleccione Class,  en la nueva ventana escriba Movies.cs para darle nombre a la clase y de Clic en el botón Add..

A14

Ingrese el siguiente código para la clase Movies.cs

 

Seleccione la carpeta Services de clic derecho Add, New Item, Seleccione la plantilla Interface, en Name escriba IDataService y de clic en el botón Add.

A15

Copie el código de la interface.

Seleccione la carpeta Services de clic derecho Add, Class, , en Name escriba WebDataService.cs y de clic en el botón Add.

A16

Copie el código de la clase.

Seleccione la carpeta ViewModels de clic derecho Add y seleccione Class,  en la nueva ventana escriba BaseViewModels.cs para darle nombre a la clase y de Clic en el botón Add.

A17

Copie el código de la clase.

Seleccione la carpeta ViewModels de clic derecho Add y seleccione Class,  en la nueva ventana escriba MovieViewModel.cs para darle nombre a la clase y de Clic en el botón Add.

A18

Copie el código de la clase.


Ahora crearemos las vistas necesarias para consumir el servicio creado.

Seleccione la carpeta View de clic derecho Add, New Item, en la nueva ventana Seleccione la plantilla Content Page, en Name escriba CollectionMovies.xaml para darle nombre a la Content Page y de Clic en el botón Add.

A19

En el Archivo CollectionMovies.xaml,  copie el código del xaml .

Está vista, tendrá el titulo con un binding, usaremos el Viewmodel Movies, y con  un Grid se mostraran los datos del DataTemplate por medio de MVVM.

Todo archivo Xaml contiene un archivo con el mismo nombre .xaml.cs, de clic en el triángulo antes de CollectionMovies.xaml y seleccione el archivo CollectionMoviesl.xaml.cs.

A20

Copie el código.

En la ContentPage CollectionMovie, en el code behing enviaremos el ViewModel y el nombre de la página que es “Collection View” y se llenara el CollectionViewSource con los items de la fuente.


Seleccione la carpeta View de clic derecho Add, New Item, en la nueva ventana Seleccione la plantilla Content Page, en Name escriba MoviesCarousel.xaml, de Clic en el botón Add.

A22.png

En el Archivo MoviesCarouse.xaml,  copie el código del xaml .

De clic en el triángulo antes de MoviesCarousel.xaml y seleccione el archivo MoviesCarousel.xaml.cs.

A23

Copie el código.


Seleccione la carpeta View de clic derecho Add, New Item, en la nueva ventana Seleccione la plantilla  Content Page, en Name escriba HomePage.xaml, de Clic en el botón Add.

A21

En el Archivo HomePage.xaml,  copie el código del xaml .

De clic en el triángulo antes de HomePage.xaml y seleccione el archivo HomePage.xaml.cs y copie el código.

La Content Page HomePage mostrara un gif animado utilizando Image Source Directo y 2 botones los cuales nos mostrarán un CollectionView y el otro un CarouselView, que son las vistas que hemos creado previamente, las llamadas de navegación los agregamos con métodos asíncronos en el Code Behind.


Ya casi todo esta listo, ahora modificaremos el archivo App.xaml.cs para cambiar la página de inicio.

A24

Modifica el Mainpage por:

MainPage = new NavigationPage( new Views.HomePage());

O copia el código.

 

Descarga los Recursos para el Background de la App desde este link.

https://1drv.ms/u/s!AliWRcktwwLrha4OlCuyhpgbg0urCA?e=gGB2Vl

El archivo GifInMotion.zip contiene los recursos para las 3 plataformas.

A25

Abra la carpeta GifInMotion.Android, y la carpeta Resources y copie todas las carpetas que contiene.

A26

Selecciones el proyecto GifInMotion.Android, y de clic derecho en Resources y de clic en Paste (Pegar).

A27

Se mostrará una ventana que indica que ya existe una carpeta con ese nombre, seleccione el “CheckBox Apply to all items” y de clic en Yes. (Si se muestra un mensaje que indique ya existe un archivo seleccioné “CheckBox Apply to all items” y de clic en Yes).

A28


Abra la carpeta GifInMotion.iOS, y la carpeta Resources y copie todas los archivos que contiene.

A29

En VS 2019  abra el proyecto GifInMotion.iOS, y la carpeta Resources y pegue los archivos copiados previamente.

A30.png


En VS 2019 abra el proyecto GifInMotion.UWP. Para agregar la imagen se debe dar clic derecho sobre el proyecto GifInMotion.UWP en Add y seleccionar Existing Item.

A31

Se abre una nueva ventana, busque donde haya extraído los archivos del zip, dentro de la carpeta  GifInMotion.UWP y seleccione el archivo space.png, para agregarlo al proyecto.

A32


El código fuente puedes encontrarlo aquí


GifInMotionSourceCode


El resultado del este proyecto debe verse así, con todos los pasos que hemos realizado este proyecto, funciona tanto en Android, iOS y Windows(UWP).

 


 

Conclusión

El soporte de Gif en Xamarin.Forms 4.4 funciona bastante bien, sólo recuerda que las imágenes se cargan cada vez que las visualices y no se puede hace caching de ellas, además que es necesario colocar la propiedad IsAnimationPlaying en True. Colocar un Gif animado en una interfaz de usuario, realza la aplicación, el CarouselView lo sentí más fluido que el CollectionView.


Este Post es parte del calendario de Adviento de la Comunidad Xamarin en Español, para más información sigue el link.

https://www.luisbeltran.mx/2019/11/06/primer-calendario-de-adviento-de-xamarin-en-espanol/

Muchas Gracias por darte el tiempo de leer este post.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s