Xamarin.Forms 4.4助您一臂之力

去年,我们与一位客户交谈,该客户每年构建数十个移动应用程序。 他们说:“我们不记得上一次制作不包含轮播视图的移动应用程序的情况。”你们中的许多人对我们表达了几乎相同的观点。 因此,我们非常高兴在Xamarin.Forms 4.4.0中引入一个新的CarouselView控件。 除此之外,我们还具有IndicatorView用于显示轮播中的页面或项目。 以及SwipeView用于为CollectionView任何元素提供上下文操作。 如果不展示对图像的新GIF动画支持,那么使事情动起来的发行主题将是不完整的。 让我们从那里开始。



Xamarin.Forms 4.4功能


GIF动画是一种将动画添加到您的应用中的绝佳方法,可以更好地吸引用户,引起人们对某些动作或细节的注意。 当然,这对于cat GIF也很棒。 您只需使用Image以及新的IsAnimationPlaying属性即可启用和禁用播放。
动画将默认循环播放。 要停止动画,请将IsAnimationPlaying设置为false。



就像您有动画一样! 这对于较小的图像尤其是嵌入式图像非常理想。 遵守GIF图像中的循环设置。 确保您在Android上使用快速渲染器以获得最佳体验。

CarouselView和IndicatorView


基于与CollectionView相同的基本控件,新的CarouselView使您可以轻松地向应用程序添加丰富的轮播,无论您是水平滚动还是垂直滚动。 与使用CollectionView您将获得:

  • ItemsLayout
  • ItemsSource
  • ItemTemplate
  • 空模板




 <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> 

您还可以获得一些特定于轮播的属性,用于控制事物,例如,上一项和下一项应“窥视”到视图中的距离。



 <CarouselView PeekAreaInsets="50"              ...> 

高级提示:在上面的示例中,您还将注意到上一个和下一个项目是缩放和偏移的。 今天,您可以通过行为并在滚动上进行布局修改来实现此目的。 当我们发货4.5时,您将可以使用视觉状态更轻松地执行此操作。

要添加一个IndicatorView您可以将其放置在IndicatorView位置,然后按名称将其与CarouselView关联:

 <CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView  IndicatorColor="LightGray"  SelectedIndicatorColor="Black"  IndicatorSize="10" HorizontalOptions="Center"  IndicatorView.ItemsSourceBy="walletCarousel"/> 




有关CarouselViewIndicatorView可以执行的所有功能的更多详细信息,请参阅文档

注意:先前发布的NuGet Xamarin.Forms.CarouselView(预览)将被存档,不再发布。 如果使用此控件,则可以删除NuGet并更新代码名称空间。 我们努力保持API的一致性,但是您可能需要调整一些内容。 Github

滑动查看


通常在项目列表中找到此控件,以允许用户向任意方向滑动以显示用于诸如编辑或删除之类的常见操作的上下文按钮。 为了使用此控件,只需将其包装在您希望向其添加行为的任何元素周围,并指定您的SwipeItems。 默认情况下, SwipeItem带有标题和图标,以及命令或单击处理程序。 如果您想添加更复杂的内容,可以通过模板来完成。



 <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> 

上面的示例和更多内容是由我们才华横溢的团队成员Javier Suarez Ruiz撰写的。

您还可以使用特定于平台的功能来控制AndroidiOS上的滑动转换模式。 有关SwipeView更多详细信息,请参阅文档

贡献者


甚至在Hacktoberfest大规模投票之前,我们已经在管道中做出了许多惊人的贡献,这些贡献现在已经出现在Xamarin.Forms 4.4.0中。 从您的34个其他开发人员中查看这些巨大的改进 。 重点包括:


Xamarin.Forms 4.4入门


要开始使用Xamarin.Forms 4.4,请从您喜欢的NuGet软件包管理器更新或安装。 从4.3.0过渡很顺利。 如果要从以前的版本进行更新,请注意Xamarin.Forms和Xamarin.Essentials现在依赖于Android支持28.0.0.3。 因此,您将希望将其与可能依赖于Android支持库的所有其他软件包一起更新。

如果您想使用SetFlags请确保启用它们。 要针对解决方案中的所有平台全局执行此操作,请在App.xaml.cs添加以下内容:

 public App() {    InitializeComponent();    Device.SetFlags(new[] {        "CarouselView_Experimental",        "IndicatorView_Experimental",        "SwipeView_Experimental"    } );    MainPage = new AppShell(); } 

从现在到我们的下一个版本4.5之间,我们将在GitHub上收到您对这些预览控件的反馈,我们希望将它们快速移出此预览状态。

Source: https://habr.com/ru/post/zh-CN480038/


All Articles