Android – Detaylarıyla Custom Font Kullanımı

Merhaba arkadaşlar. Bir önceki yazımda ListView ve Custom Adapter kullanımından bahsetmiştik. Bu yazımızda nasıl Custom Font (Özel Yazı Tipi) kullanacağımızdan ve aynı metin alanında birden fazla fontu nasıl kullanabileceğimizden bahsedeceğiz.

Neden Custom Font Kullanmalıyız? 

Aslında bu sorunun cevabı çok açık. Uygulamanın tasarımının güzel olması ve arayüzün hoş gözükmesi veya sadece simgelerden oluşan fontlarla responsive tasarıma sahip uygulamalar geliştirebilmek başlıca nedenleridir aslında. Zira ekran büyüdükçe ekrandaki her şey büyüyeceği için yeterince büyük olmayan resimler piksel piksel gözükecektir. Bir nevi piksel piksel anadoluya dönüşecektir.

Play Store’da yer alan Simply Coffee uygulamamdan örnek gösterecek olursak (Uygulamayı indirmek için isme tıklayınız):

Font-compare

Görüldüğü gibi custom font kullanımı tasarım açısından çok önemli bir detay olup custom font kullanmak kadar hangi fontu kullanacağınız da önemli. Burada uygun fontu deneyerek kullanmanız daha uygun bir font bulmanızı sağlayacaktır.

Custom Font Nasıl Kullanılır?

Örnek uygulamayı GitHub üzerinden şu linkten erişebilirsiniz. Örnek uygulama, bir adet RelativeLayout ve iki adet TextView‘dan oluşmaktadır.

Font atamayı programsal olarak yapmamız mümkün. Yani arayüzden şu fontta olsun demeniz için Custom TextView’lar mevcut fakat eğer çok lazım değilse kullanmanıza pek gerek yok. Zira onlar da arka planda burada yazacağımız kodlarla çalışmaktadır.

Öncelikle fontlarımızı uygulamamızın dizinine taşıyalım. Uygulama dizininizde “app/src/main” dizini içerisinde “assets” isimli bir klasör oluşturun. Fontların ve diğer dosyaların bu klasörde olması gerekmektedir. Bunun nedenini aşağıdaki kod örneklerinde anlatıyor olacağım. Fontlarınızı direkt buraya kopyalayabilir veya düzenli gözükmesi için assets dizini içerisinde “fonts” isminde bir klasör oluşturup içerisine kopyalayabilirsiniz. Font uzantınız “.ttf” veya “.otf” olabilir. İkisi ile de çalıştığınız okudum fakat sadece “.ttf” uzantılı fontları denedim. “.otf” fontlara şu anlık ihtiyaç duymadım diyebilirim.

Sonraki adımda ekranda yer alan TextView‘ımızı bulmamız gerekmektedir. Font atama işlemini kodun istediğiniz her yerinde yapabilirsiniz. Eğer uygulama açıldığı anda kullanıcının yazıyı custom fontlu görmesiniz istiyorsanız:

Activity içerisinde onCreate() methodu içinde setContentView(…) methodundan sonra direkt findViewById(),

Fragment içerisinde onActivityCreated(…) methodu içerisinde super.onActivityCreated(…) methodundan sonra

getActivity().findViewById()

veya kodunuzun başka bir yerinden kullacaksanız(yani uygulamanın çalışması sırasında, açıldıktan sonra):

Activity içerisinde direkt findViewById(),

Fragment içerisinde getActivity().findViewById()

methodunu kullanarak TextView‘ı bulmalıyız.

Örnek kodumuz, fragment içermemektedir. Yani, direkt findViewById() methodu ile TextView‘ı bulacağız. Bunun için Layout dosyasında TextView‘a ne isim verdiğimizi bulmamız gerekli. Örnek kodumuzda ben textView_header isimini verdim. Bu isim farklı olabilir fakat şu yazımın içerisinde belirttiğim gibi belirli isimlendirme standartlarını takip etmenizde yarar var.

TextView‘ımızı bulalım ve onu kullanmak için bir değişkene atayalım.

TextView mTextView_Header = (TextView) findViewById(R.id.textView_header);

Font atama işlemini TypeFace sınıfından türetilen obje ile yapıyoruz. TypeFace objesi oluşturmadan önce fontlarımızı uygulamanın dizininde uygun klasöre kopyaladığınızdan emin olun. Aşağıdaki ifade ile font dosyasından uygulamada kullanmak üzere bir font yaratıyoruz.

TypeFace FontAwesome = Typeface.createFromAsset(getAssets(),/fonts/FontBlok.ttf“);

Normalde fontu herhangi bir klasöre atmış olsak da (assets klasörü dışında olsaydı) yine bulabilirdik. Fakat uygulamanın assets dizini mevcut olduğundan direkt alt dizin olan fonts ile başlayabildik. Kodumuzun okunurluğu bir seviye daha artmış oldu.

