版权声明：本文为博主原创文章，转载请注明出处。 /leaf_130/article/details/71725937前言SVG to VectorDrawable使用 Iconfont 制作图片字体文件 优点制作步骤 step1step2step3step4step5 引入 Android-Iconics github这个库的好处What do you getAlready available fonts如何使用 step1添加 gradle 依赖step2选择字体库添加一个喜欢的字体依赖库就可以了step3onCreate 中使用 LayoutInflaterCompat不太懂但是得这样做step4实际使用代码方式 自定义的字体库 step1实现 ITypeface 接口自定义 Font 类step2自定义 Application 类别忘了在配置文件配置step3代码中使用 遇到的问题 总结题外话
前言
之前的一篇文章《【Android 进阶】SVG 的使用以及绘制动画》简单介绍了 SVG 图片的好处以及如何在 Android 中使用 SVG 图片。本文接着介绍下如何在 Android 中使用阿里巴巴 Iconfont 平台的图片，方便我们日常的开发。
SVG to VectorDrawable
从阿里巴巴矢量图库 Iconfont 可以下载 SVG 形式的图片，导入 AS 中就转为了 VectorDrawable 形式的图片文件。如果不了解的可以看回我上一篇文章《【Android 进阶】SVG 的使用以及绘制动画》。
但是每次都需要下载 SVG 文件，再通过 AS 导入，也许算是挺麻烦的一件事情。现在推荐一个好工具，就是SVG to VectorDrawable，顾名思义，就是一个把 SVG 文件 转为 VectorDrawable 文件的工具。
只需要把 SVG 文件粘贴进去，该工具就会自动帮你转为 VectorDrawable 文件。最后你只需要在 AS 中新建个文件，然后粘贴转换后的 VectorDrawable 文件内容就去即可。当然，可能你觉得这样并不方便，那就见仁见智了。
网址：http://inloop.github.io/svg2android/
使用 Iconfont 制作“图片”字体文件
优点：
更方便的使用 SVG 图片
把图标当成字符使用，大小和颜色都可以随意改。
制作步骤
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>1234567
step4:
比如使用 图标 cart，
打开 activity_main.xml，添加 string 值到 TextView：
<TextViewandroid:id="@+id/like"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/cart" />12345
对该 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);}123456789
通过以上 5 步，就可以实现目的了。但如果你还是觉得不够方便，那么看下面这个第三方库吧！
引入 Android-Iconics
以上有点麻烦：使用第三方库:Android-Iconics 吧。
原理和之前讲的一样，只是把过程封装了起来。
github
/mikepenz/Android-Iconics
这个库的好处：
意思就是可以使用不同的 icons 在不同的大小，不同的颜色以及不同的分辨率条件下已依然表现出色。
What do you get
No customization limitations (size, color, contour, background, padding, positioning, …)One icon source (no more mdpi, hdpi, …)FlexibilityIf it takes a Drawable, it will also work with the IconicsDrawable!Save in APK sizeAll licenses included, best used with AboutLibraries相信上面的特色大家都看的懂，我也就不翻译了
Already available fonts
Google Material Design IconsMaterial Design Iconic FontFontawesomeMeteoconsOcticonsCommunity MaterialWeather IconsTypeiconsEntypoDeviconFoundation IconsIonicons可用的字体图标风格库。
更多详细的介绍请看官方介绍哈。
如何使用？
如何使用这个第三方库呢，其实 github 上的介绍已经非常简单清楚了，大家可以根据上面的介绍一步一步的使用此库。
这里简单的记录下使用步骤：
step1:添加 gradle 依赖
compile "com.mikepenz:iconics-core:2.8.4@aar"1
step2:选择字体库(添加一个喜欢的字体依赖库就可以了)
compile 'com.mikepenz:google-material-typeface:3.0.1.0.original@aar'compile 'com.mikepenz:material-design-iconic-typeface:2.2.0.2@aar'compile 'com.mikepenz:fontawesome-typeface:4.7.0.0@aar'compile 'com.mikepenz:octicons-typeface:3.2.0.2@aar'compile 'com.mikepenz:meteocons-typeface:1.1.0.2@aar'compile 'com.mikepenz:community-material-typeface:1.9.32.1@aar'compile 'com.mikepenz:weather-icons-typeface:2.0.10.2@aar'compile 'com.mikepenz:typeicons-typeface:2.0.7.2@aar'compile 'com.mikepenz:entypo-typeface:1.0.0.2@aar'compile 'com.mikepenz:devicon-typeface:2.0.0.2@aar'compile 'com.mikepenz:foundation-icons-typeface:3.0.0.2@aar'compile 'com.mikepenz:ionicons-typeface:2.0.1.2@aar'123456789101112
step3：onCreate 中使用 LayoutInflaterCompat（不太懂，但是得这样做）
Set the IconicsLayoutInflater as new LayoutInflaterFactory. This will enable automatic icon detection for TextViews,Buttons, and allow you to set icons on ImageView’s via xml. This is compatible with libs which wrap the baseContext like Calligraphy. This does not work on FAB’s please use the Context-Injection instead.（官方介绍）
@Overrideprotected void onCreate(Bundle savedInstanceState) {LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));//...super.onCreate(savedInstanceState);//...}1234567
step4：实际使用：代码方式
官方提供了很多实现方式，这里只介绍一种，其他的感兴趣可以去 github 上看。
Drawable drawable = new IconicsDrawable(this).icon(FontAwesome.Icon.faw_android).color(Color.RED).sizeDp(24)//可以随意设置颜色、大小、图标（图标库中的图标）123456
自定义的字体库
其实就是换字体库的意思，下面说说怎么自定义自己的字体文件。
主要的思路就是参考第三方框架写自己的自定义 Iconfont，
还是用上面例子中所下载的字体文件作为自己的自定义字体文件库。
按照 github 介绍可以分为以下几个步骤：
step1:实现 ITypeface 接口，自定义 Font 类
public class CustomFont implements ITypeface {private static final String TTF_FILE = "iconfont.ttf";private static Typeface typeface = null;private static HashMap<String, Character> mChars;@Overridepublic IIcon getIcon(String key) {return Icon.valueOf(key);}@Overridepublic HashMap<String, Character> getCharacters() {if (mChars == null) {HashMap<String, Character> aChars = new HashMap<String, Character>();for (Icon v : Icon.values()) {aChars.put(v.name(), v.character);}mChars = aChars;}return mChars;}@Overridepublic String getMappingPrefix() {return "custom";}@Overridepublic String getFontName() {return "CustomFont";}@Overridepublic String getVersion() {return "1.0.0";}@Overridepublic int getIconCount() {return mChars.size();}@Overridepublic Collection<String> getIcons() {Collection<String> icons = new LinkedList<String>();for (Icon value : Icon.values()) {icons.add(value.name());}return icons;}@Overridepublic String getAuthor() {return "www./leaf_130";}@Overridepublic String getUrl() {return "/leaf_130";}@Overridepublic String getDescription() {return "The premium icon font for Ionic Framework.";}@Overridepublic String getLicense() {return "MIT Licensed";}@Overridepublic String getLicenseUrl() {return "/leaf_130";}@Overridepublic Typeface getTypeface(Context context) {if (typeface == null) {try {typeface = Typeface.createFromAsset(context.getAssets(), TTF_FILE);} catch (Exception e) {return null;}}return typeface;}public enum Icon implements IIcon {//这里枚举两个图标custom_all('\ue696'),custom_back('\ue697');char character;Icon(char character) {this.character = character;}public String getFormattedName() {return "{" + name() + "}";}public char getCharacter() {return character;}public String getName() {return name();}// remember the typeface so we can use it laterprivate static ITypeface typeface;public ITypeface getTypeface() {if (typeface == null) {typeface = new CustomFont();}return typeface;}}}1234567891011121314151617181922232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811911122123124125126127128129130131
step2:自定义 Application 类（别忘了在配置文件配置）
public class MyApplication extends Application {@Overridepublic void onCreate() {super.onCreate();//only required if you add a custom or generic font on your ownIconics.init(getApplicationContext());//register custom fonts like this (or also provide a font definition file)Iconics.registerFont(new CustomFont());}}12345678910111213141516
step3:代码中使用
public class IconActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));super.onCreate(savedInstanceState);setContentView(R.layout.activity_icon);Drawable drawable = new IconicsDrawable(this).icon(CustomFont.Icon.custom_all).color(Color.BLACK).sizeDp(50);((ImageView)this.findViewById(R.id.img)).setImageDrawable(drawable);}}1234567891011121314151617181922
到这里已经实现了自定义 Iconfont 图标的所有步骤。更多使用方式请看 Github 上作者给出的详细说明文档吧。
遇到的问题
自定义的 CustomFont，代码中使用 ok,但是 xml 中使用不太行，暂时没找到解决方法，可能是我使用出了问题，也可能是这个库本身有点小 bug.
总结
上面论述了这么多，现在应该做个总结了，不然很快就忘了什么是 SVG ,什么是 Iconfont 图标。
SVG 就是拉伸不影响像素的一种特殊的矢量图，对页面适配的支持性很强。使用阿里巴巴矢量图库 Iconfont 网站下载的图标字体文件，在 Android 中使用将大大节省开销，因为 15 个图标的字体文件才 12k 左右。而之前的开发中一张图片就上百 k，可谓大大降低了 apk 的大小。另外，使用字体文件的图标，可以随意设置大小、颜色等属性，还能保证图片的高保真度，而不会出现其他问题。
题外话
欢迎关注我的微信公众号，不只是原创技术分享，还更多的是对生活的思考与总结。
转自:/leaf_130/article/details/71725937
