Android 如何应用ttf图标字体库

作为一个Android开发者,自己想做一个app练手,有个比较头疼的问题就是没有UI图标资源~~ 其实很容易搞定的,下面就来聊聊如何在Android中应用图标字体库,找图标不再纠结!
这里写图片描述

图标库传送门:https://icomoon.io/app/#/select

1、点击左上角菜单 -> Manager Projects 进入管理页面。
这里写图片描述

2、点击New Project, 创建一个工程,如First App并点击Load>
这里写图片描述

3、点击Add Icon From Libray,去选择自己喜欢的Library,点击+Add添加到工程里面。Library有收费的,也有免费的,视情况而定。
这里写图片描述

这里写图片描述

4、转到资源页面。选择自己想要下载的图标,怎么都是灰色的?安啦,后面有惊喜!
这里写图片描述

5、点击右下角Generate Font,生成ttf字体库。
这里写图片描述

上面四个图标就是我前面选中的,下面的诸如e911文字就是图标对应的unicode符号,中文字体也是这么一个道理。点击download下载字体库。
这里写图片描述

6、下载完成,解压。拷贝fonts/icomoon.ttfandroid-assets/fonts 下面。
这里写图片描述

7、应用字体。首先建一个字体“映射”类,反正官方不太推荐用枚举方式,暂且就用注解吧~~ 打开刚才解压包里面的demo.html,对应来创建字体映射。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import android.support.annotation.StringDef;
/**
* @author yuyh.
* @date 2016/11/10.
*/
@StringDef({
MDFonts.HOME,
MDFonts.NEWSPAPER,
MDFonts.MUSIC,
MDFonts.PLAY
})
public @interface MDFonts {
String HOME = "\ue902";
String NEWSPAPER = "\ue904";
String MUSIC = "\ue911";
String PLAY = "\ue912";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import android.content.Context;
import android.graphics.Typeface;
import android.widget.TextView;
/**
* @author yuyh.
* @date 2016/11/10.
*/
public class MDFontsUtils {
public static Typeface OCTICONS;
/**
* Get octicons typeface
*
* @param context
* @return octicons typeface
*/
public static Typeface getOcticons(final Context context) {
if (OCTICONS == null)
OCTICONS = getTypeface(context, "fonts/icomoon.ttf");
return OCTICONS;
}
/**
* Set octicons typeface on given text view(s)
*
* @param textViews
*/
public static void setOcticons(final TextView... textViews) {
if (textViews == null || textViews.length == 0)
return;
Typeface typeface = getOcticons(textViews[0].getContext());
for (TextView textView : textViews)
textView.setTypeface(typeface);
}
/**
* Get typeface with name
*
* @param context
* @param name
* @return typeface
*/
public static Typeface getTypeface(final Context context, final String name) {
return Typeface.createFromAsset(context.getAssets(), name);
}
}

9、图标对应是用TextView表示,而不是ImageView。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<TextView
android:id="@+id/tvMusic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:textSize="16dp" />
<TextView
android:id="@+id/tvHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:textSize="16dp" />

在Java中应用字体。如下:

1
2
3
4
5
6
7
8
tvMusic = (TextView) findViewById(R.id.tvMusic);
tvMusic.setText(MDFonts.MUSIC);
tvHome = (TextView) findViewById(R.id.tvHome);
tvHome.setText(MDFonts.HOME);
// 应用字体
MDFontsUtils.setOcticons(tvMusic, tvHome);

run起来,大功告成!
这里写图片描述

10、你会发现,run起来图标颜色全是Android默认的灰色,那么怎么更改图标颜色呢?刚才说了,图标字体用的是TextView,实际上他跟中文英文字体没什么两样,他本质上还是文字。所以,TextView怎么设置字体大小、字体颜色,这里就对应怎么设置。如下:

1
2
tvHome.setTextColor(Color.RED);
tvHome.setTextSize(50);

这里写图片描述

哈哈,没毛病!

当然,也可以把字体符号配置在string.xml

1
<string name="icon_home" translatable="false">\ue902</string>

1
2
3
4
5
6
7
<TextView
android:id="@+id/tvHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:textSize="16dp"
android:text="@string/icon_home" />
1
2
// 当然,还需要下面这步来应用设置
MDFontsUtils.setOcticons(tvHome);

更多用法大家就自行扩展吧!比如可以自定义一个TextView,直接应用字体,就不需要MDFontsUtils.setOcticons(tvHome); 这步操作了,自己用就可以啦!

感谢阅读!

坚持原创技术分享,您的支持将鼓励我继续创作!