Estuvimos hablando con un cliente el año pasado que construye docenas de aplicaciones móviles cada año. Dijeron: "No podemos recordar la última vez que hicimos una aplicación móvil que NO incluía una vista de carrusel". Muchos de ustedes nos han expresado sentimientos casi idénticos. Por lo tanto, nos complace presentar un nuevo control
CarouselView en Xamarin.Forms 4.4.0. Junto con esto también tenemos
IndicatorView para mostrar las páginas o elementos en el carrusel. Además de
SwipeView para proporcionar acciones contextuales a cualquier elemento en un
CollectionView . El tema del lanzamiento de hacer que las cosas se muevan no estaría completo sin mostrar el nuevo soporte de animación GIF para imágenes. Comencemos allí mismo.
Características de Xamarin.Forms 4.4
Las animaciones GIF son una excelente y sencilla forma de agregar animación a su aplicación para obtener mejores comentarios de los usuarios, llamando la atención sobre alguna acción o detalle. También es genial para los GIF de gatos, por supuesto. La
Image es todo lo que necesita junto con la nueva propiedad
IsAnimationPlaying para habilitar y deshabilitar la reproducción.
Las animaciones se repetirán de forma predeterminada. Para detener una animación, establezca
IsAnimationPlaying en falso.
¡Solo así tienes animaciones! Esto es ideal para imágenes más pequeñas, y especialmente aquellas integradas en su aplicación. Se respetan los ajustes de bucle en la imagen GIF. Asegúrate de estar usando renderizadores rápidos en Android para la mejor experiencia.
Vista de carrusel y Vista de indicador
Construido sobre el mismo control base que
CollectionView , el nuevo
CarouselView simplifica la adición de ricos carruseles a su aplicación, sin importar si se desplaza horizontal o verticalmente. Así como obtienes con
CollectionView obtienes:
- ArtículosDiseño
- ItemsSource
- ItemTemplate
- Plantilla vacía
<CarouselView HeightRequest="160"> <CarouselView.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>h01.jpg</x:String> <x:String>h02.jpg</x:String> <x:String>h03.jpg</x:String> <x:String>h04.jpg</x:String> </x:Array> </CarouselView.ItemsSource> <CarouselView.ItemTemplate> <DataTemplate> <Image Source="{Binding .}"/> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView>
También obtienes algunas propiedades específicas del carrusel para controlar cosas como la distancia a la que los elementos anteriores y siguientes deben "mirar".
<CarouselView PeekAreaInsets="50" ...>
Sugerencia avanzada: en el ejemplo anterior, también notará que los elementos anteriores y siguientes están escalados y desplazados. Puede lograr esto hoy con un comportamiento y haciendo las modificaciones de diseño en el desplazamiento. Cuando enviemos 4.5, podrá utilizar estados visuales para hacer esto más fácilmente.
Para agregar un
IndicatorView , colóquelo donde desee y luego asócielo al
CarouselView por su nombre:
<CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView IndicatorColor="LightGray" SelectedIndicatorColor="Black" IndicatorSize="10" HorizontalOptions="Center" IndicatorView.ItemsSourceBy="walletCarousel"/>
Para obtener más detalles sobre todas las cosas poderosas que puede hacer con
CarouselView e
IndicatorView , consulte la
documentación .
Nota: El NuGet
Xamarin.Forms.CarouselView (Vista previa) publicado anteriormente se archivará y ya no se lanzará. Si estaba utilizando este control, puede eliminar NuGet y actualizar su espacio de nombres de código. Trabajamos para mantener la API consistente, pero es posible que deba ajustar algunas cosas.
GithubSwipeview
Este control generalmente se encuentra dentro de una lista de elementos para permitir que el usuario deslice en cualquier dirección para revelar botones de contexto para acciones comunes como editar o eliminar. Para usar este control, simplemente envuélvalo alrededor del elemento al que desee agregar el comportamiento y especifique sus SwipeItems. Por defecto, un
SwipeItem toma un título y un icono, además de un comando o un controlador de clic. Si desea agregar algo más complejo, puede hacerlo a través de una plantilla.
<SwipeView> <SwipeView.RightItems> <SwipeItems Mode="Execute"> <SwipeItem Text="Favourite" Command="{Binding Favourite}"> <SwipeItem.Icon> <FontIconSource Glyph=""/> </SwipeItem.Icon> </SwipeItem> </SwipeItems> </SwipeView.LeftItems> <!-- Swipeable content --> <Frame> // content here </Frame> </SwipeView>
La
muestra anterior
y más fueron blogueadas por nuestro talentoso miembro del equipo Javier Suárez Ruiz.
También puede usar detalles específicos de la plataforma para controlar el modo de transición de deslizamiento en
Android e
iOS . Para obtener más detalles sobre
SwipeView , consulte la
documentación .
Colaboradores
Incluso antes de la
concurrencia masiva para Hacktoberfest , tuvimos una gran cantidad de contribuciones fantásticas en proceso que ahora están apareciendo en Xamarin.Forms 4.4.0.
Echa un vistazo a estas grandes mejoras de 34 de tus compañeros desarrolladores. Los puntos destacados incluyen:
Comience con Xamarin.Forms 4.4 hoy
Para comenzar con Xamarin.Forms 4.4, actualice o instale desde su administrador de paquetes NuGet favorito. La transición de 4.3.0 es suave. Si está actualizando desde una versión anterior, tenga en cuenta que Xamarin.Forms y Xamarin.Essentials ahora dependen de Android Support 28.0.0.3. Por lo tanto, querrá actualizarlos junto con cualquier otro paquete que use que pueda depender de las bibliotecas de soporte de Android.
Asegúrese de habilitar las nuevas funciones de vista previa usando
SetFlags si desea usarlas. Para hacer esto globalmente para todas las plataformas en su solución, agregue lo siguiente en su
App.xaml.cs :
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }
Observaremos sus comentarios sobre estos controles de vista previa de GitHub desde ahora hasta nuestra próxima versión, 4.5 cuando esperamos sacarlos rápidamente de este estado de vista previa.