苹果开发之Swift字体图标的使用及样例(使用Font Awesome字体库,非图片)

一,什么是字体图标

(1)现在比较流行使用字体图标,所谓字体图标其实就是一个包含许多图标的字体库。同我们常用的字体一样,这个也可以理解为一种特殊字体,只不过里面包含的都是图标。

(2)既然是字体,那么最方便的就是可以随意在代码中更改颜色和大小而不会失真。这样不需要因为要适配各种尺寸而制作多个图片,或者做多套颜色的图标用来标识不同状态。

(3)无论是按钮图标还是导航栏图标,也不管是网站开发还是移动应用开发,字体图标都能适用。

(比如下面几个就可以使用字体图标实现,像 hangge.com 右侧导航栏上的小图标用的也是字体图标)

 

二,Font Awesome 图标字体库

Font Awesome 是一套目前最受欢迎最全面的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标和社交网络图标、Web 应用程序图标和编辑器图标等等。

 

网站地址:官网地址  GitHub地址

主要特色如下:

✓ 一种字体,包含605个图标(截至4.5.0版本);

✓ 纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果;

✓ 无限缩放,矢量图标在任何尺寸下都一模一样;

✓ 免费使用,包括商业和非商业项目;

✓ 支持 Internet Explorer 7 浏览器;

✓ 能够在 Retina 屏幕完美呈现;

✓ 简单,易用;

✓ 对设计师友好,设计师能够轻松使用;

✓ 和其它图标字体不同,兼容屏幕阅读器;

下面只是字体库中一小部分图标(点击此处查看全部):

三,Swift中Font Awesome的使用配置

(1)首先将字体库 FontAwesome.ttf 添加到项目中(如果不叫这个名字改成这个名字,下面会解释原因)

(2)“项目”->“Build Phases”->“Copy Bundle Resources”中把 FontAwesome.ttf 加进来。

(3)下载一个Font Awesome的Swift封装库,方便我们使用Font Awesome。GitHub地址:Font-Awesome-Swift

然后将 FAIcon.swift 添加到项目中即可(其默认调用的字体文件名叫FontAwesome.ttf,也可将其改成其他的)。

 

四,Swift中Font Awesome的使用样例
由于 FAIcon.swift 定义了个枚举类(FAType)把描述文字和字符编码都对应起来,同时对常用的UI组件(比如UITabBarItem,UIButton,UILabel,UIImageView,UITabBarItem,UISegmentedControl,UIImage)进行了扩展。所以,我们可以很方便地使用Font Awesome字体库。

 

1,UIImageView上使用文字图标

可以选择是否需要背景色(左图背景透明,右图有灰色背景)

imageView1.setFAIconWithName(FAType.FATwitter, textColor: UIColor.blueColor())
 
imageView2.setFAIconWithName(FAType.FATwitter, textColor: UIColor.blueColor(),
    backgroundColor: UIColor.grayColor())

2,UILabel上使用文字图标

(1)可以直接使用图标(支持设置图标大小)

//直接使用图标
label1.FAIcon = FAType.FAGithub
//直接使用图标并设置图标大小
label2.setFAIcon(FAType.FAGithub, iconSize: 35)
(2)支持图文混排(同时图标大小可以单独设置,和文字大小不一样)

label1.setFAText(prefixText: "欢迎关注我的微博 ", icon: FAType.FAWeibo,
    postfixText: ". 谢谢!", size: 20)
 
// 使用大图标
label2.setFAText(prefixText: "欢迎关注我的微博 ", icon: FAType.FAWeibo,
    postfixText: ". 谢谢!", size: 20, iconSize: 30)
(3)文字和图标颜色也是可以改变的

label2.textColor = UIColor.blueColor()

3,UIButton上使用文字图标

(1)可以单独使用图标(支持设置图标大小)

button1.setFAIcon(FAType.FAPlay, forState: .Normal)
 
// 设置图标大小
button2.setFAIcon(FAType.FAPlay, iconSize: 35, forState: .Normal)
(2)支持同时有文字和图标的按钮(图标大小可以单独设置,和文字大小不一样)

button1.setFAText(prefixText: "", icon: FAType.FASearch, postfixText: " 查询",
    size: 20, forState: .Normal)
 
// 大图标按钮
button2.setFAText(prefixText: "点击 ", icon: FAType.FASearch, postfixText: " 查询",
    size: 20, forState: .Normal, iconSize: 30)
(3)改变按钮颜色

button2.titleLabel?.textColor = UIColor.orangeColor()

4,UIBarButtonItem上使用文字图标

其用法和UIButton一样,具体可参考UIButton的文字图标使用。

5,UISegmentedControl上使用文字图标

segmentedControl.setFAIcon(FAType.FAPhone, forSegmentAtIndex: 0)
segmentedControl.setFAIcon(FAType.FAComment, forSegmentAtIndex: 1)
segmentedControl.setFAIcon(FAType.FAEnvelope, forSegmentAtIndex: 2)

6,UITabbarItem上使用文字图标

tabBarController?.tabBar.items?.first?.setFAIcon(FAType.FATwitter)
tabBarController?.tabBar.items![1].setFAIcon(FAType.FAWeixin)
tabBarController?.tabBar.items![2].setFAIcon(FAType.FAQq)

7,UISlider上使用文字图标

slider1.setFAMinimumValueImage(.FABellSlashO)
slider1.setFAMaximumValueImage(.FABellO)
 
