FMX Mimarisinde Harici Yazı FONT'u Kullanmak

[RAD Coder]

Merhaba,
Günümüzde, mobil cihazlarda çalışan uygulamalar daha çok tercih edilmeye başlandı. Hedef kitlenin fazlalığı bizleri UI tarafında daha dikkatli ve daha doğru çalışmaya zorluyor. 
İyi bir tasarım, uygulamanızı emsal uygulamalar karşısında bir adım öne geçirir!
Bu kapsamda, işletim sisteminin sunmuş olduğu standart yazı font ailesinin dışında; uygulamaya özgü harici forntların iOS ve Android platformlarında nasıl kullanabileceğinizi anlatacağım.

1- Proje dizininde Res (zorunlu değil, farklı bir isimde kullanabilirsiniz) adında bir klasör oluşturalım. 
2- Res klasörüne kullanacağınız font dosyalarını (.ttf) kopyalayın. Örneğimizde Montserrat-Regular.ttf ve Roboto-Regular.ttf fontlarını kullanacağız. 

    Dip Not: Fontun tüm bileşenlere uygulanması yada spesifik bileşenler üzerinde etkili olmsını isteyebilirsiniz. Makalede her ikisi durumu da anlatıyor olacağım. 

3- Project Manager penceresinde hedef platformlardan iOS Device 64-bit  (Project manager / Target Platforms / iOS Device 64-bit) seçelim.
4- Res dizininde yer alan font dosyasını seçelim. Project Manager penceresinde proje adı üzerine sürükleyip, bıraklım.

   

5- Project /Deployment menüsünden Deployment pencersini açalım. 
6- Eklediğiniz font dosyalrını listede bulup, seçin ve Change Remote Path for Selected Item butonuna tıklayın. 
7- Açılan penceredeki kutucukta .\ yolu görünecektir. Olduğu gibi bırakarak OK butonuna tıklayın. Tüm fontlar için bu işlem adımlarını tekrarlayın. 

   

8- Deployment penceresini kapatın. 
9- Project Manager penceresinde, Android 32-bit (Project manager / Target Platforms / Android 32-bit) seçerek, font dosyasını proje adı üzerine sürükleyip bırakın. 

Project / Deployment penceresine baktığınızda Remote Path .\assets\internal\ olması gerekiyor. Varsayılan olarak bu yol tanımlıdır. Bu kısımda herhangi bir değişiklik yapmanıza gerek yoktur.

   

Böylece font dosyalarını uygulamaya dahil etmiş olduk. 
Şimdi de her iki platforma özgü yapılacak konfigürasyonlara bakalım.

Android platformunda harici font kullanımı ile ilgili herhangi bir konfigürasyona ihtiyaç yoktur. Fakat fontu çağırırken küçük bir nüans var, onu da ilerleyen işlem adımlarında göreceğiz. 

iOS platformunda harici fontu kullanabilmek için proje dizininde yer alan info.plist.TemplateiOS dosyasında <dict></dict> tag'larının en alt kısmına aşağıdaki tanımlamayı ekleyin. 

<key>UIAppFonts</key>
<array>
   <string>Montserrat-Regular.ttf</string>
   <string>Roboto-Regular.ttf</string>
</array>

Dosya içeriği aşağıdaki gibi görünecektir.
 

<dict>
<%VersionInfoPListKeys%>
<%ExtraInfoPListKeys%>
<%StoryboardInfoPListKey%>

<key>UIAppFonts</key>
<array>
   <string>Montserrat-Regular.ttf</string>
   <string>Roboto-Regular.ttf</string>
</array>

</dict>

Şimdi uygulama tarafında neler yapılacağına bakalım. Öncelikle Fontun tüm bileşenlere nasıl uygulanacağını görelim.

Proje üzerinde sağ tuş ile Add New / Unit seçelim ve aşağıdaki kodları bu unit içine yarleştirelim. 

unit Ars.FMX.Fonts;

interface

uses
 System.SysUtils, System.Types, System.UITypes, System.Classes, FMX.graphics;

type
 TArsDefaultFont = class(TInterfacedObject, IFMXSystemFontService)
 public
   function GetDefaultFontFamilyName: string;
   function GetDefaultFontSize: Single;
 end;

var
 ArsDefaultFont: TArsDefaultFont;

implementation

{ TArsDefaultFont }

function TArsDefaultFont.GetDefaultFontFamilyName: string;
begin
{$IF DEFINED(IOS) OR DEFINED(MSWINDOWS)}
 Result := 'Roboto';
{$ELSEIF DEFINED(ANDROID)}
 Result := 'Roboto-Regular';
{$ELSE}
 Result := 'Roboto';
{$ENDIF}
end;

function TArsDefaultFont.GetDefaultFontSize: Single;
begin
 Result := 14;
end;

initialization

TFont.FontService := TArsDefaultFont.Create;

end.

Önemli Not: Unit'i kaydederken isimlendirmeye dikkat edin. İlk satırdaki isimlendirme ile dosya adı aynı olmlıdır. Bu isim yerine herhangi bir isim de kullanbilirisiniz.

Uygulamayı Android ve iOS platformlarında ayrı ayrı çalıştırıp, yüklediğiniz fontun tüm bileşenlere uygulandığını göreceksiniz. 
Android platformuna özgü; font dosyasının tam adı kullanılıyor. Bu kodu diğer platformlardan ayrıştımak için derleyici direktiflerini kullandık. 
initialization bölümündeki tek satırlık kodu kapattığınızda veya unit'i projeden ayırdığınızda (Remove from project) varsayılan fontlar kullanılacaktır.  

Fontun yalnızca bazı bileşenler üzerinde etkili olmasını isterseniz; Font family özelliğini aşağıdaki gibi değiştirmeniz yeterli olacaktır.
Örnekte bir buton ve bir label'ın varsayılan fontu, harici bir fontla değiştirilmiştir. 

procedure TForm18.Button1Click(Sender: TObject);
 procedure SetFontUygula(const Bilesen: TPresentedTextControl; FontAdi: String);
 begin
   Bilesen.StyledSettings := Bilesen.StyledSettings - [TStyledSetting.Family];
{$IF DEFINED(IOS) OR DEFINED(MSWINDOWS)}
   Bilesen.Font.Family := FontAdi;
{$ELSEIF DEFINED(ANDROID)}
   Bilesen.Font.Family := FontAdi + '-Regular';
{$ENDIF}
 end;

begin
 SetFontUygula(Button1, 'Roboto');
 SetFontUygula(Label1, 'Roboto');
end;

   

   

Benzer bir örnek uygulama;

[frmman]

Teşekkürler kıymetli paylaşımınız için