Xamarin Forms 4.5+ | Fontes customizadas e FontAwesome
À partir do Xamarin Forms 4.5, ganhamos a possibilidade de inserir fontes customizadas diretamente no projeto “CrossPlatform”, sem a necessidade de replicar os arquivos para cada plataforma.
Além disso, ganhamos a facilidade de não precisar alterar o arquivo Info.plist, no IOS, agilizando ainda mais o processo de criação de nossos Apps.
No post anterior, eu abordei a utilização clássica, onde precisamos ter alguns cuidados em cada plataforma.
Baixando arquivo de fonte FontAwesome
Vamos navegar até o site do FontAwesome e ir na sessão de downloads, você pode conferir no link abaixo:
Vou selecionar a opção de download para desktop e, para esse exemplo, vou baixar a versão gratuita.
Após baixar, vamos extrair o conteúdo compactado e selecionar quais arquivo de fonte iremos utilizar. Para esse exemplo vou selecionar as fontes Solid e Regular.
Incluindo fontes no projeto “CrossPlatform”
Vamos incluir os arquivos de fonte em nosso projeto e garantir que a ação de compilação seja “Recurso embutido”.
Note que eu não precisei colocar o arquivo nos projetos Android e IOS, apenas no projeto compartilhado entre as plataformas.
No exemplo acima eu reservei uma pasta de recursos e dentro dela separei uma pasta específica para fontes. Não é necessário seguir essa etapa, eu apenas utilizo esse formato de organização dentro do meu projeto.
Agora precisamos declarar, à nível de “assembly”, a nossa fonte.
Isso pode ser feito em qualquer arquivo (.cs) do seu projeto, mas geralmente utilizamos o “App.xaml.cs” ou “AssemblyInfo.cs”.
Simples, não?!
Utilizando FontAwesome
Agora para utilizarmos, o fontawesome, vamos definir em nosso controle o FontFamily com o valor do Alias que criamos.
Para utilizar os ícones no “xaml” vamos usar o prefixo “&#x”, o código do icone (que pode ser encontrado no site do FontAwesome) e o sufixo “;”.
Exemplo:
Para utilizar o ícone “Child” (código f1ae) a propriedade Text ficaria com o valor “”
Importante! Veja, na galeria, se o icone está incluso no arquivo que você está utilizando. Existem icones que são exclusivos, como no exemplo do código utilizado acima, para Pro, Regular, Solid ou Brand.
Eu, particularmente, gosto de centralizar esses ícones em um arquivo, utilizando o marcador “Static”.
Dessa forma ganhamos auxilio, do Visual Studio, para autocompletar nosso código.
É necessário adicionar o “namespace” para poder ter acesso à classe estática, no arquivo “xaml”. Nesse classo eu declarei o nome como “local”, exemplo:
xmlns:local=”clr-namespace:Xamarin.Custom.Fonts
Também podemos utilizar com “FontImageSource”, em controles que esperam uma fonte de imagem.
Importante! Até o presente momento (04/04/2020), temos um bug onde a combinação de “FontImageSource” e Fontes como recurso embutido, não está funcionando corretamente para o IOS.
Link para a issue: https://github.com/xamarin/Xamarin.Forms/issues/9190
Styles, Styles everywhere
Por fim, recomendo centralizar a estilização dos controles e, dessa forma, reaproveitar o código.
Resultado
O código completo do projeto você encontra no Github:
