{"id":974,"date":"2015-02-26T02:23:32","date_gmt":"2015-02-26T00:23:32","guid":{"rendered":"http:\/\/metehantoksoy.com\/?p=974"},"modified":"2015-02-26T02:23:32","modified_gmt":"2015-02-26T00:23:32","slug":"android-detaylariyla-custom-font-kullanimi","status":"publish","type":"post","link":"https:\/\/metehantoksoy.com\/?p=974","title":{"rendered":"Android – Detaylar\u0131yla Custom Font Kullan\u0131m\u0131"},"content":{"rendered":"
\"\"
Resmin Kayna\u011f\u0131: http:\/\/graphicdesignjunction.com\/2013\/09\/high-quality-fonts\/<\/figcaption><\/figure>\n

Merhaba arkada\u015flar. Bir \u00f6nceki yaz\u0131mda ListView ve Custom Adapter<\/a> kullan\u0131m\u0131ndan bahsetmi\u015ftik. Bu yaz\u0131m\u0131zda nas\u0131l Custom Font<\/strong> (\u00d6zel Yaz\u0131 Tipi<\/strong><\/em>) kullanaca\u011f\u0131m\u0131zdan ve ayn\u0131 metin alan\u0131nda birden fazla fontu<\/strong> nas\u0131l kullanabilece\u011fimizden bahsedece\u011fiz.<\/p>\n

<\/p>\n

Neden Custom Font Kullanmal\u0131y\u0131z?\u00a0<\/span><\/strong><\/h2>\n

Asl\u0131nda bu sorunun cevab\u0131 \u00e7ok a\u00e7\u0131k. Uygulaman\u0131n tasar\u0131m\u0131n\u0131n g\u00fczel olmas\u0131<\/strong> ve aray\u00fcz\u00fcn ho\u015f g\u00f6z\u00fckmesi<\/strong> veya sadece simgelerden olu\u015fan fontlarla responsive tasar\u0131ma sahip uygulamalar geli\u015ftirebilmek ba\u015fl\u0131ca nedenleridir asl\u0131nda. Zira ekran b\u00fcy\u00fcd\u00fck\u00e7e ekrandaki her \u015fey b\u00fcy\u00fcyece\u011fi i\u00e7in yeterince b\u00fcy\u00fck olmayan resimler piksel piksel g\u00f6z\u00fckecektir. Bir nevi piksel piksel anadoluya d\u00f6n\u00fc\u015fecektir.<\/p>\n

Play Store’da yer alan Simply Coffee<\/a> uygulamamdan \u00f6rnek g\u00f6sterecek olursak (Uygulamay\u0131 indirmek i\u00e7in isme t\u0131klay\u0131n\u0131z<\/em>):<\/p>\n

\"Font-compare\"<\/a><\/p>\n

G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi custom font kullan\u0131m\u0131 tasar\u0131m a\u00e7\u0131s\u0131ndan \u00e7ok \u00f6nemli bir detay olup custom font kullanmak kadar hangi fontu kullanaca\u011f\u0131n\u0131z da \u00f6nemli. Burada uygun fontu deneyerek<\/strong> kullanman\u0131z daha uygun\u00a0bir font bulman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n

Custom Font Nas\u0131l Kullan\u0131l\u0131r?<\/span><\/strong><\/h2>\n

\u00d6rnek uygulamay\u0131 GitHub \u00fczerinden \u015fu linkten<\/a> eri\u015febilirsiniz. \u00d6rnek uygulama, bir adet RelativeLayout<\/strong> ve iki adet\u00a0TextView<\/strong>‘dan olu\u015fmaktad\u0131r.<\/p>\n

Font atamay\u0131 programsal olarak yapmam\u0131z m\u00fcmk\u00fcn. Yani aray\u00fczden \u015fu fontta olsun demeniz i\u00e7in Custom TextView’<\/strong>lar mevcut fakat e\u011fer \u00e7ok laz\u0131m de\u011filse kullanman\u0131za pek gerek yok. Zira onlar da arka planda<\/strong> burada yazaca\u011f\u0131m\u0131z kodlarla \u00e7al\u0131\u015fmaktad\u0131r.<\/p>\n

\u00d6ncelikle fontlar\u0131m\u0131z\u0131 uygulamam\u0131z\u0131n dizinine ta\u015f\u0131yal\u0131m. Uygulama dizininizde “app\/src\/main”<\/strong> dizini i\u00e7erisinde “assets<\/strong>” isimli bir klas\u00f6r olu\u015fturun. Fontlar\u0131n ve di\u011fer dosyalar\u0131n bu klas\u00f6rde olmas\u0131 gerekmektedir. Bunun nedenini a\u015fa\u011f\u0131daki kod \u00f6rneklerinde anlat\u0131yor olaca\u011f\u0131m. Fontlar\u0131n\u0131z\u0131 direkt buraya kopyalayabilir veya d\u00fczenli g\u00f6z\u00fckmesi i\u00e7in assets dizini i\u00e7erisinde “fonts”<\/strong> isminde bir klas\u00f6r olu\u015fturup i\u00e7erisine kopyalayabilirsiniz. Font uzant\u0131n\u0131z “.ttf<\/strong>” veya “.otf<\/strong>” olabilir. \u0130kisi ile de \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z okudum fakat sadece “.ttf<\/strong>” uzant\u0131l\u0131 fontlar\u0131\u00a0denedim. “.otf<\/strong>” fontlara \u015fu anl\u0131k ihtiya\u00e7 duymad\u0131m diyebilirim.<\/p>\n

Sonraki ad\u0131mda ekranda yer alan TextView<\/strong>‘\u0131m\u0131z\u0131 bulmam\u0131z gerekmektedir.\u00a0Font atama i\u015flemini kodun istedi\u011finiz her yerinde yapabilirsiniz. E\u011fer uygulama a\u00e7\u0131ld\u0131\u011f\u0131 anda<\/strong> kullan\u0131c\u0131n\u0131n yaz\u0131y\u0131 custom fontlu g\u00f6rmesiniz istiyorsan\u0131z:<\/p>\n

\u25ba Activity<\/strong> i\u00e7erisinde onCreate()<\/strong><\/em> methodu i\u00e7inde\u00a0setContentView(…)<\/strong> <\/em>methodundan sonra\u00a0direkt findViewById()<\/strong><\/em>,<\/p>\n

\u25ba Fragment<\/strong> i\u00e7erisinde onActivityCreated(…)<\/strong> <\/em>methodu i\u00e7erisinde super.onActivityCreated(…)<\/strong><\/em> methodundan sonra<\/p>\n

getActivity().findViewById() <\/strong><\/em><\/p>\n

veya kodunuzun ba\u015fka bir yerinden kullacaksan\u0131z(yani uygulaman\u0131n \u00e7al\u0131\u015fmas\u0131 s\u0131ras\u0131nda, a\u00e7\u0131ld\u0131ktan sonra<\/em>):<\/p>\n

\u25ba Activity<\/strong> i\u00e7erisinde direkt findViewById()<\/em>,<\/strong><\/p>\n

\u25ba Fragment<\/strong> i\u00e7erisinde getActivity().findViewById()<\/strong><\/em><\/p>\n

methodunu kullanarak TextView<\/strong>‘\u0131 bulmal\u0131y\u0131z.<\/p>\n

\u00d6rnek kodumuz, fragment i\u00e7ermemektedir. Yani, direkt findViewById()<\/strong><\/em> methodu ile TextView<\/strong>‘\u0131 bulaca\u011f\u0131z. Bunun i\u00e7in Layout dosyas\u0131nda TextView<\/strong>‘a ne isim verdi\u011fimizi bulmam\u0131z gerekli. \u00d6rnek kodumuzda ben\u00a0textView_header<\/strong><\/em> isimini verdim. Bu isim farkl\u0131 olabilir fakat \u015fu yaz\u0131m\u0131n<\/a> i\u00e7erisinde belirtti\u011fim gibi belirli isimlendirme standartlar\u0131n\u0131 takip etmenizde yarar var.<\/p>\n

TextView<\/strong>‘\u0131m\u0131z\u0131 bulal\u0131m ve onu kullanmak i\u00e7in bir de\u011fi\u015fkene atayal\u0131m.<\/p>\n

TextView<\/strong> mTextView_Header = (TextView<\/strong>) findViewById(R.id.textView_header<\/span>);<\/span><\/p><\/blockquote>\n

Font atama i\u015flemini TypeFace<\/strong> s\u0131n\u0131f\u0131ndan t\u00fcretilen obje ile yap\u0131yoruz. TypeFace<\/strong> objesi olu\u015fturmadan \u00f6nce fontlar\u0131m\u0131z\u0131 uygulaman\u0131n dizininde uygun klas\u00f6re\u00a0kopyalad\u0131\u011f\u0131n\u0131zdan<\/strong> emin olun. A\u015fa\u011f\u0131daki ifade ile font dosyas\u0131ndan uygulamada kullanmak \u00fczere bir font yarat\u0131yoruz.<\/p>\n

TypeFace<\/strong> FontAwesome = Typeface.createFromAsset<\/em>(getAssets(),<\/span>“\/fonts\/FontBlok.ttf<\/span>“);<\/p><\/blockquote>\n

Normalde fontu herhangi bir klas\u00f6re atm\u0131\u015f olsak da (assets klas\u00f6r\u00fc d\u0131\u015f\u0131nda olsayd\u0131) yine bulabilirdik. Fakat uygulaman\u0131n assets dizini mevcut oldu\u011fundan direkt alt dizin olan fonts ile ba\u015flayabildik. Kodumuzun okunurlu\u011fu bir seviye daha artm\u0131\u015f oldu.<\/p>\n

\u015eimdi TextView<\/strong>‘\u0131m\u0131za bu fontu yani Typeface<\/strong>‘i yerle\u015ftirelim.<\/p>\n

mTextView_Header.setTypeface(FontAwesome);<\/span><\/p><\/blockquote>\n

TextView’\u0131m\u0131z art\u0131k istedi\u011fimiz bizim belirledi\u011fimiz fontta g\u00f6z\u00fckmeye ba\u015flad\u0131.<\/p>\n

Peki, ayn\u0131 TextView’da birden fazla font<\/strong> kullanmak m\u00fcmk\u00fcn m\u00fc? Cevap, evet<\/strong>.<\/p>\n

Ayn\u0131 TextView’da Birden Fazla Custom Font Kullan\u0131m\u0131<\/span><\/strong><\/h2>\n

Bunun i\u00e7in, TextView’\u0131n i\u00e7indeki metnin i\u00e7inde kullanaca\u011f\u0131n\u0131z fontlar\u0131n ka\u00e7\u0131nc\u0131 karakterden\u00a0itibaren ba\u015flayaca\u011f\u0131n\u0131<\/strong> ve bitece\u011fini<\/strong> bilmemiz gerekmektedir. String’i istedi\u011finiz<\/strong> her yerden \u00e7ekebilirsiniz. \u00d6nemli olan<\/strong> bir \u015fekilde nereden nereye font uygulayaca\u011f\u0131n\u0131z\u0131 biliyor olmakt\u0131r.<\/p>\n

String<\/strong>[] strings = new<\/span> String<\/strong>[]{“Multiple “<\/span>,<\/span>“Font”<\/span>};<\/span><\/p>\n

String<\/strong> totalString = “Multiple Font”<\/span>;<\/span><\/p>\n

int<\/span> <\/strong>currentLength = 0<\/span>;<\/span><\/p><\/blockquote>\n

Birinci\u00a0kelimeye\u00a0bir font, ikinci kelimeye ba\u015fka font atamas\u0131 yapaca\u011f\u0131m\u0131z i\u00e7in currentLength<\/strong><\/em> ile ikinci kelimenin nerede ba\u015flad\u0131\u011f\u0131n\u0131 tutuyoruz asl\u0131nda. \u0130kinci\u00a0kelime, birinci\u00a0kelimenin ard\u0131ndan ba\u015flayaca\u011f\u0131 i\u00e7in birinci\u00a0kelimeye font atad\u0131ktan sonra uzunlu\u011funu tutuyoruz<\/strong>. Bu \u00f6rnekte tutmam\u0131za pek gerek yok zira 2 kelime oldu\u011fu i\u00e7in\u00a0birinci\u00a0kelimenin uzunlu\u011fu diyerek ula\u015fabiliriz. Bu kullan\u0131m\u0131, d\u00f6ng\u00fc i\u00e7erisinde font atamas\u0131 yaparken kullan\u0131m kolayl\u0131\u011f\u0131 sa\u011flad\u0131\u011f\u0131 i\u00e7in payla\u015f\u0131yorum<\/strong>.<\/p>\n

Ayn\u0131 metinde birden fazla Typeface<\/strong> kullanmak i\u00e7in “SpannableString<\/strong>” s\u0131n\u0131f\u0131n\u0131 kullan\u0131yoruz. Bu bir nevi HTML mant\u0131\u011f\u0131yla \u00e7al\u0131\u015fmakta olan bir s\u0131n\u0131ft\u0131r. SpannableString ve\u00a0kullanaca\u011f\u0131m\u0131z fontlar\u0131n tan\u0131m\u0131n\u0131 yap\u0131yoruz ve metni yazd\u0131raca\u011f\u0131m\u0131z TextView’\u0131 buluyoruz.<\/p>\n

TextView<\/strong> mTextView_MultipleFont = (TextView<\/strong>) findViewById(R.id.textView_multiplefont<\/span>);<\/span><\/p>\n

Typeface<\/strong> FontBleedingCowboys= Typeface.createFromAsset(getAssets(),<\/span>“fonts\/Bleeding_Cowboys.ttf”<\/span>);<\/span>
\nTypeface<\/strong> FontBlok= Typeface.createFromAsset(getAssets(),<\/span>“fonts\/Blok.ttf”<\/span>);<\/span><\/p>\n

SpannableString<\/strong> styledString = new<\/span> SpannableString<\/strong>(totalString);<\/span><\/p><\/blockquote>\n

Burada “totalString<\/strong>” ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi string dizisinin toplam\u0131d\u0131r. \u00a0Typeface atamas\u0131n\u0131<\/strong> ise a\u015fa\u011f\u0131daki gibi yap\u0131yoruz.<\/p>\n

styledString.setSpan(FontBlok,<\/span>0<\/span>,<\/span>strings[0<\/span>].length(),<\/span>0<\/span>);<\/span>
\ncurrentLength+=strings[0<\/span>].length();<\/span><\/p>\n

styledString.setSpan(FontBleedingCowboys,<\/span>currentLength,<\/span>currentLength+strings[1<\/span>].length(),<\/span>0<\/span>);<\/span><\/p><\/blockquote>\n

Bundan sonra kalan i\u015f Spannable i\u00e7indeki metni TextView’a atamaktan<\/strong> ibarettir<\/strong>.<\/p>\n

mTextView_MultipleFont.setText(styledString);<\/span><\/p><\/blockquote>\n

Bir yaz\u0131n\u0131n daha sonuna geldik. Bir metin alan\u0131nda\u00a0custom font kullanmay\u0131 ve bir metin alan\u0131nda nas\u0131l birden fazla custom font kullanabilece\u011fimizi g\u00f6rd\u00fck. Unutmadan belirteyim. \u0130\u00e7erisinde metin olan b\u00fct\u00fcn view’lar (CheckBox, Button vb.) Typeface atamas\u0131n\u0131 desteklemektedir. Yani i\u00e7inde metin olan b\u00fct\u00fcn<\/strong> view’larda font belirleyebilirsiniz<\/strong>.<\/p>\n

\u00d6rnek projenin GitHub linkini tekrar payla\u015f\u0131yorum. \u015eu linkten<\/a>\u00a0proje dosyalar\u0131na eri\u015febilir, kendi bilgisayar\u0131n\u0131zda a\u00e7abilirsiniz. Font konusunda bu siteden<\/a> baz\u0131 g\u00fczel fontlara ula\u015fabilirsiniz. Kendinize iyi bak\u0131n, takipte kal\u0131n!<\/p>\n","protected":false},"excerpt":{"rendered":"

Merhaba arkada\u015flar. Bir \u00f6nceki yaz\u0131mda ListView ve Custom Adapter kullan\u0131m\u0131ndan bahsetmi\u015ftik. Bu yaz\u0131m\u0131zda nas\u0131l Custom Font (\u00d6zel Yaz\u0131 Tipi) kullanaca\u011f\u0131m\u0131zdan ve ayn\u0131 metin alan\u0131nda birden fazla fontu nas\u0131l kullanabilece\u011fimizden bahsedece\u011fiz.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13,2],"tags":[35,37,41,57,77,115,180,50,238,242,245,251],"class_list":["post-974","post","type-post","status-publish","format-standard","hentry","category-android","category-development","tag-android","tag-android-nasil","tag-android-uygulama","tag-birden-fazla-font","tag-custom-font","tag-github","tag-multiple-font","tag-ozel-font","tag-spannablestring","tag-textview","tag-typeface","tag-view"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=\/wp\/v2\/posts\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=974"}],"version-history":[{"count":0,"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=\/wp\/v2\/posts\/974\/revisions"}],"wp:attachment":[{"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metehantoksoy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}