Şimdi TextView‘ımıza bu fontu yani Typeface‘i yerleştirelim.

mTextView_Header.setTypeface(FontAwesome);

TextView’ımız artık istediğimiz bizim belirlediğimiz fontta gözükmeye başladı.

Peki, aynı TextView’da birden fazla font kullanmak mümkün mü? Cevap, evet.

Aynı TextView’da Birden Fazla Custom Font Kullanımı

Bunun için, TextView’ın içindeki metnin içinde kullanacağınız fontların kaçıncı karakterden itibaren başlayacağını ve biteceğini bilmemiz gerekmektedir. String’i istediğiniz her yerden çekebilirsiniz. Önemli olan bir şekilde nereden nereye font uygulayacağınızı biliyor olmaktır.

String[] strings = new String[]{“Multiple “,“Font”};

String totalString = “Multiple Font”;

int currentLength = 0;

Birinci kelimeye bir font, ikinci kelimeye başka font ataması yapacağımız için currentLength ile ikinci kelimenin nerede başladığını tutuyoruz aslında. İkinci kelime, birinci kelimenin ardından başlayacağı için birinci kelimeye font atadıktan sonra uzunluğunu tutuyoruz. Bu örnekte tutmamıza pek gerek yok zira 2 kelime olduğu için birinci kelimenin uzunluğu diyerek ulaşabiliriz. Bu kullanımı, döngü içerisinde font ataması yaparken kullanım kolaylığı sağladığı için paylaşıyorum.

Aynı metinde birden fazla Typeface kullanmak için “SpannableString” sınıfını kullanıyoruz. Bu bir nevi HTML mantığıyla çalışmakta olan bir sınıftır. SpannableString ve kullanacağımız fontların tanımını yapıyoruz ve metni yazdıracağımız TextView’ı buluyoruz.

TextView mTextView_MultipleFont = (TextView) findViewById(R.id.textView_multiplefont);

Typeface FontBleedingCowboys= Typeface.createFromAsset(getAssets(),“fonts/Bleeding_Cowboys.ttf”);
Typeface FontBlok= Typeface.createFromAsset(getAssets(),“fonts/Blok.ttf”);

SpannableString styledString = new SpannableString(totalString);

Burada “totalString” adından da anlaşılacağı gibi string dizisinin toplamıdır.  Typeface atamasını ise aşağıdaki gibi yapıyoruz.

styledString.setSpan(FontBlok,0,strings[0].length(),0);
currentLength+=strings[0].length();

styledString.setSpan(FontBleedingCowboys,currentLength,currentLength+strings[1].length(),0);

Bundan sonra kalan iş Spannable içindeki metni TextView’a atamaktan ibarettir.

mTextView_MultipleFont.setText(styledString);

Bir yazının daha sonuna geldik. Bir metin alanında custom font kullanmayı ve bir metin alanında nasıl birden fazla custom font kullanabileceğimizi gördük. Unutmadan belirteyim. İçerisinde metin olan bütün view’lar (CheckBox, Button vb.) Typeface atamasını desteklemektedir. Yani içinde metin olan bütün view’larda font belirleyebilirsiniz.

Örnek projenin GitHub linkini tekrar paylaşıyorum. Şu linkten proje dosyalarına erişebilir, kendi bilgisayarınızda açabilirsiniz. Font konusunda bu siteden bazı güzel fontlara ulaşabilirsiniz. Kendinize iyi bakın, takipte kalın!

Reklamlar

Android – Detaylarıyla Custom Font Kullanımı” üzerine 2 yorum

  1. Merhaba Metehan bey. Ben samsung galaxy s4 kullanıyorum. Font installer uygulamasıyla font degistirdim. Acayip bir font oldu. Görünüsü güzel, havalı ama birçok harfleri (ü, ö, ğ, ı, ə, ç, ş) ve nokta virgülleri göstermiyor. En kötüsü Sbrowser yani cihazın üstünde gelen en sevdiyim browserim display hatası verdi. System/fonts dosyasından arial, samsungSans regular ve diger normal fontları install yaptım ama bu sadece ana ekran yazıları için uygulandı. Uygulamalar yine geçmis kendi indirdiyim fonttaş kaldı ve birçok çökmelere neden oldu. Bana bir çözüm önerirmisiniz lütfen. Artık fabrika ayarlarında gelen fonta dönmek istiyorum.

    • Cyanogen Mod’un playstore’da CMAPPS adında bir uygulaması var. Onu yükleyin. O uygulama aracılığıyla TreBucked uygulamasını yükleyin. Bu cyanogenmod’un launcher uygulamasıdır. Cyanogen temalarından birini indirip bu launcherda uyguladığınız da fontlarınız resetlenecek ve display probleminiz çözülecektir.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s