Ways to Use Icons on Android (2)

宅男潇涧

发布于 2018-08-01 14:54:51

6170

发布于 2018-08-01 14:54:51

文章被收录于专栏：潇涧技术专栏

本节主要介绍几种图标字体的制作方法和Iconify扩展的使用姿势。

本系列文章介绍的内容对应的Github项目地址：IconFontApp

上一节提到，如果项目中很多自定义的图标，或者是各种不同来源的图标，我们可以通过对Iconify进行扩展来实现，但是在扩展之前我们需要制作自己的图标字体文件，那么图标字体文件该如何制作呢？这个可以试试Fontello、Icomoon或者IconFont吧！

(制作图标字体的方法有很多，可以参考这里，本文主要介绍的是如何快速利用已有的图标制作字体文件然后在应用中使用)

1.Fontello: icon font generator

Fontello网址：http://fontello.com/ Github地址：https://github.com/fontello/fontello

Fontello是个图标字体生成器，通过它可以把一些图标作成字体放到自己的项目中。在Fontello主页上可以访问大量专业级的开源图标，并支持添加自定义的图标（SVG格式），而且可以在网站上选择不同来源的图标合并到单个字体文件中。此外，它还可以自定义每个图标的名称以及对应的Unicode码，一切配置好了之后可以将图标字体下载下来放到项目中使用。如下图所示，我添加了两个Custom Icons，从Fontelico中选了6个图标，从Font Awesome中选了3个图标等，最终导出得到的图标字体文件就会包含这些我需要的图标。

自定义图标名称和对应的Unicode：在页面顶部的配置中可以选择设置图标名称的前缀，例如fe-

下载之后得到一个zip文件，解压之后打开demo.html可以看到该图标字体中的所有图标的名称和对应的Unicode

同时，在解压后的font文件夹中有我们需要的ttf字体文件fontello.ttf，下面介绍下详细的扩展实现步骤。

(1)新建一个Android Studio项目，在app中添加对Iconify的依赖

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

(2)新建assets文件夹，并将字体文件fontello.ttf拷贝到文件夹下 (3)新建FontelloModule类，实现IconFontDescriptor接口，内容如下：

public class FontelloModule implements IconFontDescriptor {

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

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

(4)新建FontelloIcons枚举，实现Icon接口，内容如下：

public enum FontelloIcons implements Icon {
    fe_spin1('\uE800'),
    fe_spin2('\uE801'),
    fe_spin3('\uE802'),
    fe_spin4('\uE803'),
    fe_spin5('\uE804'),
    fe_github('\uE816');//注：这里我并没有把所有的图标都加上

    char character;

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

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

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

(5)测试：在activity_main.xml布局文件中添加一个IconTextView

<com.joanzapata.iconify.widget.IconTextView
    android:id="@+id/iconTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:text="{fe-github} {fe-spin1 spin} {fe-spin2 spin} {fe-spin3 spin} {fe-spin4 spin} {fe-spin5 spin}"
    android:textSize="20sp"
    android:textColor="@android:color/black"/>

然后在MainActivity的onCreate方法最后添加初始化操作

Iconify.with(new FontelloModule());

运行应用看到效果见文章末尾的截图，图标可以设置为旋转效果的哟，有点炫啊！

2.IcoMoon

IcoMoon网址：https://icomoon.io/app/ IcoMoon和Fontello一样，既可以添加自己的图标，又可以从其他的图标库中选择图片，而且也支持设置图标的名称和Unicode，最终还能导出得到图标字体文件。IcoMoon导出得到的zip文件和Fontello导出的结果类似，使用它的ttf文件对Iconify进行扩展的方式也一样。

3.IconFont

IconFont网址：http://www.iconfont.cn/ IconFont可是中文的图标字体制作网站哟！该网站是阿里的UED团队做的吧，在该网站可以方便地管理图标和制作图标字体文件。网站的帮助中Android端应用教程介绍了如何使用下载得到的IconFont，这个比较简单。但是，需要注意的是，下载下来的demo.html中看到的图标对应的编码用的是UTF-8表示的，并不是Unicode编码。此外，TextView的setText方法在使用的时候，如果传递的参数是R.string.xxx的形式的话，最终显示的时候对应的字符串会自动转成Unicode编码；但是如果传递的参数是某个字符串的话，该字符串默认会被视为Unicode编码，也就是说如果它原来不是Unicode编码这个时候显示就会出现异常！

看下下面的代码就清楚了，下面显示了4中不同的调用方式，并给出了不同方式下的显示结果