Usando ícones de fontes em Xamarin.Forms: adeus imagens, fontes Olá!

Toda a minha carreira no desenvolvimento de dispositivos móveis eu aprendi a usar imagens e ícones específicos de dispositivos. Essas são imagens dimensionadas e dimensionadas corretamente que cabem em  1x, 2x, 3x, hdpi, xhdpi, xxhdi e assim por diante, que são ótimas porque são super otimizadas para cada plataforma. A razão pela qual faço isso é porque ele dá uma aparência muito consistente a um aplicativo em todos os diferentes formatos dos dispositivos nos quais o aplicativo pode ser executado. Também é o modo oficial que o Google, a Apple e a Microsoft lhe dizem para fazê-lo, e até oferecem ferramentas como o Asset Studio para ajudá-lo a gerá-las. No entanto, meus olhos foram abertos e estou em FONTES! Sim … FONTES! Aposto que você pensou que eu ia dizer SVG, mas NÃO, FONTES!

Fonte: montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts
Por: James Montemagno
Traduzido por: Adriano D’lucca

fontes

Quero dizer, olhe para todos esses belos ícones bem ali. Eu aposto que você pensou que eram imagens … não, elas estão sendo geradas a partir de uma fonte ! A grande parte sobre fontes como esta é que eles empacotam toneladas de ícones em um único arquivo e é realmente fácil acessá-los com um código específico. Além disso, como eles são uma fonte, eles devem ser dimensionados corretamente em diferentes fatores de forma 🙂

E até algumas semanas atrás, eu não tinha ideia de que Xamarin.Forms tinha grande suporte para eles . Então, vamos dar uma olhada em como integrá-los.

Importar a fonte

Enquanto eu estava trabalhando em um aplicativo Xamarin.Forms eu recebi um grande pedido de pull que integrou ícones de marterial design no aplicativo. Foi minha primeira experiência real ao ver fontes personalizadas para remover um monte de imagens que eram as mesmas em cada plataforma. Tudo o que você precisa fazer é pegar o arquivo ttf e adicioná-lo ao local correto.

  • Android : adicione-o à pasta Assets e verifique se ele está marcado como um AndroidAsset
  • iOS : adicione o arquivo de fonte com Ação de compilação: BundleResource e atualize o arquivo Info.plist (fontes fornecidas pelo aplicativo ou UIAppFonts, chave).
  • UWP : Adicione o arquivo a / Assets / Fonts / e verifique se ele está marcado como Conteúdo

Acessar a família de fontes

Para acessar as fontes diretamente, é um pouco peculiar. Você precisa especificar o valor correto para cada plataforma quanto ao local onde a fonte está. Como eles são diferentes em cada plataforma e não queremos escrever um monte de código todas as vezes, podemos simplesmente colocar uma chave OnPlatform em nossos recursos de aplicativo:


 

Transformar fonte em código

Agora, precisamos acessar essas fontes! Você precisará dos códigos específicos para cada ícone na fonte. Felizmente, Andrei escreveu uma ferramenta incrível para converter um arquivo de fonte em código chamado IconFont2Code :

FontToCode

Texto ou FontImageSource

O que é ótimo agora é que podemos definir qualquer controle que tenha uma FontFamily associada a ela e simplesmente definir a propriedade Text .


 

Se você quiser usar a fonte para uma imagem, o novo FontImageSource pode ser usado:


 

Para usar os ícones de fonte, você pode fazer isso por meio de uma ligação ao código que foi gerado, como eu fiz acima, ou a uma sequência de escape no XAML. Vamos ver alguns exemplos.

Acesso de Bindings

Uma coisa que eu acho muito legal é que desde que você pode usar essas fontes em qualquer controle que tenha uma propriedade de texto, isso significa que você pode usá-la em um Button!

No meu aplicativo Hanselman.Forms, temos uma lista de links sociais que queremos exibir como ícones. Aqui está nossa fonte:


 

Em nosso XAML, não poderia ser mais fácil vincular dados a ele:


 

Social

Acessar diretamente no XAML

Quando você quiser acessar diretamente uma das fontes do XAML, precisará sair da chave. Então, se fôssemos converter o carro de C # em string de escape:


 

Para:

 

Então, se quisermos usá-lo em uma imagem, o código fará referência a essa chave:


 

Ícones

Quando não usar fontes

Neste exemplo estou usando fontes que são ícones dentro do aplicativo que são razoáveis ​​para olhar e sentir exatamente o mesmo em todas as plataformas. Minha recomendação, como sempre, é usar a aparência da plataforma para ícones em barras de ferramentas e guias. Isso garantirá que seus usuários tenham a melhor experiência. Além disso, lembre-se de que eles adicionarão um pouco de tamanho ao seu aplicativo (os ícones de material design ficam em torno de 500 KB!). Além do que eu digo, vá em frente 🙂

consulte Mais informação

Confira  o aplicativo Hanselman.Forms no GitHub e veja o trabalho em andamento com os novos ícones! Além disso, leia a excelente documentação da fonte para Xamarin.Forms

Deixe uma resposta

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