UI complexa com FastGrid para Xamarin.Forms

Por: Slava Chernikoff 

Traduzido por: Adriano D’lucca [Repost Traduzido]

Fonte:  blog.xamarin.com/complex-ui-with-fastgrid-for-xamarin-forms/

Este post foi contribuição de Slava Chernikoff (Engenheiro Principal da  Binwell , Microsoft MVP, Desenvolvedor Xamarin Certified Mobile), Artem Tischenko (desenvolvedor Xamarin da Binwell ) e Kirill Ashikhmin (Xamarin e desenvolvedor Android da Binwell ).

Introdução

Os membros da equipe de Binwell têm uma longa história de uso do Xamarin e estavam muito entusiasmados em adotar o Xamarin.Forms 1.0 para projetos reais. Um dia, em 2015, conseguimos uma tarefa para criar um aplicativo de mercado móvel. Um aplicativo que deve ter uma interface de usuário complexa com muitos componentes diferentes e um grande conjunto de dados do produto.

Este aplicativo deve ser capaz de exibir centenas de produtos, banners e outros controles em uma única página. Deve haver uma rolagem quase infinita com muitos produtos, banners, seções especiais (favoritos, itens com desconto etc.). Esse foi o começo de nossa história para adotar o Android RecyclerView e o iOS UICollectionView para Xamarin.Forms.

Uma interface do usuário complexa com o FastGrid

Neste artigo, vamos nos concentrar em um dos nossos projetos favoritos: serviço de entrega de mantimentos Instamart para clientes russos. Aqui estão as capturas de tela do aplicativo Instamart atual com base no Xamarin.Forms e no Binwell FastGrid.

Instamart application based on Xamarin.Forms

Notas: Estamos muito animados com a evolução do Xamarin.Forms e o  próximo Xamarin.Forms 4.0. Novo CollectionView . O FastGrid foi criado para outro conjunto de tarefas e distribuído ‘como está’.

Este artigo mostrará como usar o FastGrid para interfaces de usuário complexas com muitos tipos de exibição de célula. O FastGrid da Binwell pode ser adotado por equipes com experiência nativa e usado como um componente personalizável.

⠀Procurando pela solução

Quando começamos nossa pesquisa sobre controles Xamarin.Forms para interfaces complexas, nosso primeiro pensamento foi usar Grid e Stack Layouts. Obviamente, o desempenho foi muito ruim porque esses layouts foram criados para outra tarefa. A principal desvantagem dos componentes de layout é que eles não reutilizam vistas secundárias enquanto criam todas as exibições quando o layout é exibido. É por isso que pode ser quase impossível lidar com um grande número de visualizações de child com Grid, StackLayout etc.

Como segunda etapa, tentamos usar o componente ListView padrão para exibir um número de células em uma linha. Foi muito melhor do que usar Layouts (incluindo um RepeaterView de terceiros), no entanto, ainda tinha inconveniências de desempenho e problemas com a rolagem. A implementação de rolagem horizontal dentro de uma linha foi um pouco complicada, enquanto a rolagem vertical ficou lenta em dispositivos Android de baixo custo. Então continuamos nossa pesquisa.

Tentamos vários componentes Xamarin.Forms comerciais baseados no RecyclerView / UICollectionView, embora a maioria deles fosse limitada e não oferecesse a funcionalidade necessária.

Em seguida, encontramos uma ótima amostra da Twin Technologies (TwinTechs): Desbancando o grande mito Xamarin XAML: como alcançar o desempenho nativo com as células Xamarin Forms ListView e Xaml

A implementação do TwinTechs FastGrid foi muito promissora. Embora não tenha funcionado no Android e tivesse muitas limitações prontas para usar, foi um excelente ponto de partida. Usamos esse controle do FastGrid como uma caixa branca (basta adicionar arquivos diretamente ao projeto) e melhoramos significativamente nos últimos 3 anos. Muito obrigado à TwinTechs por uma ótima ideia e implementação!

⠀Conheça o FastGrid

