Android使用Font Awesome

Android传统的显示图标方式

在平常的开发中,如果我们需要在界面上显示某个小图标,比如搜索按钮,返回按钮,这时我们需要美工给我们切对应的png图片,并放进对应的drawable文件夹中,这样随着图标的越来越多,APK体积也会越来越大。

什么是Font Awesome

Font Awesome是一个专为Bootstrap设计的字体文件,我们可以通过向显示字体一样方便的显示我们想要显示的图标。对于Android,Font Awesome使用TextView显示小图标,而且无需使用png图片,只需使用一个ttf文件,并且在这些字体中的图片都是矢量图,是可以放大和缩小的,这就意味着每个图标都能在所有大小的屏幕上完美呈现。

Font Awesome的优点和缺点

优点:只需使用一个ttf文件,无需美工切png图,大大减小了apk体积,并且可以自己设置颜色,大小。Font Awesome使用TextView显示图标,可以像设置字体颜色和大小一样,设置这个图标,可以起到很好的适配作用。

缺点:图标有限,很难满足所有的需求,但是可以结合传统的切图方式。

Font Awesome的使用方法

(1)下载Font Awesome,网址:http://www.fontawesome.com.cn/ ,直接下载解压,找到fontawesome-webfont.ttf

(2)把下载后的fontawesome-webfont.ttf放到assets文件夹中,如放在assets/fonts文件夹下

(3)编写fonts.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<string name="fa_home" tools:ignore="MissingTranslation">&#xf015;</string>
<string name="fa_android" tools:ignore="MissingTranslation">&#xf17b;</string>
<string name="fa_cubes" tools:ignore="MissingTranslation">&#xf1b3;</string>
<string name="fa_user" tools:ignore="MissingTranslation">&#xf007;</string>
</resources>

对应图片的代码参考:http://www.fontawesome.com.cn/cheatsheet/

(4)布局文件引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<TextView
android:id="@+id/tv_icon_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/fa_home"
android:textColor="@color/light_blue"
android:textSize="100sp"
/>
<TextView
android:id="@+id/tv_icon_android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/fa_android"
android:textColor="@color/gray_999"
android:textSize="100sp"
/>

(5)代码实现

1
2
3
Typeface typeface = Typeface.createFromAsset(context.getAssets(), "fonts/fontawesome-webfont.ttf");
tvIconHome.setTypeface(typeface);
tvIconAndroid.setTypeface(typeface);

自定义TextView组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class IconTextView extends TextView {
public IconTextView(Context context) {
super(context);
this.init(context, null);
}

public IconTextView(Context context, AttributeSet attrs) {
super(context, attrs);
this.init(context, attrs);
}

public IconTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.init(context, attrs);
}

private void init(Context context, AttributeSet attrs) {
Typeface typeface = Typeface.createFromAsset(context.getAssets(), "fonts/fontawesome-webfont.ttf");
setTypeface(typeface);
}
}
1
2
3
4
5
6
7
8
<cc.androidx.widget.fontawesome.IconTextView
android:id="@+id/iv_tab_home"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_centerHorizontal="true"
android:text="@string/fa_home"
android:textSize="24sp"
/>

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :