【Android】教你使用字体图标

时间:2022-04-19 05:49:29

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

  • 图片的适配

  • 图片的大小、颜色改变


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

字体图标

【Android】教你使用字体图标

一款好的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"));
    }

}

第三步:准备图标

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

具体怎么做呢?大概分以下几步:

  • 打开阿里图标库,登录并新建一个项目
    【Android】教你使用字体图标

【Android】教你使用字体图标

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

【Android】教你使用字体图标

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

【Android】教你使用字体图标

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

【Android】教你使用字体图标

【Android】教你使用字体图标

【Android】教你使用字体图标

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

【Android】教你使用字体图标

  • main 新建 assets 文件夹,再新建 icons 文件夹

【Android】教你使用字体图标

  • 粘贴到 icons 目录下

【Android】教你使用字体图标

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

第四步:在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>

看一下效果吧
【Android】教你使用字体图标

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

但是呢,有一个问题,在 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;");
    }
}

效果

【Android】教你使用字体图标

那要怎么办呢?

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

我们再看效果:

【Android】教你使用字体图标


【end】


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

AppLib

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

1、引入
【Android】教你使用字体图标

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

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

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

更多内容,请点击:AppLib

2、图标
这里找一个图标
【Android】教你使用字体图标

3、XML
“`


运行效果
![一行代码实现字体图标实例](http://upload-images.jianshu.io/upload_images/5805596-707fd7f4de08b24c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

没有骗你吧,就一行代码!那为什么有两个呢?
 ```
    <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)

效果是这样的
【Android】教你使用字体图标

问题

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

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

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

【Android】教你使用字体图标

2、下载并解压,将后缀名为 .ttf 的复制到如图的目录下
【Android】教你使用字体图标

【Android】教你使用字体图标

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"/>

【Android】教你使用字体图标

4、Activity

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

看一下效果吧
【Android】教你使用字体图标

参考文献

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