Xamarin Forms’da hızlıca multi platform mobile uygulamalar geliştirebiliyoruz fakat bazı durumlarda manuel olarak işlemlerimizi yapmamız gerekiyor şuan yazılan makale konusunda olduğu gibi ios, android ve diğer platfomlar için kullanacağınız özel fontları manuel ayarlamamız gerekiyor bu durumda yapılacakları adım adım bu makalede göreceğiz.
Xamarin Forms’da Özel Font Kullanımı
Giriş metninde xamarin forms’da özel fontlar kullanmak istersek kullanmak istediğimiz platform için manuel uygulamamız gerektiğini belirtmiştik bu durumun multi platform uygulamaya uygun bir şekilde xamarin ekibi tarafından sonraki zamanlarda bir çözüm getirileceğini umuyorum fakat bu çözüm gelene kadar makaledeki manuel yöntemi kullanmaya devam edeceğiz. Özel font denilince aklınıza sadece yazı fontunu ayarlamak için kullandığımız Arial, Calibri, Times New Roman v.b. fontlar gelmesin bunun haricinde fontello, fontawesome, icons8 v.b sitelerden elde edeceğiniz font simge paketlerinide kolaylıkla mobil projelerinizde simge ihtiyacını gidermek için kullanabilirsiniz böylelikle telefon çözünürlükleri değişsede kullandığınız font simge paketleri birer yazı karakteri gibi render edileceğinden bozulma yaşanmayacaktır ve bir avantaşıda font olduğu için simgeleriniz kolaylıkla renk değişimi yapabilirsiniz TextColor attribute’ü yardımıyla.
iOS İçin Özel Font Ekleme ve Kullanma
Kullanmak istediğiniz fontları iOS projesi altında yer alan Resources adlı klasör altına atabilirsiniz ama isterseniz benim yaptığım gibi Resources adlı klasör altında Fonts adında bir klasör açıp fontlarınızı içerisine atabilirsiniz böylelikle daha derli toplu olmuş olur proje hiyerarşisi, fontları attıktan sonra bu fontları ios sistemin tanıtmaya geldi sıra. iOS‘da tanıtma işlemini info.plist dosyasında array listesi tanımlayarak gerçekleştiriyoruz. info.plist dosyasını xml olarak açın(Visual Studio info.plist dosyasına Sağ Tuş > Open With > Xml (Text) Editor) ardından alttaki kodları ekleyiniz. Eğer manuel eklemek isterseniz info.plist dosyasını editör yardımıyla açın.
XML(info.plist)
1 2 3 4 5 6 7 8 | <key>UIAppFonts</key> <array> <string>Fonts/LatoRegular.ttf</string> <string>Fonts/FontAwesome.ttf</string> <string>Fonts/LatoBold.ttf</string> <string>Fonts/RobotoBold.ttf</string> <string>Fonts/RobotoRegular.ttf</string> </array> |
Fontları şimdi nasıl kullandığımızı görelim. Alttaki kodda birşeye dikkatinizi çekmek istiyorum sağda fontların listesinin yer aldığı görselde android projesi alt
ına yer alan fontları görüyorsunuz aynı adlarla fontlar iOS projesinede atıldı ama isim farklılıkları olduğundan OnPlatform kullandık FontFamily için daha açık konuşmak gerekirse iOS font dosyalarını ararken fiziksek dosya adına göre değil font adına göre arama yapmaktadır siz dosyanın adını istediğiniz gibi değiştirin ama font’un metasından ilgili dosya adını almaktadır OnPlatform kullanmak istemiyorsanız şöyle birşey yaparsınız iOS‘un fontunuzu gerçek adını ne olarak okuduğunu öğrenip android projesindede dosya adlarını o şekilde düzeltip kullanabilirsiniz. iOS projesinde yer alan ve bir üstteki kodda tanıttığınız fontların gerçek adları iOS tarafından ne olarak biliyor öğrenmek için makale devamında AppDelegate.cs dosyası için eklemeleri bulabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MHG.Sample.CustomFont.Main"> <ContentPage.Content> <StackLayout VerticalOptions="Center" HorizontalOptions="Center"> <Label Text="{Binding Model.Text1}" FontSize="40" TextColor="#000000"> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <OnPlatform.iOS>Lato-Regular</OnPlatform.iOS> <OnPlatform.Android>LatoRegular</OnPlatform.Android> </OnPlatform> </Label.FontFamily> </Label> <Label Text="{Binding Model.Text2}" FontSize="40" TextColor="#000000"> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <OnPlatform.iOS>Lato-Bold</OnPlatform.iOS> <OnPlatform.Android>LatoBold</OnPlatform.Android> </OnPlatform> </Label.FontFamily> </Label> <Label Text="" FontFamily="FontAwesome" FontSize="75" TextColor="#000000" /> <Label Text="{Binding Model.Text3}" FontSize="40" TextColor="#000000"> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <OnPlatform.iOS>Roboto-Bold</OnPlatform.iOS> <OnPlatform.Android>RobotoBold</OnPlatform.Android> </OnPlatform> </Label.FontFamily> </Label> <Label Text="{Binding Model.Text4}" FontSize="40" TextColor="#000000"> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <OnPlatform.iOS>Roboto-Regular</OnPlatform.iOS> <OnPlatform.Android>RobotoRegular</OnPlatform.Android> </OnPlatform> </Label.FontFamily> </Label> </StackLayout> </ContentPage.Content> </ContentPage> |
C#(AppDelegate.cs)
iOS cihazınızda yüklü olan fontları LogFonts adlı metod ile konsola yazdırıyoruz. Böylelikle kullanmak istediğiniz fontun adını öğrenebileceğiz.
Makalenin giriş kısımlarında iOS’da fontun adını yazarken fiziksel ada göre yazmıyoruz demiştik iOS’un okudğu ve fontun orjinal adı olan ad ile yazmak zorundayız bu durumda eğer hem android hemde ios tarafında tek isimle kullanmak istiyorsanız iOS’un okuduğu font adına göre android’de fiziksel dosya adını değiştirirseniz iOS için ad şu font için ad bu demek zorunda kalmazsınız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | using Foundation; using UIKit; using static System.Console; namespace MHG.Sample.CustomFont.iOS { // The UIApplicationDelegate for the application. This class is responsible for launching the // User Interface of the application, as well as listening (and optionally responding) to // application events from iOS. [Register( "AppDelegate" )] public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate { // // This method is invoked when the application has loaded and is ready to run. In this // method you should instantiate the window, load the UI into it and then make the window // visible. // // You have 17 seconds to return from this method, or iOS will terminate your application. // public override bool FinishedLaunching( UIApplication app, NSDictionary options ) { global::Xamarin.Forms.Forms.Init(); LoadApplication( new App() ); LogFonts(); return base.FinishedLaunching( app, options ); } public void LogFonts() { foreach (var family in UIFont.FamilyNames) { foreach (var font in UIFont.FontNamesForFamilyName(family)) { WriteLine($"{font}"); } } } } } |
C#(CustomFontLabelRenderer.cs)
Bu label renderer sadece android için geçerli iOS için herhangi bir label render’a gerek yoktur.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | using System; using Android.Graphics; using MHG.Sample.CustomFont.Droid.CustomControls; using MHG.Sample.CustomFont.Extesinsons; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; [assembly:ExportRenderer(typeof(Label), typeof(CustomFontLabelRenderer))] namespace MHG.Sample.CustomFont.Droid.CustomControls { public class CustomFontLabelRenderer : LabelRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Label> e) { base.OnElementChanged(e); if (e.NewElement.FontFamily.IsNotNullOrEmpty()) { try { var tf = Typeface.CreateFromAsset(Forms.Context.Assets, $"Fonts/{e.NewElement.FontFamily}.ttf"); Control.Typeface = tf; } catch (Exception ex) { } } } } } |
Son olarak yaptığımız işlemler sonucunda elimize ne geçti bakalım 🙂
Lato fontları ve Roboto fontlarının yazdığımız metne sorunsuz uygulandığını gördük ama benim için bu custom font’un en önemli tarafı font-awesome ve fontello gibi fontları mobilde kullanma olanağı sağlaması sizede şiddetle tavsiye ederim font simge paketlerini kullanmanızı.
Android Ekran Görüntüsü | iOS Ekran Görüntüsü |
 |  |
[fa class=”fa-github”] Burada yazdığımız örneklere github üzerinden erişmek için buraya tıklayın.