Primeiro, nosso objetivo era a implementação de uma interface de usuário complexa para o aplicativo do nosso cliente. Nós não tentamos implementar um componente CollectionView universal para todos os casos e cenários possíveis. Em vez disso, apenas tentamos obter um único resultado, e funcionou! Slava Chernikoff  estava focado na implementação do iOS, e mais tarde Kirill Ashikhmin  adotou para o Android.

 Como funciona?

Vamos lembrá-lo da tarefa em questão – obter uma interface do usuário complexa com muitos tipos de visualizações diferentes, rolagem horizontal e a rolagem vertical mais rápida possível. Ele também precisou ser orientado por dados a partir de uma API de back-end (exibir e ocultar exibições dependendo dos modelos de dados recebidos do back-end).

O primeiro ponto foi alcançar o desempenho máximo de rolagem. Levando-nos a pular o dimensionamento dinâmico de células e usar largura / altura codificadas para cada tipo de ViewCell. O segundo ponto foi lidar com muitos tipos de células. É por isso que usamos DataTemplateSelector para todas essas tarefas.

FastGridTemplateSelector

O diagrama acima demonstra o uso de DataTemplateSelector para criar uma interface do usuário complexa com base nos dados da API de back-end.

 Recursos atuais do FastGrid da Binwell

Abaixo está uma breve lista de recursos do FastGrid da Binwell:

  • Use um grande número de tipos de células
  • Cada tipo de célula está relacionado ao modelo de dados (incluindo seções)
  • Uso de Layouts de Fluxo para lidar com o layout dentro do RecyclerView e do UICollectionView
  • Suporte para adicionar / atualizar / remover dados dinâmicos, incluindo o recurso LoadMore
  • Recursos de pull-to-refresh

O código-fonte completo e a amostra estão disponíveis através deste Binwell FastGrid GitHub

⠀Como usar o FastGrid

Para demonstrar o uso do FastGrid da Binwell, vamos começar com um caso comum de mercado móvel: exibindo uma lista de produtos agrupados em duas colunas.

FastGrid Sample

Em geral, o uso do FastGridView é semelhante ao ListView – você precisará criar um ViewCell personalizado:

Como você pode ver, você deve implementar os  métodos InitializeCell ()  e SetupCell () personalizados . O exemplo acima demonstra code-behind criação de interface do usuário, mas você também pode usar XAML e Bindings, colocando InitializeComponent ()  dentro de InitializeCell () . Além disso, você pode usar o   método SetupCell () para configurar manualmente novos valores. Em alguns casos, você pode ajustar seus dados ou interface do usuário.

Em seguida, crie um FastGridTemplateSelector:

Crie um novo FastGridDataTemplate para configurar um relacionamento entre os tipos de modelo (objeto de dados) e view. Como mencionado anteriormente, para acelerar o desempenho da rolagem, definimos tamanhos de visualização exatos, dependendo do tipo de modelo. Não é muito flexível, mas também não requer cálculos pesados ​​de tamanho de célula.

O Android RecyclerView requer números inteiros para identificar diferentes tipos de visualização. É por isso que o FastGridTemplateSelector usa o método Prepare () para preencher um dicionário DataTemplateViewTypes. Abaixo você pode ver mais exemplos de uso do FastGrid.

Se você estiver familiarizado com o russo e quiser ver o FastGrid em ação, confira os aplicativos Instamart em:

Trabalhos futuros

Estamos constantemente melhorando o FastGrid em cada projeto, adicionando recursos específicos do aplicativo. Além disso, há várias coisas para fazer em atualizações futuras:

  1. Não use o ViewRenderer
  2. Não use Xamarin.Forms.Internals
  3. Implemente o ColumnSpacing e o RowSpacing para iOS
  4. Dimensionamento de célula dinâmica

Muito obrigado pela TwinTechs pelo projeto inicial e pelas ideias!

Você pode encontrar o FastGrid da Binwell e experimentar aqui: https://github.com/Binwell/FastGrid

Fique ligado!

Por: Slava Chernikoff 

Traduzido por: Adriano D’lucca [Repost Traduzido]

Fonte:  blog.xamarin.com/complex-ui-with-fastgrid-for-xamarin-forms/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *