字体图标库的导入与使用(2018.9.30)

1、设置字体图标库（主要步骤）

1.1 File - >Project Structure

set_font_icon_library.png

1.2 设置之后gradle中显示如下：

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:26.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation project(':latte-annotations')
    //字体图标
    implementation 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2'
    implementation 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2'
}

1.3 使用字体图标库FontAwesomeModule：

public class ExampleApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Latte.init(this)
                .withIcon(new FontAwesomeModule())
                .withApiHost("http://127.0.0.1/")
                .configure();
    }
}

1.4 验证

• MainActivity

package comi.example.liy.festec;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import comi.example.liy.latte.app.Latte;

public class MainActivity extends AppCompatActivity {

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

• activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="comi.example.liy.festec.MainActivity">

    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_test"
        android:text="{fa-coffee}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</android.support.constraint.ConstraintLayout>

-运行界面显示对应图标

coffee.png

2、扩展 - 使用别的字体(自定义字体图标库)

2.1、阿里巴巴矢量图标库中的ttf
「阿里巴巴矢量图标库」(http://www.iconfont.cn)

• 搜索所需要的图标加入购物车

  
  step1.png

• 在购物车页面下载代码

  
  step2.png

• 下载到本地后找到iconfont.ttf文件

  
  step3.png

• 在项目对应位置新建assets文件夹，并将iconfont.ttf文件复制到该文件夹下

  
  step4.png
• 使用自定义字体图标库FontEcModule：

package comi.example.liy.festec;

import android.app.Application;

import com.joanzapata.iconify.fonts.FontAwesomeModule;

import comi.example.liy.latte.app.Latte;
import comi.example.liy.latte.ec.icon.FontEcModule;


/**
 * Created by liy on 2018-09-28 15:23
 */
public class ExampleApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Latte.init(this)
                .withIcon(new FontAwesomeModule())
                .withIcon(new FontEcModule())//自定义FontModule
                .withApiHost("http://127.0.0.1/")
                .configure();
    }
}

package comi.example.liy.latte.ec.icon;

import com.joanzapata.iconify.Icon;
import com.joanzapata.iconify.IconFontDescriptor;

/**
 * Created by liy on 2018-09-29 16:43
 * 类比FontAwesomeModule类自定义FontModule
 */
public class FontEcModule implements IconFontDescriptor {
    @Override
    public String ttfFileName() {
        return "iconfont.ttf";
    }

    @Override
    public Icon[] characters() {
        return EcIcons.values();
    }
}

package comi.example.liy.latte.ec.icon;

import com.joanzapata.iconify.Icon;

/**
 * Created by liy on 2018-09-29 16:47
 */
public enum EcIcons implements Icon {
    icon_scan('\ue8b3'),//字体编码转为unicode：前缀&#x改为反斜杠加u,前缀分号删除（也可创建类来处理字符串）
    icon_ali_pay('\ue603');//

    private char character;

    EcIcons(char character) {
        this.character = character;
    }

    @Override
    public String key() {
        return name().replace('_', '-');
    }

    @Override
    public char character() {
        return character;
    }
}