1.什么是iconfont
iconfont拆开来看，就是 icon + font，这样估计大家应该都能理解是什么，那两者结合是什么呢？没错！就是 iconfont ！让开发者像使用字体一样使用图标。如果自己不会做的话，可以直接去阿里的iconfont图标库下载自己需要的图标。
2.为什么要使用iconfont
在开发项目时，不可避免的会用到各种图标，为了适配不同的设备，通常需要@2x和@3x两套图，例如说我们tabbar上使用的图标。有些app有换肤的需要，还需要多套不同的图来进行匹配不同的主题。如果使用切图，这对于设计和开发来说无疑是增加了工作量，而且ipa的体积也会增大。
使用iconfont的好处:
1. 减小ipa包的大小
2. 图标保真缩放，多设备适配一套图解决问题
3. 适应换肤要求，使用方便。
3.怎么用iconfont
1. 首先去iconfont图标库下载自己需要的图标。
简书里竟然gif大小限制的这么厉害，所以将动图放到项目里了，需要的在文末有git地址
如图我们可以选择自己需要的icon加入到购物车，然后加入项目里，当然你也可以直接在购物车直接下载，但是这样只是没有修改icon为自己想要的样式，加入项目中，你可以自己任意修改icon为自己想要的样式。
注意：这里是下载代码，这样我们就可以在项目中直接使用
2.将下载下来的icon资源添加到自己的项目中。
我们所需要的就是这个iconfont.ttf，对于这个ttf文件，我想我们并不陌生吧。新建项目，将这个ttf文件拖入自己的项目里。
注意：勾选如图选项
接下来配置项目加载这个文件
检查文件是否在项目中，不然会崩溃
在plist文件中加入字体
接下来我们借助淘点点科技写的一个关于iconfont封装，方便我们使用iconfont。iconfont的封装包括
工具类
tbcityiconinfo.h的实现
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#import <foundation/foundation.h>#import <uikit/uikit.h>@interface tbcityiconinfo : nsobject@property (nonatomic, strong) nsstring *text;@property (nonatomic, assign) nsinteger size;@property (nonatomic, strong) uicolor *color;- (instancetype)initwithtext:(nsstring *)text size:(nsinteger)size color:(uicolor *)color;+ (instancetype)iconinfowithtext:(nsstring *)text size:(nsinteger)size color:(uicolor *)color;@end |
tbcityiconinfo.m的实现
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#import "tbcityiconinfo.h"@implementation tbcityiconinfo- (instancetype)initwithtext:(nsstring *)text size:(nsinteger)size color:(uicolor *)color { if (self = [super init]) { self.text = text; self.size = size; self.color = color; } return self;}+ (instancetype)iconinfowithtext:(nsstring *)text size:(nsinteger)size color:(uicolor *)color { return [[tbcityiconinfo alloc] initwithtext:text size:size color:color];}@end |
tbcityiconfont.h的实现
|
1
2
3
4
5
6
7
8
9
|
#import "uiimage+tbcityiconfont.h"#import "tbcityiconinfo.h"#define tbcityiconinfomake(text, imagesize, imagecolor) [tbcityiconinfo iconinfowithtext:text size:imagesize color:imagecolor]@interface tbcityiconfont : nsobject+ (uifont *)fontwithsize: (cgfloat)size;+ (void)setfontname:(nsstring *)fontname; |
tbcityiconfont.m的实现
|
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
|
#import "tbcityiconfont.h"#import <coretext/coretext.h>@implementation tbcityiconfontstatic nsstring *_fontname;+ (void)registerfontwithurl:(nsurl *)url { nsassert([[nsfilemanager defaultmanager] fileexistsatpath:[url path]], @"font file doesn't exist"); cgdataproviderref fontdataprovider = cgdataprovidercreatewithurl((__bridge cfurlref)url); cgfontref newfont = cgfontcreatewithdataprovider(fontdataprovider); cgdataproviderrelease(fontdataprovider); ctfontmanagerregistergraphicsfont(newfont, nil); cgfontrelease(newfont);}+ (uifont *)fontwithsize:(cgfloat)size { uifont *font = [uifont fontwithname:[self fontname] size:size]; if (font == nil) { nsurl *fontfileurl = [[nsbundle mainbundle] urlforresource:[self fontname] withextension:@"ttf"]; [self registerfontwithurl: fontfileurl]; font = [uifont fontwithname:[self fontname] size:size]; nsassert(font, @"uifont object should not be nil, check if the font file is added to the application bundle and you're using the correct font name."); } return font;}+ (void)setfontname:(nsstring *)fontname { _fontname = fontname; }+ (nsstring *)fontname { return _fontname ? : @"iconfont";}@end |
uiimage+tbcityiconfont.h的实现
|
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
|
#import <uikit/uikit.h>#import "tbcityiconinfo.h"@interface uiimage (tbcityiconfont)+ (uiimage *)iconwithinfo:(tbcityiconinfo *)info;@enduiimage+tbcityiconfont.m的实现#import "uiimage+tbcityiconfont.h"#import "tbcityiconfont.h"#import <coretext/coretext.h>@implementation uiimage (tbcityiconfont)+ (uiimage *)iconwithinfo:(tbcityiconinfo *)info { cgfloat size = info.size; cgfloat scale = [uiscreen mainscreen].scale; cgfloat realsize = size * scale; uifont *font = [tbcityiconfont fontwithsize:realsize]; uigraphicsbeginimagecontext(cgsizemake(realsize, realsize)); cgcontextref context = uigraphicsgetcurrentcontext(); if ([info.text respondstoselector:@selector(drawatpoint:withattributes:)]) { /** * 如果这里抛出异常，请打开断点列表，右击all exceptions -> edit breakpoint -> all修改为objective-c * see: http://stackoverflow.com/questions/1163981/how-to-add-a-breakpoint-to-objc-exception-throw/14767076#14767076 */ [info.text drawatpoint:cgpointzero withattributes:@{nsfontattributename:font, nsforegroundcolorattributename: info.color}]; } else { #pragma clang diagnostic push#pragma clang diagnostic ignored "-wdeprecated-declarations" cgcontextsetfillcolorwithcolor(context, info.color.cgcolor); [info.text drawatpoint:cgpointmake(0, 0) withfont:font];#pragma clang pop } uiimage *image = [uiimage imagewithcgimage:uigraphicsgetimagefromcurrentimagecontext().cgimage scale:scale orientation:uiimageorientationup]; uigraphicsendimagecontext(); return image;}@end |
3.具体使用方法
1.在appdelegate.m中，初始化iconfont
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#import "appdelegate.h"#import "tbcityiconfont.h"#import "viewcontroller.h"@interface appdelegate ()@end@implementation appdelegate- (bool)application:(uiapplication *)application didfinishlaunchingwithoptions:(nsdictionary *)launchoptions { // override point for customization after application launch. [tbcityiconfont setfontname:@"iconfont"]; uinavigationcontroller *nav = [[uinavigationcontroller alloc] initwithrootviewcontroller:[viewcontroller new]]; self.window.rootviewcontroller = nav; [self.window makekeyandvisible]; return yes;} |
在viewcontroller.m中实现
|
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
|
#import "viewcontroller.h"#import "tbcityiconfont.h"#import "uiimage+tbcityiconfont.h"@interface viewcontroller ()@end@implementation viewcontroller- (void)viewdidload { [super viewdidload]; self.view.backgroundcolor = [uicolor whitecolor]; uiimageview *imageview = [[uiimageview alloc] initwithframe:cgrectmake(100, 100, 30, 30)]; [self.view addsubview:imageview]; //图标编码是，需要转成\u0000e600 imageview.image = [uiimage iconwithinfo:tbcityiconinfomake(@"\u0000e600", 30, [uicolor redcolor])]; // button uibutton *button = [uibutton buttonwithtype:uibuttontypesystem]; button.frame = cgrectmake(100, 150, 40, 40); [self.view addsubview:button]; [button setimage:[uiimage iconwithinfo:tbcityiconinfomake(@"\u0000e614", 40, [uicolor redcolor])] forstate:uicontrolstatenormal]; // label,label可以将文字与图标结合一起，直接用label的text属性将图标显示出来 uilabel *label = [[uilabel alloc] initwithframe:cgrectmake(50, 200, 280, 40)]; [self.view addsubview:label]; label.font = [uifont fontwithname:@"iconfont" size:15];//设置label的字体 label.text = @"在lable上显示 \u0000e658"; // do any additional setup after loading the view, typically from a nib.}- (void)didreceivememorywarning { [super didreceivememorywarning]; // dispose of any resources that can be recreated.}@end |
结果如下图所示：
注意：
1. 所用到的unicode编码需要自己手动将&#xxxxx格式转换成\uxxxxxxxx格式，例如//图标编码是，需要转成\u0000e600
2. 所有需要的unicode编码都可以在下载的iconfont文件夹中的.html文件打开查看
本文demo，欢迎批评指正
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：https://www.jianshu.com/p/0e899abe6bbc
