【Android 开发框架搭建】-使用Iconfont-阿里巴巴矢量图标库

前言

在项目中经常需要用到一些小图标，避免需要切图或者往项目资源中导入大量图标资源。我们可以使用字体矢量图标来减少资源、适配更方便，这里介绍Android项目阿里巴巴矢量字体图标的使用。

使用

1. 前往阿里巴巴矢量图标下载字体文件

注：字体只支持单色图标哦，如项目需要使用多色图标可以使用SVG矢量图标，后续章节再介绍Android中如何使用阿里巴巴矢量图标SVG方式的。

进入网站登录后，按下方步骤获取字体文件
点击资源管理我的项目

进入我的项目点击右上方加号图标新建项目

填写项目、项目描述后点击新建

建好项目后回到首页，点击顶部导航栏中图标库，点击官方图标库选择喜欢的图标模板库

进入喜欢的图标模板库后选择喜欢的图标，点击加入购物车

图标选择完毕点击右上角购物车，进入购物车页面

确认图标正确，点击添加至项目，选择一开始新建的项目点击确定

确认选择的项目中图标是否正确，点击下载至本地

解压下载的资源，复制iconfont.ttf

2. Android项目中使用阿里巴巴矢量图标字体文件

在Android项目的assets目录中添加iconfont.ttf的字体文件

然后在项目中新建一个继承AppCompatTextView的自定义TextView代码如下:

public class IconTextView extends AppCompatTextView {
    public IconTextView(Context context) {
        super(context);
        init(context);
    }

    public IconTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public IconTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        //设置字体文件
        this.setTypeface(Typeface.createFromAsset(context.getAssets(),"iconfont.ttf"));
    }
}

自定义TextView创建完成后我们就可以使用字体图标了使用方式如下:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <项目包名.IconTextView
        android:text="&#xe6eb;"
        android:textSize="30dp"
        android:textColor="@color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <项目包名.IconTextView
        android:text="&#xe6ef;"
        android:textSize="50dp"
        android:textColor="@color/colorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <项目包名.IconTextView
        android:text="&#xe6f0;"
        android:textSize="100dp"
        android:textColor="@color/colorAccent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>