天天看點

icon字型庫

在Android項目開發中,圖檔可謂是必不可少的一部分,這時我們可能會去看許多圖檔的适配方案,例如,根據不同分辨率來提供多套圖什麼的…

這篇文章并不是去介紹如何去做圖檔的适配,而是介紹一個略屌的字型庫,利用該字型庫,我們可以用TextView的形式去顯示圖檔,而且我們還可以用android:textSize随意改變圖檔的大小! 

聽起來是不是有點小激動了,不要着急,因為它隻是一個字型庫,是以使用起來非常簡單,在介紹它之前,我們先來介紹一種設定字型的絕佳方式。

在開始之前,我們先來看一張圖。

icon字型庫

如果你認為這上面的圖檔都是用ImageView去顯示,那你就錯了,這些全都是用TextView搞的,快快快,我們馬上來介紹一下這個屌屌的東西吧。

1.全局設定字型

大家都知道,在android中,我們如果要更換字型,除了要引入我們需要的字型庫外,還需要給我們的TextView一一去設定使用的字型,如何去設定呢?其實很簡單。

textView.setTypeface(Typeface tf);
           

盡管就這麼一行代碼,但是,在我們項目中肯定會存在大量的TextView,難道我們要一個個的去動手設定嗎?想想這也是一件很頭疼的事,下面就介紹一種友善的方法,一行代碼解決字型設定的問題。

在看代碼之前,先來看看思路,其實思路很簡單,

我們提供一個根布局,寫一個方法去遞歸周遊整個根布局,如果發現是textView,則設定字型。

思路很簡單,相信代碼也很簡單,就是一個遞歸方法。

icon字型庫

定義了一個工具類,這個類提供兩個靜态方法,但是核心都是

public static final void injectFont(View rootView, Typeface tf)
           

這個方法中,首先我們去判斷我們給的rootView是不是ViewGroup,如果是ViewGroup,則周遊他的所有子view,然後遞歸去調用這個方法,直到全部完成,如果發現某個view是TextView,則我們調用setTypeface方法來設定字型。

ok,從這個工具類中我們還可以看到,我們的字型是放在assets/fonts目錄下的。

2.fontawesome的使用

好了好了,我們開始進入今天的主題,今天的主角就是fontawesome這個字型庫,在開始使用之前,我們我們需要到

  • https://github.com/FortAwesome/Font-Awesome/

下載下傳這個字型庫。下載下傳下來以後,你會看到有很多目錄和檔案,沒關系,我們隻需要一個檔案-fontawesome-webfont.ttf,這個檔案位于/fonts/目錄下。将這個ttf檔案copy到你項目的assets目錄下,按照慣例或者說是共識,我們可能是将它放到assets/fonts這個目錄下(注意,沒有這個目錄的話,建立它!)。

修改我們上面的工具類,将字型指定為我們新引入的字型庫。

public class FontHelper {
    public static final String FONTS_DIR = "fonts/";    
    public static final String DEF_FONT = FONTS_DIR + "fontawesome-webfont.ttf";
}
           

ok, 準備工作都做好了,那我們就開始使用它吧,看我的xml布局檔案,

icon字型庫

除了第一個TextView的文本我們認識外,其他的我們一概不熟! 沒關心,過一會,我會給出一個認識它們的方式。還需要注意的是,很多TextView我們給出了textSize或者textColor屬性,不用想這些肯定去控制了我們需要顯示的圖檔的大小和顔色! 

最後是在activity中使用字型庫,正式利用了上面的工具類,是以我們的代碼将會很簡單。

icon字型庫

僅僅一行代碼,

我們就完成了給所有TextView設定字型的工作,現在可以運作一下項目,再和文章剛開始的那張圖做一下對比,看看我們給TextView設定的那些屬性,是不是都生效了!

可是,現在我們又遇到了一個問題,我們怎麼知道哪寫文本代表了什麼圖檔呢?下面給出一個網址,通過這個網址,大家可以看到實體文本和他對應的圖檔的一個對照表。

  •  http://fortawesome.github.io/Font-Awesome/cheatsheet/

哦,對了,不知道大家有沒有發現,這裡我們無意中解決了一個圖檔大小的問題,因為我們可以任意改變一個文本的大小,是以,就不需要提供多套圖去适配不同的螢幕了。

ok, 就到這裡吧,希望大家可以從這裡找到自己喜歡或者适用自己的圖示。

參考連結:

  • http://code.tutsplus.com/tutorials/how-to-use-fontawesome-in-an-android-app–cms-24167

源碼下載下傳:

  • http://download.csdn.net/detail/qibin0506/9131929

===========================================================================================================================

1.如何友善的使用   

對于使用,最主要就是找到一些靠譜的素材站點了

  • http://www.iconfont.cn/
  • https://icomoon.io/app/#/select
  • https://github.com/mikepenz/Android-Iconics

我一般使用第一個站點較多,基本上可以搜尋到需要的任何圖示,非常友善,也支援顔色和大小的設定,比如我們搜尋“聊天”:

icon字型庫

如果你還在依賴反編譯找圖示,不如試試這個網站吧,單純的下載下傳還不要登入,非常友善。

其他的網站用法應該類似~~不贅述了~~

2.字型庫大小的憂慮   2.1 按需加載

一般情況下,一個字型庫可能都是幾M甚至幾十M,是以大家本能的反應是,這種方式雖然友善好用,但是如果為了幾個圖示加載一個超大的字型庫肯定是拒絕的。

其實不存在這樣的問題的,因為字型庫内的圖示是可定制的,也就是說,我這個app用到了20個圖示,我隻需要将20個圖示放到一個字型庫即可,而不是加載完整的字型庫。

下面看一下簡單的資料比較:

項目中的一個小圖(xhdpi下的ic_launcher.png)大小為5KB。

我随便打包了22個圖示,做成的字型庫的大小為:14kb / 22 = 0.64kb

icon字型庫

而且這個字型庫中的圖,是可以随意放大不失真的~如果和大圖對比,那麼優勢更加明顯。

注:下載下傳下來是一個壓縮包,裡面包含ttf,svg等,你可以打開demo.html作為字元與icon的對照表。

是以:該方案也是apk瘦身的可選手段之一。

2.2 自定義圖示

還有種場景是,app内的圖示部分是自己制作的,部分是網絡上已有的,那麼可以打成一個字型庫麼。

當然是可以的,比如你就可以依賴iconfont.com這個網站,自行上傳svg圖示,然後就可以自由選擇了。

關于iconfont網站的用法參考:

  • http://www.iconfont.cn/help/platform.html

即可。

3.如何友善的使用   

上一篇文章中給出了一個遞歸周遊的方式去尋找TextView然後設定TypeFace,很多朋友都對其性能表示考慮,并表示可以通過自定義View的方式來替代該方案。

關于自定義View的方案,這裡就不描述了,無非就是在構造方法中去設定TypeFace。

記得以前我寫過探究 LayoutInflater setFactory一文,是以我們介紹跟LayoutInflaterFactory相關的一種做法。

我們編寫一個自定義的LayoutInflaterFactory:

icon字型庫

字型檔案我放在assets目錄下。

然後你可以在你的BaseActivity的onCreate中,調用如下代碼:

icon字型庫

注意一定要在super.onCreate前調用即可。

該方式可以在TextView及其子類對象建立完成時,就可以為其調用setTypeFace,非常的高效。

而對于字型庫的加載,如果有需要,你甚至可以采用懶加載的方式,在SplashActivity中對其初始化。

如果你對setFactory不了解:可以詳細閱讀探究 LayoutInflater setFactory該文。