字体图标库的集成与封装

作者: 极客天空 | 来源:发表于2019-04-18 00:59 被阅读0次

Android战纪之字体图标库(iconify)的简单使用
小程序使用字体图标
字体图标库的集成与封装
手把手教你使用字体图标
阿里的字体库—iconfont
相关框架介绍和库地址
字体图标
Vue 引用自定义图标iconfont
字体图标和文字垂直居中
icon渐变色字体图标

字体图标库介绍

优点：

自适应性: 图像清晰可以无限放大而不会失真，模糊
轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。
灵活性：图标字体可以用过font-size属性设置其任何大小，可以将适用于text的属性应用于这些矢量图标上，从而实现改变图标颜色、添加阴影等效果

劣势:

图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用
使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用
创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

字体图标库 android-iconify的介绍

iconify的github地址：https://github.com/JoanZapata/android-iconify
iconify是一个矢量图标库，包含使用 Dave Gandy 制作的超过370中矢量字体图标，可以使Android应用开发者免于制作多种适用于不同屏幕大小尺寸的图片，从而提高开发者工作效率
适用场景

<1>iconify原作者提供了三种他自定义的控件：IconTextView、IconButton、IconToggleButton，可以直接使用这三类控件来显示iconify中提供的字体图标；
<2>在java代码中通过使用一个IconDrawable为具有setIcon（Drawable drawable）方法的控件设置该字体图标
劣势：目前在xml文件中使用图标库中的资源时，需要自己对照查阅不同图标所对应的标记，自己手敲标记，这样不仅麻烦，而且容易出错

字体图标库android-iconify的使用

通过一个小栗子添加一个咖啡小图标来了解具体的使用过程

1.添加依赖

  dependencies {
    compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2' // (v4.5)
    compile 'com.joanzapata.iconify:android-iconify-entypo:2.2.2' // (v3,2015)
    compile 'com.joanzapata.iconify:android-iconify-typicons:2.2.2' // (v2.0.7)
    compile 'com.joanzapata.iconify:android-iconify-material:2.2.2' // (v2.0.0)
    compile 'com.joanzapata.iconify:android-iconify-material-community:2.2.2' // (v1.4.57)
    compile 'com.joanzapata.iconify:android-iconify-meteocons:2.2.2' // (latest)
    compile 'com.joanzapata.iconify:android-iconify-weathericons:2.2.2' // (v2.0)
    compile 'com.joanzapata.iconify:android-iconify-simplelineicons:2.2.2' // (v1.0.0)
    compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2' // (v2.0.1)
}

可以只添加自己需要的某一个或几个库即可

dependencies {
    //字体图标库
    compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2'
    compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2'
}

2.封装集成

在现实的项目中不适合拿官方给出的使用方式直接使用方便后期字体图标库的扩展与更换对其使用进行封装

创建一个枚举类存储全局配置类型

public enum ConfigType {
    API_HOST,
    APPLICATION_CONTEXT,
    CONFIG_READY,
    ICON
}

创建一个单例配置项目所有信息

package com.rrcc.core.app;

import com.joanzapata.iconify.IconFontDescriptor;
import com.joanzapata.iconify.Iconify;

import java.util.ArrayList;
import java.util.HashMap;
/**
 * Created by mac on 2019/4/16.
 */
public class Configurator {
    private static final HashMap<String, Object> LATTE_CONFIG = new HashMap<>();
    private static final ArrayList<IconFontDescriptor> ICONS = new ArrayList<>();

    private Configurator() {
        LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(), false);

    }

   public static Configurator getInstance(){
       return Holder.INSTANCE;
   }

   private static class Holder{
       private static final Configurator INSTANCE = new Configurator();
    }

    public  final void configure(){
        LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(),true);
        initIcons();

    }

    final HashMap<String,Object> getLatteConfigs(){
        return LATTE_CONFIG;
    }


    private void checkConfiguration(){
         final boolean isReady = (boolean)LATTE_CONFIG.get(ConfigType.CONFIG_READY.name());
         if(!isReady){
             throw  new RuntimeException("Config is not ready,call configure");
         }
    }

    public final Configurator withApiHost(String host){
        LATTE_CONFIG.put(ConfigType.API_HOST.name(),host);
        return this;
    }

    /**
     *字体图标库初始化
     */
    public final Configurator withIcon(IconFontDescriptor descriptor) {
        ICONS.add(descriptor);
        return this;
    }

    private void initIcons() {
        if (ICONS.size() > 0) {
            final Iconify.IconifyInitializer initializer = Iconify.with(ICONS.get(0));
            for (int i = 1; i < ICONS.size(); i++) {
                initializer.with(ICONS.get(i));
            }
        }
    }

    @SuppressWarnings("unchecked")
    public final <T> T getConfiguration(Enum<ConfigType> key) {
        checkConfiguration();
        return (T) LATTE_CONFIG.get((ConfigType) key);
    }


}

创建一个final类来操作配置文件的初始化

public final class Latte {


    public static Configurator init(Context context){
        Configurator.getInstance().getLatteConfigs().put(ConfigType.APPLICATION_CONTEXT.name(),context.getApplicationContext());
        return Configurator.getInstance();
    }

