什么是iconFont
- iconFont顾名思义是字体图标,图标就藏在字体文件里面,看着是个图标,其实却是个文字,这就是所谓的icon font。
- iconFont是矢量图标
iconFont优缺点
- 优点
1.由于IconFont是矢量图标,所以可以轻松解决图标适配问题
2.图标以字体文件的形式存在项目中(.ttf文件一般放在assets文件夹下),体积小可以减小APK的体积。
3.一套图标资源可以在不同平台使用(android ,ios,web)
4.资源维护方便。
- 缺点
1.需要自定义svg图片,并将其转换为ttf文件,图标制作成本比较高
2.添加图标是需要重新制作ttf文件
3.只能支持单色(不支持渐变色图标)
- 通过以上的利弊分析,IconFont还是很值得我们使用的,大家可能担心制作问题,但是我觉得没有必要,因为我们有
阿里巴巴矢量图标库
,基本的图标我们都可以找到,最重要的是阿里巴巴矢量图标库
支持IconFont
,所以我们这些开发者就不用担心制作的问题啦。
IconFont在android端的使用
终于来到正文啦,那我们就看看iconfont如何使用吧!
- iconfont.ttf文件
-
使用FontLab studio 5查看iconfont.ttf文件
代码片段
//我这里的图标文件是iconfont.ttf(目录:assets/fonts/iconfont.ttf)
TextView tv1=(TextView)findViewById(R.id.xxxx);
Typeface typeface=Typeface.createFromAsset(getAssets(),
"fonts/iconfont.ttf");
tv1.setTypeface(typeface);
//设置图标(对应上面的点赞图标)(Unicode编码)
tv1.setText("\ue600");
- 剩下的就是和正常使用TextView没有什么区别了,颜色切换,大小设置等。(文章的最后会贴上阿里巴巴矢量图库使用教程)
效果图
Demo代码片段
- layout布局文件
<TextView
android:id="@+id/main_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:textColor="@color/text_color_selector" />
- color/text_color_selector 文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/darker_gray" android:state_pressed="true"/>
<item android:color="@android:color/holo_blue_bright"/>
</selector>
github上也有IconFont支持库
- Android-Iconics
- 这个库功能更全,喜欢的可以试试。
觉得不错点个赞呗~哈哈
参考文章
浅谈矢量图形前景
知乎回答IconFont
Icon Font --Android图标也能轻松换肤
如何在移动设备上应用iconfont