欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS中如何使用iconfont图标实例详解

程序员文章站 2024-02-11 17:46:34
1.什么是iconfont iconfont拆开来看,就是 icon + font,这样估计大家应该都能理解是什么,那两者结合是什么呢?没错!就是 iconfont !让...

1.什么是iconfont

iconfont拆开来看,就是 icon + font,这样估计大家应该都能理解是什么,那两者结合是什么呢?没错!就是 iconfont !让开发者像使用字体一样使用图标。如果自己不会做的话,可以直接去阿里的下载自己需要的图标。

2.为什么要使用iconfont

在开发项目时,不可避免的会用到各种图标,为了适配不同的设备,通常需要@2x和@3x两套图,例如说我们tabbar上使用的图标。有些app有换肤的需要,还需要多套不同的图来进行匹配不同的主题。如果使用切图,这对于设计和开发来说无疑是增加了工作量,而且ipa的体积也会增大。

使用iconfont的好处:

1. 减小ipa包的大小

2. 图标保真缩放,多设备适配一套图解决问题

3. 适应换肤要求,使用方便。

3.怎么用iconfont

1. 首先去下载自己需要的图标。

简书里竟然gif大小限制的这么厉害,所以将动图放到项目里了,需要的在文末有git地址

iOS中如何使用iconfont图标实例详解

如图我们可以选择自己需要的icon加入到购物车,然后加入项目里,当然你也可以直接在购物车直接下载,但是这样只是没有修改icon为自己想要的样式,加入项目中,你可以自己任意修改icon为自己想要的样式。

iOS中如何使用iconfont图标实例详解

注意:这里是下载代码,这样我们就可以在项目中直接使用

2.将下载下来的icon资源添加到自己的项目中。

iOS中如何使用iconfont图标实例详解

我们所需要的就是这个iconfont.ttf,对于这个ttf文件,我想我们并不陌生吧。新建项目,将这个ttf文件拖入自己的项目里。

iOS中如何使用iconfont图标实例详解

注意:勾选如图选项

接下来配置项目加载这个文件

检查文件是否在项目中,不然会崩溃

iOS中如何使用iconfont图标实例详解

在plist文件中加入字体

iOS中如何使用iconfont图标实例详解

接下来我们借助淘点点科技写的一个关于iconfont封装,方便我们使用iconfont。iconfont的封装包括

iOS中如何使用iconfont图标实例详解
工具类

tbcityiconinfo.h的实现

#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的实现

#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的实现

#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的实现

#import "tbcityiconfont.h"
#import <coretext/coretext.h>

@implementation tbcityiconfont

static 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的实现

#import <uikit/uikit.h>
#import "tbcityiconinfo.h"

@interface uiimage (tbcityiconfont)

+ (uiimage *)iconwithinfo:(tbcityiconinfo *)info;

@end
uiimage+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://*.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

#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中实现

#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

结果如下图所示:

iOS中如何使用iconfont图标实例详解

注意:

1. 所用到的unicode编码需要自己手动将xxxx格式转换成\uxxxxxxxx格式,例如//图标编码是,需要转成\u0000e600

2. 所有需要的unicode编码都可以在下载的iconfont文件夹中的.html文件打开查看

iOS中如何使用iconfont图标实例详解

本文demo本地下载),欢迎批评指正

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。