Estávamos conversando com um cliente no ano passado que cria dezenas de aplicativos móveis a cada ano. Eles disseram: "Não nos lembramos da última vez em que criamos um aplicativo móvel que NÃO incluía uma exibição de carrossel". Muitos de vocês expressaram sentimentos quase idênticos a nós. Portanto, temos o prazer de apresentar um novo controle
CarouselView no Xamarin.Forms 4.4.0. Junto com isso, também temos o
IndicatorView para exibir as páginas ou itens no carrossel. Assim como o
SwipeView por fornecer ações contextuais a qualquer elemento em um
CollectionView . O tema do lançamento de mover as coisas não seria completo sem a apresentação do novo suporte de animação GIF para imagens. Vamos começar logo ali.
Recursos do Xamarin.Forms 4.4
As animações GIF são uma maneira excelente e simples de adicionar animação ao seu aplicativo para obter melhores comentários do usuário, chamando a atenção para alguma ação ou detalhe. Também é ótimo para GIFs de gatos, é claro. A
Image é tudo o que você precisa, juntamente com a nova propriedade
IsAnimationPlaying para ativar e desativar a reprodução.
As animações serão repetidas por padrão. Para parar uma animação, defina
IsAnimationPlaying como false.
Assim você tem animações! Isso é ideal para imagens menores, e especialmente aquelas incorporadas ao seu aplicativo. As configurações de loop na imagem GIF são respeitadas. Verifique se você está usando renderizadores rápidos no Android para obter a melhor experiência.
CarouselView e IndicatorView
Criado com o mesmo controle básico do
CollectionView , o novo
CarouselView simplifica a adição de carrosséis sofisticados ao seu aplicativo, independentemente de você estar rolando horizontal ou verticalmente. Assim como você obtém 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 controlar itens como a distância que os itens anteriores e os próximos devem aparecer.
<CarouselView PeekAreaInsets="50" ...>
Dica avançada: no exemplo acima, você também observará que os itens anteriores e seguintes são redimensionados e deslocados. Você pode conseguir isso hoje com um comportamento e fazendo as modificações de layout na rolagem. Quando enviamos o 4.5, você poderá usar estados visuais para fazer isso com mais facilidade.
Para adicionar um
IndicatorView posicione-o onde quiser 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 detalhes 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ê estava usando esse controle, poderá remover o NuGet e atualizar seu espaço para nome do código. Trabalhamos para manter a API consistente, mas pode ser necessário ajustar algumas coisas.
GithubSwipeview
Esse controle geralmente é encontrado em uma lista de itens para permitir que o usuário deslize em qualquer direção para revelar botões de contexto para ações comuns, como editar ou excluir. Para usar esse controle, envolva-o em qualquer elemento ao qual você deseja adicionar o comportamento e especifique seus SwipeItems. Por padrão, um
SwipeItem leva um título e um ícone, além de um comando ou manipulador de cliques. Se você deseja adicionar algo mais complexo, você pode fazer isso através de 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>
A
amostra acima
e mais foram publicadas em
blog por nosso talentoso membro da equipe, Javier Suarez Ruiz.
Você também pode usar detalhes específicos da plataforma para controlar o modo de transição de furto no
Android e
iOS . Para mais detalhes sobre o
SwipeView , consulte a
documentação .
Contribuintes
Mesmo antes da
participação massiva no Hacktoberfest , tivemos muitas contribuições fantásticas no pipeline que agora estão aparecendo no Xamarin.Forms 4.4.0.
Confira essas grandes melhorias de 34 de seus colegas desenvolvedores. Os destaques incluem:
- Use tamanhos nomeados com FontImageSource - @ tuyen-vuduc
- Escalando métodos de animação ScaleXTo e ScaleYTo - @ sthewissen
- Espaçamento entre letras - @ KSemenenko
- Alinhamento do texto do espaço reservado - @ krdmllr
Introdução ao Xamarin.Forms 4.4 hoje
Para iniciar o Xamarin.Forms 4.4, atualize ou instale a partir do seu gerenciador de pacotes NuGet favorito. A transição da 4.3.0 é suave. Se você estiver atualizando de uma versão anterior, observe que o Xamarin.Forms e o Xamarin.Essentials agora dependem do Suporte Android 28.0.0.3. Portanto, convém atualizá-las juntamente com outros pacotes usados que possam depender das bibliotecas do Suporte Android.
Certifique-se de ativar os novos recursos de visualização usando
SetFlags se desejar usá-los. Para fazer isso globalmente em todas as plataformas da sua solução, adicione o seguinte no
App.xaml.cs :
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }
Estaremos assistindo ao GitHub seus comentários sobre esses controles de visualização entre agora e nossa próxima versão, 4.5, quando esperamos movê-los rapidamente para fora desse estado de visualização.