Usando fontes personalizadas em Xamarin.Forms - xamarin
Fonte: mfractor.com/blogs/news/using-custom-fonts-in-xamarin-forms
Por: Matthew Robbins
Aprenda a usar o importador de fontes MFractors para adicionar novos recursos de fonte aos seus aplicativos Android e iOS em segundos.
Fontes personalizadas são uma das bases do desenvolvimento moderno de aplicativos. Eles são essenciais para a marca de uma empresa e fontes de ícones como FontAwesome ou Ionicons são cada vez mais usadas como um substituto para ícones de imagem.
Em Xamarin.Forms, incluímos o recurso de fonte em cada projeto de plataforma e usamos a propriedade FontFamily para aplicar as fontes no XAML.
Mas primeiro, como cada plataforma lida com recursos de fontes?
iOS: as fontes são colocadas na pasta Resources com a ação BundleResource de construção. Também adicionamos uma entrada <string> nos projetos UIAppFonts plist .
Android: as fontes são colocadas na pasta Assets com a ação AndroidAsset de construção.
Esse processo envolve muito trabalho manual, copiamos a fonte em cada projeto, configuramos a entrada do info.plist e, em seguida, temos que descobrir como usar a fonte em nosso XAML!
MFractor simplifica isso com o Font Importer, uma ferramenta útil que adiciona a nova fonte em cada projeto, cria quaisquer entradas Info.plist e também gera a fonte de pesquisa XAML!
Este artigo se concentra no uso do importador de fontes MFractors para adicionar novas fontes ao nosso aplicativo; manualmente, adicionar fontes a um projeto Xamarin é bem coberto por muitos outros posts do blog da comunidade:
Vamos começar abrindo o Importador de fontes.
No menu principal do MFractor, selecione Importar e, em seguida, Fonte para abrir o importador de fontes. Como alternativa, você pode clicar com o botão direito do mouse em um projeto Android ou iOS no painel de projetos e escolher Importar -> Fonte .
Para este tutorial, baixe e extraia o Dancing Script Regular, pois esta é a fonte que adicionamos ao nosso aplicativo.
Primeiro, precisamos carregar nossa fonte no Importador de fontes. Clique no botão Choose Font no canto superior direito do diálogo, navegue até o local da fonte Dancing Script Regular e clique duas vezes nela. Isso carregará sua fonte no importador de fontes.
Vamos examinar o importador de fontes e o que cada parte da ferramenta faz:
O arquivo de fonte de origem. No nosso caso DancingScript-Regular.ttf,.
O que o novo recurso de fonte deve ser nomeado quando é adicionado aos projetos; Também podemos incluir um caminho de pasta aqui.
Os projetos que a fonte deve ser adicionada.
A chave de recurso a ser usada quando procuramos a fonte em nosso XAML. Por padrão, esse é o nome completo da fonte com espaço em branco removido.
A visualização do código OnPlatform a ser usado para aplicar a fonte a FontFamily. Este código é o que colocamos em nosso xaml para depois aplicar nossa fonte em etiquetas, botões etc.
O botão Copiar XAML para a área de transferência copia o código FontFamily XAML para a área de transferência.
Importa a fonte para os projetos selecionados.
Quando usamos o importador, a nova fonte será incluída em cada um dos nossos projetos e terá qualquer código de infraestrutura necessário configurado. Para projetos Android, a fonte é colocada na pasta Ativos . Para projetos iOS, a fonte é colocada na pasta Recursos e tem uma entrada UIAppFonts adicionada ao Info.plist.
Clique no botão Importar para adicionar o DancingScript-Regular aos projetos Android e iOS.
Usando uma fonte
Agora que importamos nossa fonte, vamos aplicá-la em algum texto!
Quando clicamos em Importar no Importador de fontes, MFractor copiou o código de pesquisa OnPlatform para a área de transferência, pronto para uso em nosso App.xaml .
Abra seus projetos App.xaml e cole o código em seu dicionário de recursos:
<OnPlatform x:TypeArguments="x:String" x:Key="DancingScriptRegular"> <On Platform="iOS" Value="Dancing Script"/> <On Platform="Android" Value="DancingScript-Regular.ttf#Regular"/> </OnPlatform>
Isso cria um novo recurso que podemos aplicar ao FontFamly usando uma expressão StaticResource.
Por exemplo, usamos o seguinte código para aplicar a fonte do Dancing Script a um rótulo:
<Label Text="Lorem Ipsum" FontFamily="{StaticResource DancingScriptRegular}" FontSize="Large"/>
Ai está, uma fonte personalizada adicionada ao nosso aplicativo em algumas etapas fáceis!
Ao usar o Font Importer, adicionar novos recursos de fontes em nossos aplicativos Xamarin é muito mais fácil! MFractor adiciona automaticamente a fonte e configura a entrada Info.plist em qualquer projeto iOS … até cria o código XAML FontFamily!
O Font Importer está disponível no MFractor Professional e é uma ferramenta fantástica para tornar o seu desenvolvimento Xamarin ainda mais fácil.
Quer experimentar o importador de fontes? Envie um e-mail para matthew@mfractor.com para solicitar uma avaliação do MFractor Professional.