Design bonito para Android e iOS

  Xamarin.Forms 3.6 foi lançado com outra rodada de melhorias, sendo a mais interessante a chamada Visual . O Visual permite que os desenvolvedores criem aplicativos móveis de plataforma cruzada que compartilham não apenas uma grande quantidade de código, mas também design e comportamento. Material Design é o primeiro estilo de controles de plataforma cruzada para aproveitar o Visual.
Por David Ortinau
Traduzido por: Adriano D’lucca [Repost Traduzido]
Fonte: blog.xamarin.com/beautiful-material-design-android-ios

Uma experiência unificada em Android e iOS

Todos os meses, a equipe de produtos da Xamarin pesquisa os desenvolvedores da Xamarin e tem centenas de interações individuais com os clientes da Microsoft para saber como estamos progredindo nos principais desafios que os desenvolvedores enfrentam todos os dias. Um desses desafios é fazer com que seus aplicativos para Android e iOS se pareçam e se comportem consistentemente uns com os outros. A Xamarin valoriza a integração profunda com a plataforma host, a cultura e os padrões de design esperados por pessoas como nós, vivendo e trabalhando em seus dispositivos. Na verdade, Xamarin se destaca nisso, fornecendo todos esses controles nativos prontos para o uso. Quando você inicia um novo projeto Xamarin, obtém o mesmo ponto de partida que teria se começasse novos projetos com o Xcode e o Android Studio.

Hoje, acreditamos que podemos melhorar sua produtividade quando seu objetivo de design é alcançar a mesma aparência visual e comportamento em todos esses destinos móveis. Em Xamarin.Forms 3.6 estamos introduzindo a primeira iteração do Visual com um conjunto de componentes de material design para Android e iOS. Quando você ativa o Material Design, os controles suportados e decorados adotam a mesma plataforma cruzada do sistema de design para criar uma aparência unificada. Vejamos nossa implementação dos componentes de material design para ver como  funciona, fazendo o seu próprio, então você começa com o material e, finalmente, olha o roteiro para este novo recurso emocionante.

Material designs em Xamarin.Forms

Em 2014, o Google introduziu o sistema de material design para descrever as diretrizes de como a interface interativa deve ser implementada para obter interfaces altamente utilizáveis ​​que encantariam as pessoas. Esse sistema foi tão bem recebido que inspira muitos dos designs de aplicativos para dispositivos móveis que vemos de você. Vamos começar olhando para um  botão .

Se você ativar o tema Material em seu projeto da plataforma Android, obterá esse design e comportamento por padrão. Mas e o iOS? O Google agora também fornece um conjunto de controles para iOS que implementam uma interpretação do material design. O Xamarin.Forms Material Design possibilita usar ambos de uma vez e faz um trabalho adicional para melhorar a consistência entre as plataformas.

Como funciona o Visual

Visual é um conjunto de renderizadores de controle . No seu nível mais fundamental, é isso. Você pode usar o Visual hoje para unir todos os seus representantes personalizados em todos os back-ends Xamarin.Forms (plataformas). Se você não estiver familiarizado com o funcionamento dos renderizadores personalizados, nossos guias de documentação podem ajudá-lo.

Vamos percorrer as etapas para criar seu próprio Visual. Para começar, declare um marcador IVisual  na sua biblioteca Xamarin.Forms.

O código é um par de linhas; o marcador existe para ligar renderizadores juntos. Em seguida, no seu projeto de plataforma, você adiciona esse marcador ao ExportAttribute do renderizador personalizado:

Agora em seu XAML, quando você usa um Button e o marca para usar o novo, Visual="FancyVisual"o Xamarin.Forms toolkit usa seu renderizador especial. Você também pode omitir o sufixo “Visual”, Xamarin.Forms respeitará ambos.

E quanto a outros controles? Se nenhum renderizador for encontrado para seu marcador, os renderizadores padrão Xamarin.Forms serão usados.

Começando com o Material Design

Quando se trata de entregar Material Design consistentemente em Android e iOS, estamos usando o Visual. O sistema de material designs é opinativo, assim como a maioria dos sistemas de design. Ele prescreve o tamanho, a cor, o espaçamento e, potencialmente, outros aspectos de como controles individuais e layouts inteiros devem se parecer e se comportar. Dessa forma, quando você adota  Visual = "Material" em seu código, essas regras do sistema de design são aplicadas por renderizadores altamente personalizados. No caso do Material para iOS, fornecemos esses renderizadores em um pacote NuGet específico, Xamarin.Forms.Visual.Material .

Instale o NuGet de material design

Para começar a usar o Visual em projetos Xamarin.Forms 3.6, abra seu gerenciador de pacotes NuGet no Visual Studio e adicione Xamarin.Forms.Visual.Material aos projetos Android e iOS. Este é o estilo que você quer, porque … bem, é o único estilo disponível no momento! Mais sobre isso depois.

Observação: no Android e no iOS, esse NuGet fornece renderizadores otimizados para o Xamarin.Forms e, no iOS, fornece a dependência transitiva do Xamarin.iOS.MaterialComponents , um vínculo em C # para os Componentes de Material do Google para iOS . No Android, ele fornece algumas metas de compilação para garantir que sua versão do Framework de destino esteja configurada corretamente.

Em seguida, inicialize o pacote do renderizador no seu AppDelegate.cs assim:

Para Android, atualize o seu MainActivity.csassim:

Nota: certifique-se de que o seu projeto Android está usando:

  • FormsAppCompatActivity
  • Bibliotecas de suporte do Android 28.0.0 ou superior
  • Segmentar estrutura Android (v9.0 atualmente)
  • Versão mínima do Android 5.0 (API 21) ou superior

Decore seus controles

Agora você está pronto para começar a ver algum material design. Vamos dar uma olhada em 2 botões e como você pode aplicar o Visual. Observe a diferença entre os botões normais e a consistência entre os botões usando Visual.

No XAML acima, nós dizemos ao Xamarin.Forms para usar o renderizador de Material para o  botão  na parte inferior. Imagine como é poderoso poder optar por entrar e sair do Visual por controle, mesmo em tempo de execução! Você também pode declarar o Visual em qualquer layout, ContentPage ou até mesmo no nível do aplicativo, e ele se tornará cascata para todos os controles filho.

Este XAML atinge o mesmo resultado que o anterior. O DefaultVisual ou qualquer controle é o renderizador da plataforma base. Na animação abaixo do aplicativo TheLittleThingsPlayground , você pode ver vários exemplos de um simples botão no estilo Material. Observe o belo efeito de ondulação da cor!

 

Alguns limites se aplicam: os componentes de material design seguem rigorosamente as diretrizes do Google. Como resultado, os controles são direcionados para esse dimensionamento e comportamento. Quando você precisar de mais controle sobre os estilos ou comportamentos, ainda poderá criar seu próprio Effect , Behavior ou Renderer para obter os detalhes e o polimento desejados.

A equipe Xamarin.Forms adaptou e implementou 11 controles para material design. Você pode ver a lista abaixo e explorar esses controles no aplicativo TheLittleThingsPlayground.

Botão ActivityIndicator Moldura de entrada do Editor de
DataPicker
Selecionador
ProgressBar
Slider
Stepper
TimePicker

 

O que está por vir

Agora que temos um primeiro lançamento estável, é hora de ouvir novamente de você. Isso é tão útil quanto esperamos? O que devemos abordar a seguir?

Convidamos os desenvolvedores a aceitar um “desafio visual” usando esse novo recurso para recriar um design existente que deve ser basicamente o mesmo no Android e no iOS. Não seja tímido, você também pode participar! Estamos desafiando o Visual, não você; porém, sinta-se livre para mostrar suas habilidades.

O objetivo é passar uma hora no exercício e, em seguida, enviar seu progresso e aprendizado na forma de uma solicitação de recebimento para o repositório do projeto. Aqui está o que estamos aprendendo até agora:

  • Mais propriedades de modelagem precisam ser reveladas. Nós optamos pela versão inicial por mais controles contra o aprofundamento de um único controle. Está claro que a próxima grande vitória é permitir essas opções de estilo.
  • Mais controles como Picker: na verdade, já estávamos trabalhando nisso e agora faz parte do pacote!
  • Altura de entrada é uma necessidade comum de mudar

Devemos um enorme agradecimento às almas aventureiras que participaram até agora:

  • Nathan Westfall (nwestfall)
  • Lachlan Gordon (lachlanwgordon)
  • Mario (15mgm15)
  • Matthew Leibowitz (mattleibow)
  • Pedro Jesus (pictos)
  • Maciej Gos (maciejgos)

Mais aceitaram o desafio, mas não enviaram pedidos de solicitação. Ainda há tempo e temos mais a aprender. Por favor, tire uma foto e junte-se a nós! Enquanto isso, aqui está uma recapitulação dos recursos mencionados neste artigo, bem como propostas futuras para sua consideração.

Aqui estão alguns outros exemplos populares de sistemas de design:

BÔNUS: Comunidade móvel standup

Hoje, no Standup da comunidade móvel, o engenheiro da Xamarin.Forms, Shane Neuville, juntou-se a James Montemagno e a mim para discutir os componentes visuais, materiais e criar o seu próprio Visual. Bata nos links abaixo para um olhar “sob o capô”.

Por David Ortinau
Traduzido por: Adriano D’lucca [Repost Traduzido]

RelatedPost

Deixe uma resposta

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

Bitnami