O Futuro do Desenvolvimento Móvel: Xamarin.Forms 4.0 Preview

Por David Ortinau

Traduzido por Adriano D’lucca

Fonte:  blog.xamarin.com [Repost traduzido]

Em 2018, anunciamos nossos planos para o Xamarin.Forms 4.0 e compartilhamos uma prévia pública. Vamos agora dar uma olhada mais profunda nas grandes mudanças, começando com Xamarin.Forms Shell, e depois tocando em alguns dos outros destaques.

Através de inúmeras entrevistas, conversas e pesquisas, ouvimos sua voz alta e clara. Você quer que o Xamarin.Forms seja mais fácil de usar, pronto para ser sempre presente e fácil de controlar, ter um design mais consistente em iOS e Android e ter um controle de lista mais rápido e flexível. Prepare-se para visualizar o Xamarin.Forms 4.0, que oferece todos os principais temas de feedback e muito mais com o Shell, Visual e CollectionView.

Apresentando Shell

Queremos facilitar a introdução do Xamarin.Forms, fornecendo uma estrutura guiada para configurar seu aplicativo. O Shell oferece 3 camadas de elementos para descrever seu aplicativo (veja abaixo) e, em seguida, sai do caminho para começar a preencher o aplicativo com conteúdo e recursos. Você poderia pensar em Shell como a evolução de MasterDetailPage , NavigationPage e TabbedPage .

Com o Shell você recebe:
  • Uma maneira simplificada de expressar o alto nível de sua arquitetura de aplicativos em um único arquivo (AppShell.xaml)
  • Uma hierarquia de padrões comuns de navegação da interface do usuário que integram suas plataformas móveis: menu flyout, guias bottoms, guias superiores
  • Um serviço de navegação robusto que fornece roteamento baseado em URI para que você possa ir diretamente para qualquer parte do seu aplicativo com facilidade
  • Uma infraestrutura extensível baseada em modelos para personalizar facilmente os elementos da sua interface do usuário
  • Tudo o que você tem em Xamarin.Forms hoje e muito mais no roteiro de especificações da Shell

Para começar rapidamente, se você estiver usando o Visual Studio 2019 no Windows, faça o download e instale nosso pacote de templates que possui templates atualizados com base no Shell. Caso contrário, não importa qual IDE você preferir, você pode facilmente adicionar um Shell ao seu aplicativo existente ou novo. Uma vez que você tenha seu aplicativo aberto, atualize para o Xamarin.Forms 4.0-pre NuGet (disponível através do seu gerenciador de pacotes NuGet favorito).

Agora você precisará habilitar o Shell adicionando um sinalizador de recurso antes de inicializar o Xamarin.Forms em seu MainActivity.cs   e AppDelegate.cs  .

Android:


iOS:

Em seguida, se você não estiver usando os modelos mencionados acima, adicione um novo ContentPage com XAML ao seu projeto e renomeie como AppShell (ou o que quiser, mas estamos padronizando no AppShell no momento). Agora atualize o AppShell.xaml.cs para estender o Xamarin.Forms.Shell. Consulte o XAML abaixo para um simples ponto de partida.

No conteúdo acima, observe o local: MainPage . Este deve ser o seu ContentPage inicial localizado no namespace local.

A única outra mudança que você precisa fazer para executar seu primeiro aplicativo do Shell é trocar a página principal do seu aplicativo para usar o Shell. Modifique seu App.xaml.cs  conforme abaixo:

Salve e execute o aplicativo. Você deve ver sua página principal e um menu de hambúrguer que abre um submenu com um único item de menu. Como mencionado acima, existem 3 elementos que fizeram isso acontecer: ShellItem, ShellSection e ShellContent. A Shell prescreve uma hierarquia de navegação de conteúdo das guias flyout para as guias inferiores até as principais, conforme você se aprofunda no aplicativo.

Elemento Descrição
ShellItem O agrupamento de conteúdo de nível superior representado por um item no flyout. Pode conter várias ShellSections.
ShellSection Agrupa o conteúdo do seu aplicativo. Este conteúdo é navegável pelas guias inferiores. Pode conter um ou mais ShellContent. Vários ShellContent são navegáveis ​​pelas guias principais.
ShellContent O ContentPages do seu aplicativo.

Como dito na introdução, a navegação também pode ser uma fera problemática para domar: TabbedPage, MasterDetailPage, NavigationPage, uma série de plugins e implementações personalizadas para lidar com flyouts e interceptar eventos de navegação para implementar lógica personalizada (cancele o botão voltar!). No Shell, você pode navegar de qualquer lugar para qualquer lugar a qualquer momento com uma nova e poderosa API de roteamento.

Navegação via rotas

Você se acostumou a empurrar e estourar, mas nos disse que gostaria de uma maneira melhor de navegar pelo seu aplicativo e adicionar lógica personalizada, especialmente quando o usuário tenta sair de uma tela. A nova navegação da Shell visa abordar exatamente e fornecer algumas conveniências adicionais ao longo do caminho. Tudo isso começa definindo seu roteamento em seu Shell.xaml  como visto no código acima.

Descrição
RouteScheme Esquema de URI, como “http” ou “app”. Eu prefiro “app”, já que estamos criando um aplicativo para dispositivos móveis.
RouteHost A parte do domínio do URI.
Rota O segmento base do URI do seu aplicativo.

Juntando tudo isso, você pode construir um URI para a raiz desse aplicativo, como “app: //microsoft.com/newapp”. Aqui está um exemplo de várias páginas no aplicativo (exibidas como as principais guias):

