【Android(安卓)进阶】Iconfont 图标的使用以及自定义
- 前言
- SVG to VectorDrawable
- 使用 Iconfont 制作图片字体文件
- 优点
- 制作步骤
- step1
- step2
- step3
- step4
- step5
- 引入 Android-Iconics
- github
- 这个库的好处
- What do you get
- Already 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 name="back"><string name="cart"><string name="category"><string name="close"><string name="comments"><string name="cry">step4:
比如使用 图标 cart，
打开 activity_main.xml，添加 string 值到 TextView：
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 步，就可以实现目的了。但如果你还是觉得不够方便，那么看下面这个第三方库吧！
引入 Android-Iconics
以上有点麻烦：使用第三方库:Android-Iconics 吧。
原理和之前讲的一样，只是把过程封装了起来。
github
https://github.com/mikepenz/Android-Iconics
这个库的好处：
意思就是可以使用不同的 icons 在不同的大小，不同的颜色以及不同的分辨率条件下已依然表现出色。
What do you get
- No customization limitations (size, color, contour, background, padding, positioning, …)
- One icon source (no more mdpi, hdpi, …)
- Flexibility
- If it takes a Drawable, it will also work with the IconicsDrawable!
- Save in APK size
- All licenses included, best used with AboutLibraries
相信上面的特色大家都看的懂，我也就不翻译了
Already available fonts
- Google Material Design Icons
- Material Design Iconic Font
- Fontawesome
- Meteocons
- Octicons
- Community Material
- Weather Icons
- Typeicons
- Entypo
- Devicon
- Foundation Icons
- Ionicons
可用的字体图标风格库。
更多详细的介绍请看官方介绍哈。
如何使用？
如何使用这个第三方库呢，其实 github 上的介绍已经非常简单清楚了，大家可以根据上面的介绍一步一步的使用此库。
这里简单的记录下使用步骤：
step1:添加 gradle 依赖
compile "com.mikepenz:iconics-core:2.8.4@aar"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'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); //...}step4：实际使用：代码方式
官方提供了很多实现方式，这里只介绍一种，其他的感兴趣可以去 github 上看。
Drawable drawable = new IconicsDrawable(this) .icon(FontAwesome.Icon.faw_android) .color(Color.RED) .sizeDp(24)//可以随意设置颜色、大小、图标（图标库中的图标） 自定义的字体库
其实就是换字体库的意思，下面说说怎么自定义自己的字体文件。
主要的思路就是参考第三方框架写自己的自定义 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 mChars; @Override public IIcon getIcon(String key) { return Icon.valueOf(key); } @Override public HashMap getCharacters() { if (mChars == null) { HashMap aChars = new HashMap(); for (Icon v : Icon.values()) { aChars.put(v.name(), v.character); } mChars = aChars; } return mChars; } @Override public String getMappingPrefix() { return "custom"; } @Override public String getFontName() { return "CustomFont"; } @Override public String getVersion() { return "1.0.0"; } @Override public int getIconCount() { return mChars.size(); } @Override public Collection getIcons() { Collection icons = new LinkedList(); for (Icon value : Icon.values()) { icons.add(value.name()); } return icons; } @Override public String getAuthor() { return "www.blog.csdn.net/leaf_130"; } @Override public String getUrl() { return "http://blog.csdn.net/leaf_130"; } @Override public String getDescription() { return "The premium icon font for Ionic Framework."; } @Override public String getLicense() { return "MIT Licensed"; } @Override public String getLicenseUrl() { return "http://blog.csdn.net/leaf_130"; } @Override public 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 later private static ITypeface typeface; public ITypeface getTypeface() { if (typeface == null) { typeface = new CustomFont(); } return typeface; } }} step2:自定义 Application 类（别忘了在配置文件配置）
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); //only required if you add a custom or generic font on your own Iconics.init(getApplicationContext()); //register custom fonts like this (or also provide a font definition file) Iconics.registerFont(new CustomFont()); }}step3:代码中使用
public class IconActivity extends AppCompatActivity { @Override protected 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); }}到这里已经实现了自定义 Iconfont 图标的所有步骤。更多使用方式请看 Github 上作者给出的详细说明文档吧。
遇到的问题
自定义的 CustomFont，代码中使用 ok,但是 xml 中使用不太行，暂时没找到解决方法，可能是我使用出了问题，也可能是这个库本身有点小 bug.
总结
上面论述了这么多，现在应该做个总结了，不然很快就忘了什么是 SVG ,什么是 Iconfont 图标。
SVG 就是拉伸不影响像素的一种特殊的矢量图，对页面适配的支持性很强。使用阿里巴巴矢量图库 Iconfont 网站下载的图标字体文件，在 Android 中使用将大大节省开销，因为 15 个图标的字体文件才 12k 左右。而之前的开发中一张图片就上百 k，可谓大大降低了 apk 的大小。另外，使用字体文件的图标，可以随意设置大小、颜色等属性，还能保证图片的高保真度，而不会出现其他问题。
题外话
欢迎关注我的微信公众号，不只是原创技术分享，还更多的是对生活的思考与总结。
更多相关文章
- android 遇到Error:Execution failed for task ':app:processDeb
- 如何解决向eclipse导入android project时遇到错误“Invalid proj
- Android(安卓)5.0后图片报错：libpng warning: iCCP: Not recogniz
- android一个LinearLayout中具有几个控件，想要使那几个控件在Linea
- Android(安卓)开发之录音与播放
- android studio 如何清理没有用到的资源文件
- 〖Android〗scp替换脚本
- gradle统一管理版本号
- Android如何通过content provider构建媒体文件数据库