Em nossa nova série de artigos falando sobre design customizado em aplicativos móveis para iOS e Android nós veremos várias dicas para criar aplicativos cada vez mais atraentes ao usuário final. Na primeira publicação da ListView personalizado para aplicações mobile nós vimos como alterar alguma propriedades do ListView para que tenhamos um item de listagem que chame mais a atenção do usuário.

Tutorial: Usando fonte customizada no Android

É uma pergunta que recebemos frequentemente em nosso canal direto com leitores: Como usar uma fonte diferente em um aplicativo Android usando o Delphi? 

Na imagem acima podemos visualizar uma View do iPhone 4 com um Label escrito TDevRocks – Tecnologia na ponta da língua, mas em uma fonte diferente da que estamos acostumados a ver. Isso foi feito de forma bem simples. Na propriedade TextSettings do componente clicamos duas vezes sobre a propreidade Font e na caixa de diálogo aberta, escolhemos o item Showcard Gothic como fonte para nosso app. Mas isso por si só não resolve o problema, pois ao efetuar o deploy desse aplicativos para um smartphone Android, veremos que a fonte assumida pelo aplicativo é diferente, um default do Android. A explicação também é simples: a fonte não existe no dispositivo. Bem, muitos devem pensar então que basta copiar a fonte .TTF (o arquivo dela) da pasta fonts do Windows e enviar juntamente com o aplicativo no Project > Deployment, entretanto aqui a brincadeira é um pouco mais complexa.

Distribuindo a fonte

Nós faremos o teste aqui com fontes True Type, ou seja, com a extensão .TTF. A primeira coisa que você precisa efetuar é a cópia do arquivo de fonte desejado, que será usada em sua app, para o diretório do projeto. Em nosso caso, estamos copiando a fonte SHOWG.TTF presente no diretório C:\Windows\Fonts para C:\TDevRocks\FontePersonalizadaAndroid. Em seguida acesse o Delphi e em Project >> Deployment. Clique no botão Add Files. Escolha o arquivo de fonte, confirme e acesse a coluna Remote Path. Insira o caminho .\assets\internal\, pois esse é o caminho raiz do aplicativo no dentro do Android.

A próxima parte pode soar estranha, mas não é. Nós vamos alterar um arquivo do Delphi para finalizar nossa alteração. Localize o arquivo FMX.FontGlyphs.Android.pas que encontra-se na pasta C:\Program Files (x86)\Embarcadero\Studio\17.0\source\fmx do Delphi e copie-0 para o diretório do nosso projeto. Em seguida abra-o no Delphi.

Com o arquivo aberto, adicione a unit System.IOUtils na cláusula Uses do arquivo em questão. E agora localize a procedure LoadResource, pare o mouse na linha da procedure e pressione Ctrl + Shift + Seta para baixo para que possamos navegar até o código da procedure. Crie uma variável com o nome FontFile do tipo TString. Localize a linha:

  Typeface := TJTypeface.JavaClass.create(FamilyName, TypefaceFlag);

E altere-a para o código abaixo:

    ...
    //Typeface := TJTypeface.JavaClass.create(FamilyName, TypefaceFlag);
    FontFile := TPath.GetDocumentsPath + PathDelim + CurrentSettings.Family + '.ttf';
    if FileExists(FontFile) then
      Typeface := TJTypeface.JavaClass.createFromFile(StringToJString(FontFile))
    else
      Typeface := TJTypeface.JavaClass.Create(FamilyName, TypefaceFlag);
    ...

Perceba na verdade que estamos incluindo uma verificação antes da atribuição da variável TypeFace. Nós recebemos na variável FontFile o diretório + nome da fonte configurada no controle (CurrentSettings.Family). Depois verificamos se a fonte existe no caminho, ou seja, no celular. Se existir, atribuimos à variável Typeface o conteúdo recebido em FontFile, caso contrário mantemos o default.

Para finalizar o tutorial, clique com o botão direito do mouse no nome do nosso projeto em Project Manager e selecione Add para adicionar o arquivo FMX.FontGlyphs.Android.pas ao nosso projeto, como na Figura 1.

Figura 1. Arquivo adicionado

Compile o projeto e abra-o no seu celular Android.

Conclusão

Como pudemos ver no tutorial, mais um exemplo de que podemos personalizar nossos aplicativos e torna-los ainda mais profissinais. Em nosso próximo tutorial, veremos como fazer a mesma adaptação para o iOS.

#GoToDelphi