L'année dernière, nous parlions avec un client qui crée des dizaines d'applications mobiles chaque année. Ils ont dit: «Nous ne nous souvenons pas de la dernière fois que nous avons créé une application mobile qui n'incluait PAS de vue carrousel.» Beaucoup d'entre vous nous ont exprimé des sentiments presque identiques. Nous sommes donc très heureux d'introduire un nouveau contrôle
CarouselView dans Xamarin.Forms 4.4.0. Parallèlement à cela, nous avons également
IndicatorView pour afficher les pages ou les éléments dans le carrousel. Ainsi que
SwipeView pour fournir des actions contextuelles à n'importe quel élément d'une
CollectionView . Le thème de la sortie, faire bouger les choses, ne serait pas complet sans présenter le nouveau support d'animation GIF pour les images. Commençons juste là.
Caractéristiques de Xamarin.Forms 4.4
Les animations GIF sont un excellent moyen d'ajouter simplement de l'animation à votre application pour de meilleurs commentaires des utilisateurs, en attirant l'attention sur une action ou un détail. C'est aussi génial pour les GIFs de chats, bien sûr. L'
Image est tout ce dont vous avez besoin avec la nouvelle propriété
IsAnimationPlaying pour activer et désactiver la lecture.
Les animations seront bouclées par défaut. Pour arrêter une animation, définissez
IsAnimationPlaying sur false.
Tout comme ça, vous avez des animations! Ceci est idéal pour les images plus petites, et en particulier celles intégrées dans votre application. Les paramètres de boucle dans l'image GIF sont respectés. Assurez-vous que vous utilisez des rendus rapides sur Android pour la meilleure expérience.
CarouselView et IndicatorView
Construit sur le même contrôle de base que
CollectionView , le nouveau
CarouselView facilite l'ajout de carrousels riches à votre application, que vous fassiez défiler horizontalement ou verticalement. Tout comme vous obtenez avec
CollectionView vous obtenez:
- Éléments
- ItemsSource
- ItemTemplate
- EmptyTemplate
<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>
Vous obtenez également des propriétés spécifiques au carrousel pour contrôler des éléments tels que la distance que les éléments précédent et suivant doivent "jeter un œil" en vue.
<CarouselView PeekAreaInsets="50" ...>
Astuce avancée: dans l'exemple ci-dessus, vous remarquerez également que les éléments précédent et suivant sont mis à l'échelle et décalés. Vous pouvez y parvenir aujourd'hui avec un comportement et en faisant les modifications de mise en page sur le défilement. Lorsque nous expédions la version 4.5, vous pourrez à la place utiliser des états visuels pour le faire plus facilement.
Pour ajouter un
IndicatorView vous le positionnez où vous le souhaitez, puis vous l'
CarouselView au
CarouselView par son nom:
<CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView IndicatorColor="LightGray" SelectedIndicatorColor="Black" IndicatorSize="10" HorizontalOptions="Center" IndicatorView.ItemsSourceBy="walletCarousel"/>
Pour plus de détails sur toutes les fonctionnalités puissantes que vous pouvez faire avec
CarouselView et
IndicatorView , reportez-vous à la
documentation .
Remarque: le NuGet
Xamarin.Forms.CarouselView (Aperçu) précédemment publié sera archivé et ne sera plus publié. Si vous utilisiez ce contrôle, vous pouvez supprimer NuGet et mettre à jour votre espace de noms de code. Nous avons travaillé pour garder l'API cohérente, mais vous devrez peut-être ajuster quelques éléments.
GithubSwipeview
Ce contrôle se trouve généralement dans une liste d'éléments pour permettre à l'utilisateur de glisser dans n'importe quelle direction pour révéler des boutons de contexte pour des actions courantes telles que la modification ou la suppression. Pour utiliser ce contrôle, enveloppez-le simplement dans l'élément auquel vous souhaitez ajouter le comportement et spécifiez vos SwipeItems. Par défaut, un
SwipeItem prend un titre et une icône, plus une commande ou un gestionnaire de clics. Si vous souhaitez ajouter quelque chose de plus complexe, vous pouvez le faire via un modèle.
<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>
L'
échantillon ci-dessus
et plus ont été blogués par notre talentueux membre de l'équipe Javier Suarez Ruiz.
Vous pouvez également utiliser des spécificités de plate-forme pour contrôler le mode de transition de balayage sur
Android et
iOS . Pour plus de détails sur
SwipeView , reportez-vous à la
documentation .
Contributeurs
Même avant la
participation massive à Hacktoberfest, nous avions beaucoup de contributions fantastiques dans le pipeline qui apparaissent maintenant dans Xamarin.Forms 4.4.0.
Découvrez ces grandes améliorations de 34 de vos collègues développeurs. Les points saillants comprennent:
Commencez avec Xamarin.Forms 4.4 aujourd'hui
Pour commencer avec Xamarin.Forms 4.4, mettez à jour ou installez à partir de votre gestionnaire de packages NuGet préféré. La transition de 4.3.0 est fluide. Si vous effectuez une mise à jour à partir d'une version précédente, notez que Xamarin.Forms et Xamarin.Essentials dépendent désormais du support Android 28.0.0.3. Vous souhaiterez donc les mettre à jour ensemble avec tous les autres packages que vous utilisez et qui pourraient dépendre des bibliothèques de support Android.
Assurez-vous d'activer les nouvelles fonctionnalités d'aperçu à l'aide de
SetFlags si vous souhaitez les utiliser. Pour ce faire globalement pour toutes les plateformes de votre solution, ajoutez ce qui suit dans votre
App.xaml.cs :
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }
Nous surveillerons GitHub pour vos commentaires sur ces contrôles de prévisualisation d'ici à notre prochaine version, 4.5 lorsque nous nous attendons à les sortir rapidement de cet état de prévisualisation.