Para navegar programaticamente para a página de notificações, o URI seria “app: //microsoft.com/newapp/a/b/notifications”. Se você tem uma página que não faz parte da estrutura de navegação que você deseja rotear, então você só precisa registrar essa rota em algum lugar em seu código antes de chamar a rota.

No exemplo acima, você tem uma nova rota “saudação” que levará o usuário ao GreetingPage . A última parte é executar a rota usando o serviço de navegação da Shell e passar uma mensagem de saudação.

Essa é uma versão longa para mostrar as partes, mas você pode fazer menos.

No futuro próximo, a  Shell irá expor o atual Shell estaticamente para torná-lo mais conveniente. Observe que o exemplo também omite o segmento do host.

QueryProperty

Para passar a mensagem, podemos usar parâmetros de querystring. Isso é útil para pequenos pedaços de dados. Você pode então conectar esse parâmetro a uma propriedade em  ContentPage  ou BindingContext  (por exemplo, um modelo de visualização) usando o  atributo QueryProperty da seguinte forma:

O QueryProperty  usa o nome da propriedade (destino) e o nome do parâmetro de consulta (origem), e a navegação do Shell define o valor antes da exibição da página. Achamos que isso será muito útil e poderoso e aguardamos seu feedback enquanto você o utiliza.

Samples e Resources

Para obter mais detalhes sobre a nova e poderosa navegação do Shell, além de estilizar o aplicativo, personalizar o menu suspenso e os itens de menu, configurar as guias inferiores e inferiores, confira o novo aplicativo móvel Tailwind Traders (foto acima) e estes recursos:

Visual: Criando Design Consistente Entre Plataformas

É possível hoje criar belos aplicativos nativos para Android e iOS usando o Xamarin.Forms. Você pode até fazer com que eles tenham a mesma aparência com estilos, efeitos, renderizadores personalizados e uma quantidade generosa de tempo. O visual visa tornar isso muito mais fácil, fornecendo um tema de controle consistente por padrão. Atualmente, o Visual suporta o estilo de design de material publicado pelo Google. O Xamarin.Forms 4.0-pre1 inclui as implementações base para Button , Entry , Frame e ProgressBar . Você notará na tela abaixo que o Android e o iOS são bastante semelhantes, e tudo o que foi feito é definir Visual = “Material”  no ContentPage . Com isso, o Xamarin.Forms escolherá renderizadores alternativos que são muito mais profundos que os estilos para obter consistência de design e experiência.

Mais controles e mais trabalho para unificar o layout e o design ainda estão por vir antes que o Visual esteja realmente pronto para uso em produção. Este é apenas um primeiro vislumbre, por favor, junte-se a nós nesta jornada. No momento, estamos focados exclusivamente no Material Design do Google, mas estamos buscando outras linguagens de design para suportar no futuro, incluindo Fluent, Fabric e Cupertino.

Para mais informações sobre como começar com o Visual, confira nossa documentação de visualização .

CollectionView: listas rápidas e flexíveis

Você nos disse que deseja usar controles de lista nativos modernos para desempenho e mais flexibilidade de layout e interação. A resposta para isso é o novo CollectionView . Em um post futuro, forneceremos um mergulho mais profundo nesse controle, mas por enquanto, como você pode começar rapidamente. Como antes com Shell e Visual, ative CollectionView  usando o sinalizador de recurso “CollectionView_Experimental”. Agora você está pronto para adicionar o controle ao seu layout como abaixo:

Quatro combinações de layout são suportadas por padrão:
  • GridItemsLayout Horizontal
  • GridItemsLayout Vertical
  • ListItemsLayout Horizontal
  • ListItemsLayout Vertical

Você também pode fornecer um layout personalizado, mas esse é um tópico mais avançado para mais tarde.

Observe que este exemplo também demonstra o uso de um EmptyView,  que ficará visível a qualquer momento em que o ItemSource  estiver vazio. Para uma olhada rápida no CollectionView  e em seu filho CarouselView  em ação, explore o aplicativo de demonstração do TeamBuilder no GitHub  e nossa documentação de visualização .

E mais

Esta nova versão também inclui outros trabalhos que você verá em breve na próxima versão estável do Xamarin.Forms, versão 3.5.0. Tomemos, por exemplo, o BindableLayout, que aprimora qualquer layout para aceitar uma fonte de ligação e um modelo de item. No exemplo abaixo, você pode usar um StackLayout  em um ScrollView para criar uma lista de rolagem horizontal de itens.

Esse não é o único aprimoramento que aparece na próxima versão do 3.x. Para uma espreitadela, leia as notas de lançamento completas para o 4.0 .

O que está à frente

O caminho para apresentar a integridade e uma versão estável de cada recurso listado aqui pode ser diferente. Estamos agrupando-os no lançamento 4.0, já que nosso objetivo é enviá-los juntos na Primavera de 2019, juntamente com o lançamento estável do Visual Studio 2019. Esses recursos principais estão por trás dos sinalizadores de recursos descritos acima. Por causa disso, esses recursos também serão fornecidos dentro de versões estáveis ​​do 3.x, que continuarão fornecendo a você um fluxo constante de melhorias em nossa atual cadência de lançamento de 6 semanas. Será a seu critério se você achar que algum desses recursos é útil o suficiente para fazer parte de seus aplicativos antes da versão estável 4.0. Quando o Xamarin.Forms 4.0 é lançado estável, esperamos remover esses protetores de sinalizadores de recursos.

Para acompanhar o progresso de cada recurso, entre em contato conosco no GitHub abaixo. Considere também a  conclusão da nossa pesquisa de feedback de recursos 4.0 . Renovaremos a pesquisa para cada visualização de 4.0 compartilhada.

 

Deixe uma resposta

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