Iconfont
1捎琐、寫在前面的話：
大家一般在使用圖片資源的時(shí)候，會(huì)放在mipmap/drawable文件夾種否彩。這樣呢，為了適配大部分手機(jī)嗦随，我們要分別放幾套圖進(jìn)去胳搞，造成我們開發(fā)包的體積會(huì)變大。同時(shí)呢称杨，發(fā)現(xiàn)有一些UI工程師在設(shè)計(jì)圖片的時(shí)候肌毅，會(huì)去阿里矢量圖上找一些資源。這時(shí)候姑原，如果是網(wǎng)上有的資源悬而，那我們就不用UI工程師去做一遍了，我們自己來搞定锭汛。嗯嗯笨奠，下邊來看看怎么實(shí)現(xiàn)吧。
2唤殴、效果圖來了：
效果圖
3般婆、具體實(shí)現(xiàn)：
這里我們使用github上的一個(gè)開源庫(kù)android-iconify
3.1、添加依賴：
這里在使用中大家可以選擇一些來添加朵逝，視情況而定
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)
3.2蔚袍、application初始化：
@Override
public void onCreate() {
super.onCreate();
Iconify
.with(new FontAwesomeModule())
.with(new EntypoModule())
.with(new TypiconsModule())
.with(new MaterialModule())
.with(new MaterialCommunityModule())
.with(new MeteoconsModule())
.with(new WeathericonsModule())
.with(new SimpleLineIconsModule())
.with(new IoniconsModule())
.with(new TestFontModule());//自定義字體圖標(biāo)
}
3.3、xml：
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome {fa-smile-o} {fa-hand-peace-o} !"
android:textColor="#2A9BDA"
android:textSize="30sp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" {fa-hand-rock-o} " />
按照上述步驟就能實(shí)現(xiàn)了一個(gè)圖片的顯示配名，至于“{faxxxx}”是哪里來的啤咽，這里我們需要去Font Awesom網(wǎng)站
然后我們打開一個(gè)圖標(biāo)，就會(huì)發(fā)現(xiàn)里邊有類似fa-XX渠脉，然后復(fù)制到xml文件中就可以了宇整。
3.4、使用Iconfont圖標(biāo)：
購(gòu)物車
我們要先把圖標(biāo)放進(jìn)購(gòu)物車芋膘，然后下載代碼鳞青，然后會(huì)看到一個(gè)如下的文件
download
然后我們把里邊的iconfont.ttf放在main下的assets文件夾下.
然后創(chuàng)建一個(gè)枚舉類TestIcons,代碼如下：
package com.li.xiaomi.testfontapp.font;
import com.joanzapata.iconify.Icon;
/**
* 作者：dell or Xiaomi Li
* 時(shí)間： 2018/3/9
* 內(nèi)容：自定義字體圖片庫(kù)
* 最后修改：
*/
public enum TestIcons implements Icon {
icon_setting('\ue61b'),
icon_xiangjiaosuliao('\ue643'),
icon_indemnity('\ue687'),
icon_return('\ue688'),
icon_brain('\ue79f');
private char character;
TestIcons(char character) {
this.character = character;
}
@Override
public String key() {
return name().replace('_', '-');
}
@Override
public char character() {
return character;
}
}
然后創(chuàng)建一個(gè)TestFontModule.class
package com.li.xiaomi.testfontapp.font;
import com.joanzapata.iconify.Icon;
import com.joanzapata.iconify.IconFontDescriptor;
/**
* 作者：dell or Xiaomi Li
* 時(shí)間： 2018/3/9
* 內(nèi)容：
* 最后修改：
*/
public class TestFontModule implements IconFontDescriptor {
@Override
public String ttfFileName() {
//填寫ttf的文件名稱
return "iconfont.ttf";
}
@Override
public Icon[] characters() {
return TestIcons.values();
}
}
我們先看TestIcons類，里邊的枚舉類型为朋，是在demo_unicode.html文件中查看的
demo_unicode.html[圖片上傳中...(4.png-afe0cf-1520585958400-0)]
demo_unicode.html
我們把“”這個(gè)代碼放進(jìn)TestIcons類中臂拓，并且吧“&#x”用“\u”替換。同時(shí)潜腻，在Application中添加TestFontModule 的初始化方法埃儿。
3.5、然后我們看完成的xml文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.li.xiaomi.testfontapp.ui.MainActivity">
<com.joanzapata.iconify.widget.IconButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="{icon-setting}" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="{icon-xiangjiaosuliao}"
android:textSize="50dp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="{icon-indemnity}"
android:textSize="50dp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome {fa-smile-o} {fa-hand-peace-o} !"
android:textColor="#2A9BDA"
android:textSize="30sp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="{fa-thumbs-up}" />
</LinearLayout>
4融涣、結(jié)束語：
到這里就結(jié)束了童番，Demo地址
