以前寫項目的時候是牢，遇到圖標(biāo)灯荧，就會很頭疼礁击，因為這以為著要使用圖片，隨之而產(chǎn)生下面的問題：

• 圖片的適配

• 圖片的大小逗载、顏色改變

所以哆窿，我想說字體圖標(biāo)最大的好處就是自適應(yīng)了，而且是使用 TextView 不用去切圖厉斟，是矢量圖挚躯，靈活調(diào)用。

字體圖標(biāo)

APP

一款好的APP擦秽，圖標(biāo)是少不了的秧均，那么，這個圖標(biāo)是怎么實現(xiàn)的呢号涯？

你可以可以引入圖片作為圖標(biāo)目胡，還可以使用字體圖標(biāo)。

我相信链快，大家跟我一樣誉己，都很討厭圖片吧，雖好看域蜗，可以給我們的APP加不少分巨双，但是使用起來噪猾，并不那么回事。

如果圖標(biāo)是字體又會怎樣呢筑累？

顏色袱蜡，大小，兼容性等等以前用圖片看似難處理的問題慢宗，可能都不是事坪蚁。

跟著我寫

第一步：新建一個 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) {
//        設(shè)置字體圖標(biāo)
        this.setTypeface(Typeface.createFromAsset(context.getAssets(),"icon/iconfont.ttf"));
    }

}

第三步：準(zhǔn)備圖標(biāo)

你需要去找圖標(biāo)庫，我用的是 阿里圖標(biāo)庫

具體怎么做呢镜沽？大概分以下幾步：

• 打開阿里圖標(biāo)庫敏晤，登錄并新建一個項目

  
  
  找到新建項目的位置.png

新建項目.png

• 首頁搜索想要的圖標(biāo)，并加入購物車

購物車圖標(biāo).png

• 將購物車中的圖標(biāo)添加到新建的項目中

添加到項目中.png

• 去項目中勾選并加入到購物車中缅茉，點擊購物車嘴脾，下載代碼

項目中的圖標(biāo).png

批量加入購物車.png

批量下載.png

• 解壓，將其中以 .ttf 結(jié)尾的文件拷貝

解壓.png

• 在 main 新建 assets 文件夾蔬墩，再新建 icons 文件夾

assets.png

• 粘貼到 icons 目錄下

目錄結(jié)構(gòu).png

至此译打，字體圖標(biāo)就可以用了就可以使用了

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

怎么樣，還行吧拇颅，大小顏色都是可以隨意調(diào)的扶平，非常方便。

但是呢蔬蕊，有一個問題结澄，在 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("");
    }
}

效果

無法顯示效果.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("");
        tvIcon.setText(Html.fromHtml(""));
    }
}

我們再看效果：

之后的效果.png

【end】

下面是【一句話實現(xiàn)字體圖標(biāo)】

AppLib

閑話少說，看 AppLib 庫是如何支持字體圖標(biāo)的猜扮。

1勉吻、引入

AppLib v20

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

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

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

更多內(nèi)容，請點擊：AppLib

2旅赢、圖標(biāo)
去這里找一個圖標(biāo)

Apple

3齿桃、XML

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

運行效果

一行代碼實現(xiàn)字體圖標(biāo)實例

沒有騙你吧妈踊，就一行代碼懦窘！那為什么有兩個呢？

   <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)

效果是這樣的

一行代碼實現(xiàn)字體圖標(biāo)-03

問題

當(dāng)你覺的字體圖片非常好用千绪，并且依賴上他是，你會發(fā)現(xiàn)梗脾，每次找圖標(biāo)荸型，真心累，眼睛痛不說炸茧，很多都沒有瑞妇。

好吧，為了解決這個問題宇立，于是有了這篇博文踪宠。

1自赔、首先需要從阿里字體圖標(biāo)庫下載需要的圖標(biāo)妈嘹，如果不會，詢問我绍妨，后面會給出鏈接教程润脸。

Ali icon 01

2、下載并解壓他去，將后綴名為 .ttf 的復(fù)制到如圖的目錄下

復(fù)制 .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"/>

復(fù)制代碼

4、Activity

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

看一下效果吧

Ali 字體圖標(biāo)庫效果

參考文獻

1灾测、 Android怎么使用字體圖標(biāo) 自定義FontTextView字體圖標(biāo)控件-- 使用方法