摘要:由于公司的项目里使用了iconfont来部署图片,解决了每套图片还需要设置1x@,2x@,3x@等问题,今天索性来个而整理分享,方便自己也与方便他人。 ---赠人玫瑰,手有余香。
简介
IconFont技术起源于Web领域的Web Font技术。随着时间的推移,网页设计越来越漂亮。但是电脑预装的字体远远无法满足设计者的要求,于是Web Font技术诞生了。一个英文字库并不大,通过网络下载字体,完成网页的显示。有了Web Font技术,大大提升了设计师的发挥空间。
网页设计中图标需要适配多个分辨率,每个图标需要占用一次网络请求。于是有人想到了用Web Font的方法来解决这两个问题,就是IconFont技术。将矢量的图标做成字体,一次网络请求就够了,可以保真缩放。解决这个问题的另一个方式是图片拼合的Sprite图。
Web领域使用IconFont类似的技术已经多年,当我在15年接触BootStrap的时候Font Awesome技术大行其道。最近IconFont技术在iOS图片资源方面得以应用,最近有点时间自己研究整理了一番,在此记录学习点滴。
优点
- 由于IconFont是矢量图标,所以可以轻松解决图标适配问题
- 一套图标资源可以在不同平台使用(android ,ios,web)
- 减小体积,字体文件比图片要小
- 图标保真缩放,解决2x/3x乃至将来的nx图问题
- 方便更改颜色大小,图片复用
缺点
- 只适用于纯色icon
- 使用unicode字符难以理解
- 需要维护字体库
获取iconfont
制作步骤
step1:
从 iconfont 平台选择要使用到的图标(如图),并下载(选择下载代码)至本地;复制字体文件到项目 assets 目录;step2:
打开下载下来的文件,并在目录中打开 demo_unicode.html,找到图标相对应的 HTML 实体字符码step3:
打开 res/values/strings.xml,把 demo_unicode.html 各个图标的 字符吗 添加到 string 值;
如:
<string name="all"></string>
<string name="back"></string>
<string name="cart"></string>
<string name="category"></string>
<string name="close"></string>
<string name="comments"></string>
<string name="cry"></string>
step4:
比如使用 图标 cart,打开 activity_main.xml,添加 string 值到
TextView:
<TextView android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cart" />
对该 TextView 设置颜色、大小就等同于给图标 cart 设置颜色、大小。而且还不用考虑分辨率问题。
step5:
为 TextView 指定字体库:
import android.graphics.Typeface;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Typeface iconfont = Typeface.createFromAsset(getAssets(),
"iconfont/iconfont.ttf");
TextView textview = (TextView)findViewById(R.id.like);
textview.setTypeface(iconfont);}
通过以上 5 步,就可以实现目的了。
这就是iconfont的使用,是不是很简单。
当然你也可以将你的TextView或Typeface封装起来,在自己项目中的BaseActivity