android中字体图标的使用

  字体图标，就是让图标有文字的属性，可以把这类图标看做文字一样使用，通过代码即可修改图标的颜色、大小等，而不需要再绘图工具中修改。在移动端及web端的开发中，在一些按钮、小图标等，都会使用字体图标。

获取字体图标

  获取字体图标，有一些比较常用的网站可以下载，比如阿里巴巴的iconfont库。

通过阿里巴巴的iconfont获取字体图标

  下载地址：https://www.iconfont.cn/
  搜索或通过不同的库，找到相应的图标，添加入库

  可添加多个，进行批量下载，点击右上角绿框内图标，点击下载代码，即可下载一个download的压缩包。

  download压缩包解压后，可得到如下文件：

  其中比较最重要的是iconfont.ttf，其中demo_index.html可以查看下载的图标，及其相应的Unicode（在图标下方）。

android中使用字体图标

将ttf文件复制到assets文件夹下

  将之前下载的压缩包里的iconfont.ttf复制到assets文件夹下，icon的文件夹可有可无：

  可能存在无assets文件夹的情况，需要自己创建，创建方式如下图所示：

定义字体图标控件

  在java包中写Iconview控件，我是存在com.example.icon.view.IconView。

package com.example.icon.view;

import android.content.Context;
import android.graphics.Typeface;
import androidx.appcompat.widget.AppCompatTextView;
import android.util.AttributeSet;


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"));
    }

}

  之前在网上找资料的时候，大多数的解决方式有import android.support.v7.widget.AppCompatTextView;,但是我在实际操作时，发现找不到android.support.v7,通过查找资料发现是android版本问题，为了解决android.support.v7与android.support.v4等在版本混乱冲突问题，google推出了androidx，故此处直接使用androidx。若无androidx，有android.support.v7，应使用import android.support.v7.widget.AppCompatTextView;替代import androidx.appcompat.widget.AppCompatTextView;

在res/values/strings.xml中添加string

  从这一步开始，与其他文字的使用方式类似，先在res/values/strings.xml中定义文字图标。

<resources>
    <string name="app_name">test</string>
    <!-- 底部导航栏图标 应用 -->
    <string name="apps">&#xe660;</string>
</resources>

修改布局文件（字体图标使用）

  在相应的布局文件中使用字体图标，声明必须指向字体图标控件定义位置：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="96dp"
            android:background="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">
        <com.example.icon.view.IconView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/apps"
                android:textSize="50sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"/>  
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

预览结果