如何在安卓app中使用FontAwesome图标
2015-10-15 17:54
330 查看
源自外国友人博客:http://tutsplus.com/authors/gianluca-segato
这篇教程中,我将向你演示如何在安卓项目中使用 FontAwesome 图标集合。FontAwesome 可以节省许多时间,原因如下:
首先,你不需要担心不同手机上的屏幕分辨率问题。如果你使用png图片,你需要在包里面对每个图标至少包含四种不同的版本。不仅如此,在某些超清屏幕上,你的图标可能会出现颗粒感。这显然是要避免的。但如果使用FontAwesome,你只需包含一个"TTF”文件。
其次,你可以依赖于当今最丰富的免费图标集之一。而且因为其在web上被广泛的使用,现在用户已经习惯了FontAwesome的风格。你不必再浪费时间去寻找漂亮的丰富的可以免费商用的图标集合,我并不是说不存在这样的图标集,因为确实存在,但是非常稀少。
我们先花点时间来了解一下FontAwesome 的工作原理。FontAwesome 图标集背后的思想非常简单,图标被视为字符(character)。你可以能已经注意到一些奇怪的字符被作为文本对待,你可以轻易的拷贝 β 字符或者 ∑ 字符。你甚至可以在普通的文本编辑框中这样做。还可以改变它们的大小和颜色。这是因为浏览器 - 以及文本编辑框 - 把这些字符视为文本。
FontAwesome 通过包含广泛的图标扩展了这一概念。你可以把它比喻成用图标指定的不能打出的Unicode字符。
FontAwesome
看一眼 FontAwesome's cheatsheet 就知道我在说什么了。你选择列表中的一个图标,记下它的Unicode的字符,在TextView中使用它告诉安卓使用FontAwesome字体来渲染。
让我们来看一个例子。下载和导入FontAwesome 的TrueType 文件到项目。你可以从 GitHub上下载FontAwesome 的assets。
当你下载了FontAwesome之后,你会发现里面包含了一些文件和文件夹。大部分都是对web项目有用的。我们只对位于fonts目录的 fontawesome-webfont.ttf感兴趣。
在你的安卓项目中,导航到 app > src > main。 main 目录应该包含了一个叫 assets的文件夹。如果没有就创建一个。在assets 文件夹中创建另一个fonts文件夹,并把fontawesome-webfont.ttf 添加到这个文件夹。
主义 fonts 文件夹并不是必须的。你可以直接把FontAwesome
的字体文件放在 assets 目录,但是把相同类型的文件放在专门的目录里面比较方便。只要FontAwesome 字体在assets 或者子目录之下就行。
现在你已经成功的把FontAwesome 字体文件包含在了自己的安卓项目里,是时候使用它了。我们会创建一个帮助类来让事情变得简单点。这个类要使用到android.graphics.Typeface。Typeface类指定typeface
以及一个字体的特征。它用于指明text在绘制(以及测量)的时候该如何显示。
创建一个新的名叫FontManager的java类:
如果你想在项目中使用其他的字体,把字体放在helper 类里面就可以了。类似于:
我们需要做的就这么多,但是我们可以做的更好。使用上面的方法的话,我们需要为每个想当成图标来使用的TextView创建一个变量。但作为一个程序员,我们都很懒,对吧?
图标一般都是包含在一个ViewGroup,比如一个RelativeLayout或者LinearLayout中。我们可以写一个方法,爬遍指定xml parent 并且递归的覆盖每个TextView的字体。
假设你的布局文件是这样的:
要把这三个TextView标记为图标,我们重写onCreate方法,并添加如下代码片段:
现在轮到有意思的部分了。访问 FontAwesome的GitHub页面 并浏览所给的图标。选择三个你喜欢的。我准备选择三个chart图标,分别是 area
chart icon, pie chart icon, 以及 line
chart icon。
在你的项目中,进入 values 文件夹并创建一个新的文件:icons.xml。这个文件将被作为字典使用,它将把Unicode
字符和相应的图标用可读的名字匹配起来。这意味着我们需要为每个图标创建一个入口。
你可以在FontAwesome cheatsheet或者图标的 详情页面 找到你感兴趣图标的代码。
下一步就是在布局的TextView里面引用这些字符串。这是最终的样子:
如果你打开Android Studio的布局编辑器,你会看到它无法渲染这些图标。这是不正常的。编译并启动应用,你又会发现图标是正常渲染了的。
看起啦很小是吧?改变图标的大小很简单,你只需改变textSize属性就是了。改变图标的颜色也一样简单,编辑textColor属性就是了。
就如你看见的,这些图标明亮鲜明。这是因为FontAwesome 在运行时渲染。它们是矢量图标 而不是栅格图标。
在这篇文章中,我演示了如何在一个安卓项目中使用FontAwesome 图标集。FontAwesome 广为所知且免费。即使在超清屏幕上,显示结果也很明快。改变颜色和大小都跟改变属性一样简单。
这篇教程中,我将向你演示如何在安卓项目中使用 FontAwesome 图标集合。FontAwesome 可以节省许多时间,原因如下:
首先,你不需要担心不同手机上的屏幕分辨率问题。如果你使用png图片,你需要在包里面对每个图标至少包含四种不同的版本。不仅如此,在某些超清屏幕上,你的图标可能会出现颗粒感。这显然是要避免的。但如果使用FontAwesome,你只需包含一个"TTF”文件。
其次,你可以依赖于当今最丰富的免费图标集之一。而且因为其在web上被广泛的使用,现在用户已经习惯了FontAwesome的风格。你不必再浪费时间去寻找漂亮的丰富的可以免费商用的图标集合,我并不是说不存在这样的图标集,因为确实存在,但是非常稀少。
1. FontAwesome 的工作原理
我们先花点时间来了解一下FontAwesome 的工作原理。FontAwesome 图标集背后的思想非常简单,图标被视为字符(character)。你可以能已经注意到一些奇怪的字符被作为文本对待,你可以轻易的拷贝 β 字符或者 ∑ 字符。你甚至可以在普通的文本编辑框中这样做。还可以改变它们的大小和颜色。这是因为浏览器 - 以及文本编辑框 - 把这些字符视为文本。FontAwesome 通过包含广泛的图标扩展了这一概念。你可以把它比喻成用图标指定的不能打出的Unicode字符。
FontAwesome
看一眼 FontAwesome's cheatsheet 就知道我在说什么了。你选择列表中的一个图标,记下它的Unicode的字符,在TextView中使用它告诉安卓使用FontAwesome字体来渲染。
2. 导入字体文件
让我们来看一个例子。下载和导入FontAwesome 的TrueType 文件到项目。你可以从 GitHub上下载FontAwesome 的assets。当你下载了FontAwesome之后,你会发现里面包含了一些文件和文件夹。大部分都是对web项目有用的。我们只对位于fonts目录的 fontawesome-webfont.ttf感兴趣。
在你的安卓项目中,导航到 app > src > main。 main 目录应该包含了一个叫 assets的文件夹。如果没有就创建一个。在assets 文件夹中创建另一个fonts文件夹,并把fontawesome-webfont.ttf 添加到这个文件夹。
主义 fonts 文件夹并不是必须的。你可以直接把FontAwesome
的字体文件放在 assets 目录,但是把相同类型的文件放在专门的目录里面比较方便。只要FontAwesome 字体在assets 或者子目录之下就行。
3. 创建一个帮助类
现在你已经成功的把FontAwesome 字体文件包含在了自己的安卓项目里,是时候使用它了。我们会创建一个帮助类来让事情变得简单点。这个类要使用到android.graphics.Typeface。Typeface类指定typeface以及一个字体的特征。它用于指明text在绘制(以及测量)的时候该如何显示。
创建一个新的名叫FontManager的java类:
图标一般都是包含在一个ViewGroup,比如一个RelativeLayout或者LinearLayout中。我们可以写一个方法,爬遍指定xml parent 并且递归的覆盖每个TextView的字体。
4. 使用你想要的图标
现在轮到有意思的部分了。访问 FontAwesome的GitHub页面 并浏览所给的图标。选择三个你喜欢的。我准备选择三个chart图标,分别是 areachart icon, pie chart icon, 以及 line
chart icon。
在你的项目中,进入 values 文件夹并创建一个新的文件:icons.xml。这个文件将被作为字典使用,它将把Unicode
字符和相应的图标用可读的名字匹配起来。这意味着我们需要为每个图标创建一个入口。
下一步就是在布局的TextView里面引用这些字符串。这是最终的样子:
看起啦很小是吧?改变图标的大小很简单,你只需改变textSize属性就是了。改变图标的颜色也一样简单,编辑textColor属性就是了。
就如你看见的,这些图标明亮鲜明。这是因为FontAwesome 在运行时渲染。它们是矢量图标 而不是栅格图标。
总结
在这篇文章中,我演示了如何在一个安卓项目中使用FontAwesome 图标集。FontAwesome 广为所知且免费。即使在超清屏幕上,显示结果也很明快。改变颜色和大小都跟改变属性一样简单。
相关文章推荐
- android开发配置代理更新SDK
- Mac自带svn,Versions,Cornerstone初识
- iOS开发005 OpenCV--基于模板图片的标记识别
- Android WebView不能执行Ajax的解决办法
- Unity 游戏中的 X-Ray
- Android下setLatestEventInfo警告、Handler警告、SimpleDateFormat警告
- android bitmap compress
- iOS项目上传到AppStore步骤流程
- 高质量 Android 开发框架 LoonAndroid 详解
- Android中的onActivityResult和setResult方法的使用
- Objective-C开发-Foundation框架
- sharepoint 使用Office Web Apps 查看或编辑office文档时页面出现:“抱歉,出现了问题”错误
- iOS-UIKit(UIWebView.h--解读)
- 在android的service中启动一个通知,点击通知无法启动activity,报一个SecurityException异常
- Android Studio代码着色插件
- Android 启动白屏或者黑屏闪现解决
- Android笔记(三十七) 如何停止AsyncTask?
- android风格统一化修改上方标题栏颜色
- iOS常用的几个动画
- APP信息获取接口