Android神技之 使用SVG以及自定义IconFont字体库

Android神技之 使用SVG以及自定义IconFont字体库

简介

Google在Android 5.X中增加了对SVG矢量图形的支持。

SVG是什么

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG用来定义用于网络的基于矢量的图形

SVG使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

特点

图片放大N倍，图片也不会模糊 ，放大不会失真

Bitmap和SVG的区别

Bitmap（位图）通过在每个像素点上存储色彩信息来表达图像，而SVG是一个绘图标准。与Bitmap对比，svg最大特点是放大不会失真，而且Bitmap需要为不同分辨率设计多套图标，而矢量图不需要。

SVG学习–VectorDrawable的使用

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

如何将SVG转换成VectorDrawable XML资源

svg转换为VectorDrawable 工具

目前找了这么多工具，并没有找到xml转化为VectorDrawable的工具，目前只能通过Android SVG to VectorDrawable这个工具将SVG的图标转化为VectorDrawable的xml文件，后复制该xml文件到AS的drawable的文件夹。

每一个SVG图片需要在AS的drawable里面生成这样一个xml文件，这样只有一套，但是文件太多，因此只需要将PNG合在一个字体里面。

Android中使用iconfont图标

从iconfont平台选择使用到的图标，并下载到本地；复制字体文件到assets目录

打开下载下来的文件，并在目录中打开demo.html，找到图标相对应的HTML实体字符码

打开res/values/string.xml，添加string值：

<string name="icon_erweima"></string>

打开activity_main.xml，添加string值到TextView：

为TextView指定文字

Typeface typeface=Typeface.createFromAsset(getAssets(),"iconfont.ttf");

TextView textView= (TextView) findViewById(R.id.text_icon);

textView.setTypeface(typeface);

步骤

1、登录到阿里iconfont图标库，选择所需要的图标，添加入库





string.xml文件的string节点的name的值，注意需要将分号“;”也复制过去





注意图标名中间不能用横杠“-”而要用下划线“_”

自定义字体库

尽管上面减小了APP的大小，虽然可以封装起来，但是还是很麻烦。GitHub上已经有大神封装了这样的一个库Android-Iconics ，所以只需要在AS中添加以来就可以使用；使用这个图标库中的图标可以在不同的尺寸，颜色，分辨率场景中使用。

*尽管已经存在了这样一个iconfont库，但是本身这个库就存在很多问题，在实际GitHub上的介绍，存在诸多bug，有许多的坑，实际开发中需要多加验证，或者咨询该库的作者Mike Penz，而且作者也多次和更多开发者进行互动在这里

*

关于Android-Iconics 开源库介绍的使用，可以参考这里震惊！Icon使用极其简单？ Android-Iconics 开源库介绍、 Android-Iconics 开源库的使用 、 IconFont在Android中的使用，这些网友的解读尽管不是全部正确，但是也可以参考开阔思路。

注意事项：

使用Android-Iconics 需要注意该开源库一共提供我们了12个依赖库，每一个依赖库的图标icon前缀都和依赖库一一对应。如果找不到，或者报错，很有可能是icon前缀拼写错误或者是你自定义的依赖库。

Google Material Design Icons

“gmd”

ORIGINAL by Google

compile 'com.mikepenz:google-material-typeface:+.original@aar'

Material Design Iconic Font

“gmi”

Google Material Iconic

compile 'com.mikepenz:material-design-iconic-typeface:+@aar'

Fontawesome

“faw”

compile 'com.mikepenz:fontawesome-typeface:+@aar'

Meteocons

“met”

compile 'com.mikepenz:meteocons-typeface:+@aar'

Octicons

“oct”

compile 'com.mikepenz:octicons-typeface:+@aar'

Community Material

“cmd”

compile 'com.mikepenz:community-material-typeface:+@aar'

Weather Icons

“wic”

compile 'com.mikepenz:weather-icons-typeface:+@aar'

Typeicons

“typ”

compile 'com.mikepenz:typeicons-typeface:+@aar'

Entypo

“ent”

compile 'com.mikepenz:entypo-typeface:+@aar'

Devicon

“dev”

c

ompile 'com.mikepenz:devicon-typeface:+@aar'

Foundation Icons

“fou”

compile 'com.mikepenz:foundation-icons-typeface:+@aar'

Ionicons

“ion”

compile 'com.mikepenz:ionicons-typeface:+@aar'

2、添加依赖库后，在普通控件上使用图标，一定要在onCreate方法里面且在super.onCreate()之前加上

LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));

3、图标库可以作为一个drawable也可以在XML文件使用占位符赋值。引用时一定要和依赖库中对应的字体库中枚举类icon中的图标名一致，比如依赖了Ionicons ，这个图标库引用时就要和Ionicons这个类中枚举类icon的图标名一致。图标名可以通过Ionicons 这个网站，点击图标就可以获得图标名，如下图

自定义字体库

以上综述，也是对自定义字体库的注解，

1. 将从阿里图标网上的图标添加到购物车，后添加到一个项目，下载到本地的文件中的ttf格式字体文件复制到AS的assets文件下

2. 需要建立自己的自定义字体库类比如

public class MyIconFont implements ITypeface

，实现这个接口ITypeface，重写其中的方法，以及创建枚举类

public enum Icon implements IIcon

可以将依赖库Ionicons 中的Ionicons这个类中重写的方法以及枚举类和其他需要的复制过去，但是记得修改以及复制过去导致的包的问题。

实现ITypeface接口需要重写的方法中重要的是getMappingPrefix()、getIcons()、getTypeface()这3个方法

3、 创建好自己的字体类MyIconFont，后需要创建一个MyApplication继承于Application这个类并且在清单文件添加这个MyApplication



4、下图是需要注意的地方



自建字体类中的枚举类中的注意点





自建字体类中的注意点







项目demo下载地址这里