    private static HashMap<String,Object> getConfigurations(){
        return Configurator.getInstance().getLatteConfigs();
    }

    public static Context getAppContext(){
        return (Context) Configurator.getInstance().getLatteConfigs().get(ConfigType.APPLICATION_CONTEXT.name());
    }

}

创建Application类初始化配置文件

public class ExampleApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Latte.init(this)
                .withApiHost("https://www.xxxxxx.com/")
                .withIcon(new FontAwesomeModule())
                .configure();

    }
}

3.通过Font Awesome 官方网址查询样式

图片的样式开源通过 Font Awesome 官方网址查询，输入其英文名称即可查到
https://fontawesome.com/icons

查询1.jpeg

查询2.jpeg

4.在布局文件中使用

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.rrcc.latte.MainActivity">

    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_test0"
        android:text="{fa-coffee}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="20dp"
        android:textSize="30sp"
        />
</LinearLayout>


public class MainActivity extends AppCompatActivity {

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

    }
}

5.运行效果

结果.jpeg

阿里矢量图标库的封装使用

地址 https://www.iconfont.cn/
通过搜索关键字段将相应的图标添加到购物车然后下载ttf

下载.jpeg
将ttf文件添加到assets

保存ttff.jpeg
根据 FontAwesomeModule 自定义一 FontEcModule

public class FontEcModule implements IconFontDescriptor {

    @Override
    public String ttfFileName() {
        return "iconfont.ttf";
    }

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

public enum EcIcons implements Icon{
    icon_scan('\ue600'),
    icon_ali_pay('\ue638'),
    icon_payment_code('\ue639');

    private  char character;

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

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

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

初始化将自定义字体添加

public class Configurator {
    private static final HashMap<String, Object> LATTE_CONFIG = new HashMap<>();
    private static final ArrayList<IconFontDescriptor> ICONS = new ArrayList<>();

    private Configurator() {
        LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(), false);

    }

   public static Configurator getInstance(){
       return Holder.INSTANCE;
   }

   private static class Holder{
       private static final Configurator INSTANCE = new Configurator();
    }

    public  final void configure(){
        LATTE_CONFIG.put(ConfigType.CONFIG_READY.name(),true);
        initIcons();
    }

    final HashMap<String,Object> getLatteConfigs(){
        return LATTE_CONFIG;
    }

    /**
     *字体图标库初始化
     */
    public final Configurator withIcon(IconFontDescriptor descriptor) {
        ICONS.add(descriptor);
        return this;
    }

    private void initIcons() {
        if (ICONS.size() > 0) {
            final Iconify.IconifyInitializer initializer = Iconify.with(ICONS.get(0));
            for (int i = 1; i < ICONS.size(); i++) {
                initializer.with(ICONS.get(i));
            }
        }
    }

}


public class ExampleApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Latte.init(this)
                .withApiHost("https://www.baidu.com/")
                .withIcon(new FontAwesomeModule())
                .withIcon(new FontEcModule())
                .configure();

    }
}

在布局中使用

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.rrcc.latte.MainActivity">
   <!--这个是使用iconify-->
    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_test0"
        android:text="{fa-coffee}"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="20dp"
        android:textSize="30sp"
        />
 <!--下面的三个都是使用阿里图库 使用枚举EcIcons类型 将下划线改为中划线-->
    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_test"
        android:text="{icon-scan}"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:textSize="30sp"
        />
    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_test1"
        android:text="{icon-ali-pay}"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:textSize="30sp"
        />
    <com.joanzapata.iconify.widget.IconTextView
        android:id="@+id/icon_test2"
        android:text="{icon-payment-code}"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:textSize="30sp"
        />
</LinearLayout>

altuku.jpeg

Android战纪之字体图标库(iconify)的简单使用
字体图标库(iconify)的简单使用本文介绍字体图标库简单的封装和使用(以集成Fontawesome为例)： ...
小程序使用字体图标
小程序集成字体图标库awesome与阿里iconfont，先看集成结果字体图标集成步聚 1 将字体ttf转化为b...
字体图标库的集成与封装
字体图标库介绍优点：自适应性: 图像清晰可以无限放大而不会失真，模糊轻量性：一个图标字体比一系列的图像（特...
手把手教你使用字体图标
常用字体图标库阿里字体图标库 iconfont fontawesome 字体图标库首先使用阿里的字体图标库上个...
阿里的字体库—iconfont
阿里字体图标库介绍及图标字体的使用方法这篇文章只讲阿里字体图标库的使用，暂不讲图标制作，阿里矢量图标库上的字体图...
相关框架介绍和库地址
相关框架库地址字体图标库android-iconify：「字体图标库android-iconify」(https...
字体图标
常用的字体图标 [阿里字体图标库]http://iconfont.cn/ [Font Awesome]http:/...
Vue 引用自定义图标iconfont
前提准备好自己的字体图标，如果自己没法画出字体图标的（比如我）可以到阿里公开图标库公开图标库下载。以下我们...
字体图标和文字垂直居中
字体图标使用iconfont字体图标库 1. stylus样式 2. html样式
icon渐变色字体图标
使用阿里字体图标库iconfont.cn font class方式应用