// 使用大图标
slider2.setFAMinimumValueImage(.FABellSlashO, customSize:  CGSizeMake(35, 35))
slider2.setFAMaximumValueImage(.FABellO, customSize:  CGSizeMake(35, 35))

时间: 2024-10-24 21:17:31

苹果开发之Swift字体图标的使用及样例(使用Font Awesome字体库,非图片)的相关文章

CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)例子

下面是几个带图标的常用组件样例(带图标的按钮,toolBar,还有带图标的帐户密码输入框组件),其中图标使用的是 Font Awesome 字体图标.Font Awesome字体图标的用法可以查看我前面写的文章:CSS3 - 在html页面中使用Font Awesome字体图标 <!doctype html> <html lang="en">     <head>     <title>hangge.com</title>  

ios开发之Swift标签栏按钮UITabBarItem样式修改(图标文字尺寸,颜色等)

1,tabBarItem图片的推荐尺寸和最大支持尺寸 下面是标签栏(UITabBar)中tab按钮图标分别在1x.2x.3x下不会压缩变形的尺寸: @1x : 推荐 25 x 25   (最大: 48 x 32) @2x : 推荐 50 x 50   (最大: 96 x 64) @3x : 推荐 75 x 75   (最大: 144 x 96)   下面是在2x下,左边使用50 x 50的图片,右边使用64 x 64的图片,大家可以比较下:   开发之Swift标签栏按钮UITabBarItem

ios开发之Swift使用AirPrint进行打印

使用 AirPrint 可以轻松地从 iOS 和 OS X app 中传输无损照片和文稿打印.当然,打印机也要支持AirPrint 技术才行.下面通过样例演示如何在App中使用 Airprint进行打印.    1,打印机模拟器(Printer Simulator)下载 如果没有支持AirPrint的打印机也没关系,苹果提供了个虚拟打印机,地址:https://developer.apple.com/downloads (1)下载里面的 Hardware IO Tools 开发之Swift使用A

ios开发之Swift使用CIFilter生成二维码图片(QRCode)

CIFilter提供了各种各样的滤镜,其中CIQRCodeGenerator可以用来生成二维码.下面通过一个样例演示如何将字符串(链接也是字符串)生成二维码图片,同时支持在二维码中间放置个性化图标.   效果图如下: 开发之Swift使用CIFilter生成二维码图片(QRCode)-php qrcode生成二维码">    代码如下 复制代码 import UIKit   class ViewController: UIViewController {       override fu

ios开发之Swift实现的登录界面(带猫头鹰动画效果)

这个是一个可爱的登录框页面,动画效果仿自国外网站readme.io.在GitHub上有人写了个objective-C版本,这里我翻译成Swift版的分享给大家.   效果图如下: (1)当输入用户名时,猫头鹰的手是搭在登录框上 (2)当输入密码时,猫头鹰的手会遮住眼睛.这个是有动画效果的.实现方式其实就是图片移动动画. (3)离开密码框时,猫头鹰手又会放下. 开发之Swift实现的登录界面(带猫头鹰动画效果)-猫头鹰动画片">     动态效果如下: import UIKit   clas

ios开发之Swift UIPasteboard剪贴板的使用详解(复制、粘贴文字和图片)

UITextField.UITextView组件系统原生就支持文字的复制,但有时我们需要让其他的一些组件也能实现复制功能,比如点击复制UILabel上的文字.UIImageView中的图片.UITableView里单元格的内容.或者点击按钮把文字或图片自动复制到粘贴板中等等. 这些我们借助 UIPasteboard 就可以实现. 一,将内容写入到剪贴板中 1,复制字符串 UIPasteboard.generalPasteboard().string = "欢迎访问 hangge.com"

ios开发之Swift二维码QRCode的读取(从图片读取 ,或通过摄像头扫描)

1,直接读取图片中的二维码 使用 CIDetector 可以很方便的检测并读取二维码.下面是一个从 UIImage 中读取二维码的样例,我们要把图片上所有的二维码信息都打印出来. 开发之Swift二维码QRCode的读取(从图片读取 ,或通过摄像头扫描)-qrcode 读取二维码">    代码如下 复制代码 import UIKit   class ViewController: UIViewController {       override func viewDidLoad() {

ios开发之Swift - 点击状态栏使tableView返回顶部(附:状态栏点击事件响应)

1,当页面上只有一个scrollView,点击状态栏scrollView会自动滚动到顶部   比如页面上只有一个表格(UITableView),当点击顶部状态条后,表格会像QQ.微信联系人列表那样回到最上面.   这个是iOS系统默认就有的.   开发之Swift - 点击状态栏使tableView返回顶部(附:状态栏点击事件响应)-swift ios开发教程"> 2,当页面上有多个scrollView,点击状态栏时,视图都不会滚动 这时我们需要把不需要滚动的 scrollView 的 s

ios开发之Swift使用AVFoundation实现条形码扫描(附:拉近镜头改善读取)

1,条形码(一维码)的扫描读取 原来写过一篇文章,介绍如何使用摄像头扫描读取二维码:Swift - 二维码QRCode的读取(从图片读取 ,或通过摄像头扫描)要通过摄像头读取条形码,只需要将原来二维码读取代码中 metadataObjectTypes 做如下修改即可: self.output.metadataObjectTypes = [AVMetadataObjectTypeEAN13Code,         AVMetadataObjectTypeEAN8Code, AVMetadataO