“Bazı şeylerin gitmesine izin vermek işte bu nedenle çok önemlidir. Onları serbest bırakmak. Gevşek olanı kesmek. İnsanların hiç kimsenin işaretli kağıtlarla oynamadığını anlaması gerekiyor; bazen kazanırız ve bazen kaybederiz. Hiçbir şeyi ger almayı bekleme, yaptıkların için takdir edilmeyi bekleme, ne kadar zeki olduğunun keşfedilmesini bekleme ya da aşkının anlaşılmasını. Daireyi tamamla. Gururlu, yetersiz ya da kibirli olduğun için değil, sadece artık onun senin yaşamında yeri olmadığı için. Kapıyı kapat, plağı değiştir, evi temizle, tozdan kurtul. Geçmişte olduğun kişi olmayı bırak ve şu an kimsen o ol.”
by Paulo Coelho - Zahir S. 204

Font Awesome ile Android’de İkon Kullanımı

Tarih: Ağustos 10th, 2014 | Yazar: | Kategoriler: Android | Etiketler: , , | Yorum Yok »

Web arayüzleri ile ilgilenenlerin bildiği üzere web sayfalarında ikon kullanımı oldukça zahmetli bir işti. İkonlar önce PSD’den kırpılır, daha sonra sayfaya entegre edilirdi. Mouse üzerine geldiğinde farklı bir efekt olacaksa aynı işlem tekrar edilirdi. Bir de hız sorunu yaşamamak için Sprites tekniği ile tüm ikonlar bir image dosyasında toplanırdı.

Yukarıda anlatıklarımın geçmiş zaman kipinde olmasının sebebi ise; artık kullanıcının bilgisayarında, tabletinde, telefonunda yüklü olmayan fontları web sayfamıza dahil edebiliyor olmamız.

Font ve ikon arasındaki bağlantıyı ilk başta kuramamış olabilirsiniz. Bu bağlantıyı anlamak için font sisteminin nasıl çalıştığına bakalım. Font sistemini ikili bir eşleşme gibi düşünebiliriz. Bir tarafta bir karakter -a, b, c gibi- diğer tarafta ise bu karakterin nasıl sergileneceğini göstersen bir çizim. Yani ‘a’ harfinin karşısında ‘a’ harfinin nasıl görüneceğine ait bir çizim var. Bu çizim bildiğimiz anlamında ‘a’ harfinin bir görüntüsü de olabilir, bambaşka bir görüntü de olabilir. Örneğin; elma ikonu

Yani biz ‘a’ yazdığımıza ‘a’ harfinin görüntüsü yerine bir elma ikonu çıkabilir. Çünkü ‘a’ harfini fontumuzda elma ikonu ile eşleştirdik. Hali hazırda bu eşleşmeyi yapan birkaç font kütüphanesi var. Bunlardan bazıları aşağıda;

Bu yazıda yukarıdaki kütüphanelerden Font Awesome‘u kullanacağım. Şimdi Font Awesome’un nasıl kullanılacağına bakalım.

Öncelikle buradan Font Awesome’un fontunu indirelim. İndirdiğimiz bu dosyayı Android Uygulamamızın assets klasörüne kopyalayalım. Bu işlemden sonra buradan kullanacağınız ikonun kodunu(Örneğin android ikonu için:  ) seçelim ve strings.xml dosyamıza istediğimiz isimle yeni bir satır açarak aşağıdaki gibi ekleyelim

<string name="fa_android">&#xf17b;</string>

strings.xml dosyasına eklediğimiz bu değeri istediğimiz bir element’de(button, textview…)’da text parametresi olarak kullanalım. Ben aşağıdaki göründüğü gibi bir butonda kullandım.

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fa_android"
android:id="@+id/button"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:singleLine="false"
android:textSize="100dp"
android:textColor="#ff02cd1f" />

Font Awesome’dan aldığımız fontu yukarıda kullandığımız buton için ayarlayalım. (Ben acitivity’nin onCreate methodunda yaptım ayarlama işini)

Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
Button button = (Button)findViewById( R.id.button );
button.setTypeface(font);

Hepsi bu kadar. Herhangi bir sorun çıkmadıysa aşağıdaki gibi bir görüntü elde etmiş olmalısınız.

Screenshot_2014-08-10-17-49-41

Sonuç olarak; yukarıda web için anlattığım artıların hepsi aynı şekilde Android için de geçerli. Mobil dünya için ise bu artıların öne çıkanı;  ikon çizimlerinin vektör tabanlı oluşu. Yani siz bu ikonu ister 32dp text size ile kullanın isterse 320dp text size ile kullanın görüntüde hiç bir pikselleşme olmayacaktır.

Bu yazıda geçen uygulamanın kaynak kodlarına buradan ulaşabilirsiniz.



Yorum Yap