Continue voando com o Xamarin.Forms 4.4

Conversamos com nossos desenvolvedores, que fazem muitos aplicativos móveis todos os anos, e eles disseram: "Não nos lembramos da última vez em que fizemos um aplicativo móvel que NÃO incluiria um carrossel". Portanto, temos o prazer de introduzir um novo controle CarouselView no Xamarin.Forms 4.4.0. Além disso, também apresentamos o IndicatorView para exibir páginas e elementos com um carrossel. Além do SwipeView por fornecer ações contextuais para qualquer item do CollectionView . O tema carrossel não seria completo sem uma demonstração do novo suporte para animações GIF para imagens. Vamos começar.

Funções Xamarin.Forms 4.4

A animação GIF é uma maneira excelente e fácil de adicionar animação ao seu aplicativo para melhor comunicação com o usuário, prestando atenção a algumas ações ou detalhes. Claro, isso também é ótimo para gifs de gatos. Image é tudo o que você precisa, juntamente com a propriedade IsAnimationPlaying para ativar ou desativar a reprodução automática.

O loop de animação será por padrão. Para parar a animação, defina IsAnimationPlaying como False.



É isso aí, você tem animações! Isso é ideal para imagens pequenas, especialmente aquelas incorporadas ao seu aplicativo. As configurações de loop de imagem GIF são respeitadas. Use renderizações rápidas no Android para uma melhor experiência do usuário.

CarouselView e IndicatorView

Criado com o mesmo controle básico do CollectionView , o novo CarouselView facilita a adição de carrosséis multifuncionais ao seu aplicativo, independentemente de você rolar horizontal ou verticalmente. Com o CollectionView você obtém:

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

Você também obtém algumas propriedades específicas do carrossel para gerenciar itens como a distância que os elementos anterior e seguinte devem observar.

 <CarouselView PeekAreaInsets="50"              ...> 

Dica avançada: no exemplo acima, você também notará que os elementos anteriores e seguintes são redimensionados e alterados. Você pode conseguir isso agora mesmo, usando o comportamento e alterando o layout durante a rolagem. Quando lançamos o 4.5, você pode usar estados visuais para simplificar isso.

Para adicionar um IndicatorView , coloque-o em qualquer lugar e associe-o ao CarouselView por nome:

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

Para obter mais informações sobre todas as coisas poderosas que você pode fazer com o CarouselView e o IndicatorView , consulte a documentação .

Nota: O NuGet Xamarin.Forms.CarouselView (versão prévia) lançado anteriormente será arquivado e não será mais lançado. Se você usou esse controle, poderá remover o NuGet e atualizar o espaço para nome do código. Trabalhamos para manter a consistência na API, mas você pode precisar configurar algumas coisas. Github

Swipeview

Esse controle geralmente é encontrado na lista de elementos, permitindo que o usuário deslize em qualquer direção para abrir botões de contexto para ações gerais, como editar ou excluir. Para usar esse controle, basta envolvê-lo em qualquer elemento ao qual você queira adicionar comportamento. Por padrão, SwipeItem recebe o título e o ícone, bem como o comando ou o manipulador de cliques. Se você deseja adicionar algo mais complexo, pode fazer isso com um modelo.

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

O exemplo acima e muito mais foi publicado no blog do nosso talentoso membro da equipe Javier Suarez Ruiz.

Você também pode usar detalhes da plataforma para controlar o modo de furto no Android e iOS . Consulte a SwipeView para obter mais detalhes sobre o SwipeView .

Comece a usar o Xamarin.Forms 4.4 hoje

Para iniciar o Xamarin.Forms 4.4, atualize ou instale-o no gerenciador de pacotes do NuGet. Se você estiver atualizando de uma versão anterior, lembre-se de que o Xamarin.Forms e o Xamarin.Essentials agora dependem do suporte do Android 28.0.0.3. Portanto, convém atualizá-los juntamente com outros pacotes usados, que podem depender das bibliotecas de suporte do Android.

Lembre-se de incluir novas funções de visualização usando SetFlags se desejar usá-las. Para fazer isso globalmente em todas as plataformas da sua solução, adicione o seguinte ao App.xaml.cs :

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