Android Icon-fonts:像文字一樣操作圖標

Android Icon-fonts:像文字一樣操作圖標

IconFonts

在Android手機上,每種字體實際上就是一套圖片,每個圖片由一個個點陣組成,並賦予一個對應的Unicode編碼。同樣的道理,我們可以把一些常用的圖標也製作成字體格式,分配Unicode編碼,並像使用文字一樣的使用這些圖標,這就是Icon fonts的用法,這種方法經常被用於前端開發中。

相比於使用Drawable對象,Icon fonts有如下優點:

1. 不再需要製作存儲不同分辨率的drawables,圖形資源的大小降低一個數量級
2. 可以方便的對icon-fonts進行縮放,改變顏色,改變大小(比如點擊前和點擊後),添加陰影和光暈等效果

使用效果如下,看起來就像操作一個圖標,實際上是在操作一個文本,而且我們不需要存儲不同尺寸和不同顏色的圖標。

IconFont使用效果

Icon fonts用法也很簡單,分四步:

  1. 將圖標生成SVG文件,並將SVG文件轉換成字體文件,格式爲ttf,同時每個圖標對應一個Unicode碼,如下圖。可以在這個網站進行轉換,同時上面有一些做好的圖標可以用:https://icomoon.io/app/#/select

    各種各樣的Icon

    Icon對應的Unicode

  2. 將生成的ttf字體文件放到assets文件夾
    assets文件夾

  3. 在strings.xml中給每個icon-font命名,對應的value就是該Icon的Unicode
    String xml

  4. 使用Typeface.createFromAsset加載字體文件,通過setTypeface給TextView設置字體,然後就可以像文字一樣給它設置顏色,大小等屬性了

Typeface font = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
cameraTV.setTypeface(font);
cameraTV.setText(R.string.ic_camera);
cameraTV.setTextSize(TypedValue.COMPLEX_UNIT_SP, 30);
cameraTV.setTextColor(getResources().getColor(R.color.yellow));

Done

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章