美文网首页
IconFont在Android中的使用

IconFont在Android中的使用

作者: cocolove2 | 来源:发表于2016-04-23 11:39 被阅读5893次

什么是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文件
iconfont图标
  • 使用FontLab studio 5查看iconfont.ttf文件


    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没有什么区别了,颜色切换,大小设置等。(文章的最后会贴上阿里巴巴矢量图库使用教程)

效果图

iconfont-screen.gif

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支持库

                            觉得不错点个赞呗~哈哈

参考文章

浅谈矢量图形前景
知乎回答IconFont
Icon Font --Android图标也能轻松换肤
如何在移动设备上应用iconfont

相关文章

网友评论

      本文标题:IconFont在Android中的使用

      本文链接:https://www.haomeiwen.com/subject/frwxrttx.html