字体图片库集成与封装

简介

今天刚刚学完一个字体图片库的集成和封装，那么字体图片库是什么呢？

字体图片库就是用字体来代替很多图片。安卓开发也知道， 我们很多时候会把本地的图标啊图片放在drawable文件和mipmap文件下的。这样的话会有了一些坏处，就是我们的项目涉及到比较多的这些图片资源的时候，会让我们的项目体积变得很大，还有就是适应很多分辨率适配的时候图片就很难去保证在每一款屏幕上都能正常显示啦。

而！字体就不一样了，他是一个基于SVG的东西，所以他在适应屏幕伸缩的时候就不会想图片一样“失真”。

下面我们就引入一个字体图标库： android-iconify

这个是他的GitHub的项目地址： https://github.com/JoanZapata/android-iconify

那么~下面就开始集成这个库吧！

android-iconify的集成

1·访问 GitHub

2·进入到GitHub后呢，就直接搜索    android-iconify

3·对就是这个！就是他！3.4K个star！！

这个库真的很牛逼，像 fontawesome这个，他几乎涵盖了我们所需要的所有图标的这么一个库，用css样式来映射成我们的字体图标。

说是CSS样式的映射，其实还是ttf的映射。

那我们来集成他吧

4.开始添加依赖

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

其实啊，只要添加两个就足够了

就是这两个

compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2'

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2'

将它们直接copy到项目的build.gradle的dependencies支点中。然后同步一下就OK。

5.封装

public class Configurator {
    //存放配置信息的HashMap
    private static final HashMap<String, Object> LATTE_CONFIGS = new HashMap<>();
    private static final ArrayList<IconFontDescriptor> ICONS = new ArrayList<>();

    //初始化类实例开始时，将CONFIG_READY状态设为false
    private Configurator() {
        LATTE_CONFIGS.put(ConfigType.CONFIG_READY.name(), false);
    }

    //线程安全的懒汉模式，获取单例初始化类的实例
    public static Configurator getInstance() {
        return Holder.INSTANCE;
    }
    //返回配置的HashMap
    final HashMap<String, Object> getLatteConfigs() {
        return LATTE_CONFIGS;
    }

    //静态内部类
    private static class Holder {
        private static final Configurator INSTANCE = new Configurator();
    }
    //最终初始化的动作
    public final void configure() {
        //初始化字体
        initIcons();
        //初始化初始化状态
        LATTE_CONFIGS.put(ConfigType.CONFIG_READY.name(), true);
    }

    //初始化的输入
    public final Configurator withIcon(IconFontDescriptor descriptor) {
        ICONS.add(descriptor);
        return this;
    }
    //初始化的输入
    public final Configurator withApiHost(String host) {
        LATTE_CONFIGS.put(ConfigType.API_HOST.name(), host);
        return this;
    }
    //初始化字体库
    private void initIcons() {
        if (ICONS.size() > 0) {
            final Iconify.IconifyInitializer initializer = Iconify.with(ICONS.get(0));
            for (int i = 0; i < ICONS.size(); i++) {
                initializer.with(ICONS.get(i));
            }
        }
    }
    
    //检查是否初始化完成
    private void checkConfiguration() {
        final boolean isReady = (boolean) LATTE_CONFIGS.get(ConfigType.CONFIG_READY.name());
        if (!isReady) {
            throw new RuntimeException("Configuration is not ready, call configure");
        }
    }

    //输出
    // 获取某一项配置信息
    @SuppressWarnings("unchecked")
    final <T> T getConfiguration(Enum<ConfigType> key) {
        checkConfiguration();
        return (T) LATTE_CONFIGS.get(key.name());
    }
}

然后运用这个初始化

public class ExampleApp extends Application{

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

下面，我们会加入一个阿里巴巴的字体库，百度搜索阿里巴巴矢量图，随便挑两个下载素材

打开下载好的压缩包，将iconfont.ttf放在main包下一个新建好的assets文件下面

接下来创建自己的icon

在压缩包下打开demo_unicode.html文件

可以看到他是使用这串东西来表示这张图片的

创建一个iconmodule

public class FontEcModule implements IconFontDescriptor {
    //这里传入你的ttf文件
    @Override
    public String ttfFileName() {
        return "iconfont.ttf";
    }
    //这里返回一个icon
    @Override
    public Icon[] characters() {
        return EcIcons.values();
    }
}

在创建一个枚举

public enum  EcIcons implements Icon {
    icon_scan('\ue62f'),
    icon_ali_pay('\ue64b');

    //一个返回变量
    private char character;

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

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

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

然后在初始化一下

 Latte.init(this)
                .withApiHost("http://127.0.0.1/")
                .withIcon(new FontAwesomeModule())
                .withIcon(new FontEcModule())//初始化自定义字体库
                .configure();

我们最后来验证一下他，百度搜索font awesome

搜索你想要的icon

直接将这段放到TextView的text属性中即可，像这样

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

就会看到这样，吊炸天了