Android 应用 IconFont

2018-09-30  本文已影响0人  badmask

问题

下面是两张对比图:

直接把【写入 textview中.png
设计童鞋想要的效果.png

实现图二的效果方式之一就是使用 IconFont。

如何使用

IconFont就是把图片做在字体文件(.ttf)中,每一张图片对应一个unicode码;
把字体文件放入 Android 的 assets 文件中;
对TextView进行设置:

   Typeface iconFont = Typeface.createFromAsset(mContext.getAssets(), "iconfont.ttf");
   tvWelfareTitle.setTypeface(iconFont);

将所需图片的对应unicode编码加入到strings文件中:

  <string name="iconfont_brackets_left">\ue901</string>
  <string name="iconfont_brackets_right">\ue902</string>

然后执行 setText 方法就可以了。


向Android 项目中加入资源文件 iconfont.ttf.png

IconFont到底是什么

就是字体图标,看着是个图标【,但其实是个文字,在Android的TextView中使用,可以通过设置此TextView的颜色和大小来设置IconFont;
不用考虑图标适配问题;
比图标占用的空间小;
一套图标资源,可以在 Android、iOS、Web三端使用;

如何获取ttf资源文件

在阿里巴巴矢量图标库:http://www.iconfont.cn/ 里,可搜索到大部分的图标;
加入到购物车后,到购物车界面,点击「下载代码」按钮;
下载后打开将拿到的ttf文件加入到assets文件中;
打开demo_unicode.html文件,可以看到每个图标对应的unicode编码;

阿里巴巴矢量图标库的购物车界面.png
下载后打开显示的内容.png
每个图标对应的unicode编码.png

缺点

图片只能显示纯色;

iOS使用IconFont时需要注意:
iOS使用IconFont时需要注意.png
参考链接

Android使用iconfont
iOS中iconfont(图标字体)的基本使用
不同语言在使用unicode 编码时的不同之处,下面这篇文章有我的粗略总结:学习-字符编码

上一篇 下一篇

猜你喜欢

热点阅读