1 背景

最近因为一些个人私事导致好久没写博客了，多事之年总算要过去了，突然没了动力，所以赶紧先拿个最近项目中重构的一个小知识点充下数，老题重谈。

在我们App开发中大家可能都会有过如下痛疾（程序员和设计妹妹注意喽）：

• 好多小的图标好烦人，又占体积还要考虑分辨率，一拉伸就模糊等。

• 同一个图标不同状态还有不同颜色的多张。

• 总是幻想IOS、Android、Web等对于一个图标只切一次图多好。

如果你有过类似的痛疾那么下面讨论的故事就是一个完美的解决方案，当然了，采用下面方案对于重型应用或者固件级的优化才会十分明显，对于普通小应用那就要看自己了。

2 PNG、IconFont、SVG理论

PNG为位图，是由不同的排列和染色的像素点组成的图像，当放大位图时就能清晰的看见无数个小方块（像马赛克一样），所以位图的扩大实质是增加单个像素点的大小，故而导致在不同分辨率表现非常糟糕。

SVG为可缩放矢量图，它不会像位图一样因为缩放而让图片质量下降，他在不同分辨率的表现都一样清晰。

IconFont是WebFont形式的图标，你可以把他认为就是WebFont，该类东东的制作来自于SVG矢量图，所以它不会像位图一样因为缩放而让图片质量下降，他在不同分辨率的表现都一样清晰。

下面我们简单给出这几种格式图标素材的对比：

有了上面这些对比之后，在正式开始实战之前我们先来简单粗暴了解下SVG与IconFont在App中的优点吧，不然下文就没有存在的意义喽，如下：

• 图标集中处理，设计妹妹只用出一次图喽。

• 减少重型应用或者固件大小，因为IconFont是字符串而不是图片，SVG的体积也小于PNG。

• 因为IconFont的绘制原理和普通文本一样，所以运行时会占用更小的内存空间。

听着挺诱人，好吊的样子，实际下面我们来看一下你就明白啦。

3 PNG、IconFont、SVG实战

有了上面的理论基础，下面我们就来看下他们各自的使用方法；关于PNG的使用这里就不介绍了，没啥新鲜的，从Android一出来支持到现在的格式，要是还不会那就真该拖出去乱炖了。

3-1 IconFont使用实例

哈哈，这个其实阿里妈妈MUX团队早就给大家搞好强大的库和相关使用文档了，详细可以点我查看。当然喽，有的公司会搞自己的库服务器，自己去搭建，有的公司会借助阿里妈妈提供的平台直接去制作；不管哪种平台其实实质都一样，没啥可说的，原理一样，只是我们可能会自己依据需求自定义一些支持IconFont的拓展TextView、ImageView等，万变不离其宗，由于确实很简单，下面我们给一个非常简单的例子描述就行了。如下以阿里巴巴IconFont平台为例：

1. 从平台选择要使用到的图标下载到本地，复制ttf字体文件到项目assets目录下。

2. 打开从IconFont平台下载下来的demo.html文件，找到图标相对应的HTML字符码。

3. 打开项目res/values/strings.xml，添加string字符串值为上面字符码。

4. 注意：上面2和3步在有些自己搭建的平台上会自动用代码生成一个iconfont.xml的string文件，这样就不用自己手动去从demo.html复制到res下了，而是直接将iconfont.xml复制到res，不清楚那么牛逼的阿里为何没这么做。

5. 打开布局文件activity_main.xml，添加上面3生成的string值到TextView（这里只以TextView为例演示，实际中一般我们会直接拓展定义TextView等的）。如下：

   <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/icon_font_add" />
   1
   2
   3
   4

   接着给该TextView指定使用IconFont的文字文件。如下：

   Typeface iconfont = Typeface
                           
   关键字：