【Android】教你使用字体图标-原创手记-慕课网

以前写项目的时候，遇到图标，就会很头疼，因为这以为着要使用图片，随之而产生下面的问题：

图片的适配
图片的大小、颜色改变

所以，我想说字体图标最大的好处就是自适应了，而且是使用 TextView 不用去切图，是矢量图，灵活调用。

字体图标

APP

一款好的APP，图标是少不了的，那么，这个图标是怎么实现的呢？

你可以可以引入图片作为图标，还可以使用字体图标。

我相信，大家跟我一样，都很讨厌图片吧，虽好看，可以给我们的APP加不少分，但是使用起来，并不那么回事。

如果图标是字体又会怎样呢？

颜色，大小，兼容性等等以前用图片看似难处理的问题，可能都不是事。

跟着我写

第一步：新建一个 Android Module

第二步：写一个 IconView

package com.fengwenyi.app.icondemo.view;

import android.content.Context;
import android.graphics.Typeface;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;

/**
 * @author Wenyi Feng(xfsy_2015@163.com)
 */
public class IconView extends AppCompatTextView {

    public IconView(Context context) {
        super(context);
        init(context);
    }
    public IconView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public IconView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    private void init(Context context) {
//        设置字体图标
        this.setTypeface(Typeface.createFromAsset(context.getAssets(),"icon/iconfont.ttf"));
    }

}

第三步：准备图标

你需要去找图标库，我用的是阿里图标库

具体怎么做呢？大概分以下几步：

打开阿里图标库，登录并新建一个项目

新建项目.png

首页搜索想要的图标，并加入购物车

购物车图标.png

将购物车中的图标添加到新建的项目中

添加到项目中.png

去项目中勾选并加入到购物车中，点击购物车，下载代码

项目中的图标.png

批量加入购物车.png

批量下载.png

解压，将其中以 .ttf 结尾的文件拷贝

解压.png

在 main 新建 assets 文件夹，再新建 icons 文件夹

目录结构.png

至此，字体图标就可以用了就可以使用了

第四步：在XML中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <com.fengwenyi.app.icondemo.view.IconView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:text="&#xe899;"
       android:textColor="#ED1C24"
       android:textSize="100sp"/>

</RelativeLayout>

看一下效果吧
效果.png

怎么样，还行吧，大小颜色都是可以随意调的，非常方便。

但是呢，有一个问题，在 java 代码赋值，不成功，如下：

XML

<com.fengwenyi.app.icondemo.view.IconView
       android:id="@+id/tvIcon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:text="&#xe899;"
       android:textColor="#ED1C24"
       android:textSize="100sp"/>

Java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        IconView tvIcon = findViewById(R.id.tvIcon);
        tvIcon.setText("&#xe899;");
    }
}

效果

无法显示效果.png

那要怎么办呢？

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        IconView tvIcon = findViewById(R.id.tvIcon);
//        tvIcon.setText("&#xe899;");
        tvIcon.setText(Html.fromHtml("&#xe899;"));
    }
}

我们再看效果：

之后的效果.png

【end】

下面是【一句话实现字体图标】

AppLib

闲话少说，看 AppLib 库是如何支持字体图标的。

1、引入
AppLib

在 build.gradle(Module:app) 中如下代码：

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    // ...
    compile 'com.github.fengwenyi:AppLib:0.0.11'
    // ...
}

更多内容，请点击：AppLib

2、图标
去这里找一个图标
Apple

3、XML

    <com.fengwenyi.app.applib.view.IconFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"/>

运行效果
一行代码实现字体图标实例

没有骗你吧，就一行代码！那为什么有两个呢？

    <com.fengwenyi.app.applib.view.IconFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"/>

    <com.fengwenyi.app.applib.view.IconFontTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"
        android:textColor="#ff0000"
        android:textSize="48dp"
        android:layout_marginTop="20dp" />

我只是想告诉你，字体图片真的好用

TextView

有人觉得这个控件名字好长、好丑啊，并不想用，我就想用 TextView 怎么办？

其实我们也是支持的。

你可以这样

    <TextView
        android:id="@+id/icon_font_01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xf179;"
        android:layout_marginTop="20dp"/>

        IconFontUtil.injectFont(icon_font_01)

还可以这样

        // IconFontUtil.injectFont(icon_font_01)
        icon_font_01.typeface = IconFontUtil.getTypeface(this)

效果是这样的
一行代码实现字体图标-03

问题

当你觉的字体图片非常好用，并且依赖上他是，你会发现，每次找图标，真心累，眼睛痛不说，很多都没有。

好吧，为了解决这个问题，于是有了这篇博文。

1、首先需要从阿里字体图标库下载需要的图标，如果不会，询问我，后面会给出链接教程。

Ali

2、下载并解压，将后缀名为 .ttf 的复制到如图的目录下

粘贴目录如下

3、XML

    <TextView
        android:id="@+id/icon_font_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#xe697;"
        android:textSize="36dp"
        android:textColor="#333333"
        android:layout_marginTop="20dp"/>

复制代码

4、Activity

        val path = Constant.FONTS_DIR + "/iconfont.ttf"
        icon_font_02.typeface = IconFontUtil.getTypeface(this, path)

看一下效果吧
Ali

参考文献

1、 Android怎么使用字体图标自定义FontTextView字体图标控件-- 使用方法