android使用font awesome替代简单的图标
2015-06-23 22:55
483 查看
在android开发中,往往会有大量的小图标,可是android界面与html是不同的,比如html中,可以将大量的小图标***成雪碧图,这样会大量的减少http的请求次数,对于性能也是有很大的提升,而在android中,一般对于na本身tive app的小图标一般是用来做显示用的,都会内嵌到 应用 ,两者也没有什么可比性,不过如果android应用中有大量的小图标,无形中就增加了apk的文件大小,这个时候就到了font awesome出场了。
这里每一个string中的值就是需要显示的图标对应的值,name的值可以随便给一个,不过一般都是一个有意义的名称。
可以发现,这里我们可以自定义该图标的颜色和大小,这样在不同的屏幕适配也是极好的,很方便。
然后只需要为每一个textView setTypeface(font)即可。
显示效果如下:
虽然font awesome有诸多优点,但是还是不得不提其图标数量还是那么的有限,我们很难找到从其身上所有的需要的图标。全当一个了解吧,这也是其还没有在本地应用流行起来的原因吧,不过对于web app这是一个很好的创新,尤其是使用bootstrap编写出来的web页面,同样可以在手机的浏览器上访问。这种自适应的布局,真正达到了pc和手机同时可以访问的目的。
源码下载
什么是font awesome
font awesome是一个专为Bootstrap设计的字体文件,我们可以通过向显示字体一样方便的显示我们想要显示的图标文件。对于android来讲,可以使用字体来代替部分需要显示的小图片,并且在这些字体中的图片都是矢量图,是可以放大和缩小的,这就意味着每个图标都能在所有大小的屏幕上完美呈现。好了,废话不多说,直接进入正题吧。在android上使用font awesome
1.下载font awesome
下载地址2.解压下载的压缩包
将fonts目录下的fontawesome-webfont.ttf文件拷贝到asset文件夹下3.编写string.xml
首先需要编写string.xml文件,需要去http://fortawesome.github.io/Font-Awesome/cheatsheet/连接下寻找自己想要的字体图标对应的字符串。<string name="heard"></string> <string name="fa_google_plus"></string> <string name="fa_save"></string> <string name="fa_thumbs_o_up"></string> <string name="fa_toggle_on"></string>
这里每一个string中的值就是需要显示的图标对应的值,name的值可以随便给一个,不过一般都是一个有意义的名称。
4.编写布局
在textview中使用该字符串,就可以显示其对应的图标了,这里就替换了之前使用imageview来显示小图标了。方便了很多。<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center_horizontal" android:padding="50dp" tools:context=".MainActivity" > <TextView android:id="@+id/test_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/heard" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#Ff9834" android:textSize="30sp" /> <TextView android:id="@+id/fa_google_plus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fa_google_plus" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#87619a" android:textSize="50sp" /> <TextView android:id="@+id/fa_thumbs_o_up" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fa_thumbs_o_up" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#976523" android:textSize="60sp" /> <TextView android:id="@+id/fa_save" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fa_save" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#954278" android:textSize="40sp" /> <TextView android:id="@+id/fa_toggle_on" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fa_toggle_on" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#273896" android:textSize="50sp" /> </LinearLayout>
可以发现,这里我们可以自定义该图标的颜色和大小,这样在不同的屏幕适配也是极好的,很方便。
5.代码中引用
首先找到asset下对应的.ttf文件Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
然后只需要为每一个textView setTypeface(font)即可。
((TextView)findViewById(R.id.fa_google_plus)).setTypeface(font);
显示效果如下:
虽然font awesome有诸多优点,但是还是不得不提其图标数量还是那么的有限,我们很难找到从其身上所有的需要的图标。全当一个了解吧,这也是其还没有在本地应用流行起来的原因吧,不过对于web app这是一个很好的创新,尤其是使用bootstrap编写出来的web页面,同样可以在手机的浏览器上访问。这种自适应的布局,真正达到了pc和手机同时可以访问的目的。
源码下载
相关文章推荐
- 怎么修改Android中xml文件的布局
- Android APK反编译 最新版 解决Could not decode arsc file
- android图片处理方法
- android:R.string.xx 转为字符型
- Android中List循环遍历性能对比
- 运行android项目时提示:android library projects cannot be launched
- Android关于EditText和WindowManager的一些知识
- Android客户端与服务器端交互方式总结
- Android-SD卡的读写
- 安装Android时 sdk manager解决方案
- ubuntu 14.10 安装android NDK
- Google《Android性能优化》学习笔记
- Android Looper.class
- Android开发之Intent
- Android模拟多线程的断点下载
- Android通讯录数据库介绍与基本操作(增删改查)
- android的布局xml文件如何添加注释?
- Android开发:GridView与ListView相互切换(动画效果)
- Android中Fragment的知识
- Android OpenGL ES(三)----编程框架