首页 >iOS开发

iOS - IconFont的使用

2018-08-10 16:02 编辑: yyuuzhu 分类:iOS开发 来源:踩坑小分队

image.png

IconFont是啥?

我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和我们使用自定义字体的方式是一样的,并且它是一种矢量图标。

计算机中显示的图形一般分为两类---位图和矢量图,我们平常使用的JPEG、PNG等图片都是位图格式,是一种由像素来表示的图像,而矢量图是由点、直线、多边形等基于数学方程的几何图元表示的图像,对比位图,矢量图具有体积小,放大缩小都不会失真的优点,这个优点就可以给项目带来很大好处了,但缺点是无法用来表达色彩层次丰富的图像,因此一些色彩复杂的图形仍然需要位图去表达。我们项目在进行模块化碰到不同模块使用到相同的图片时,尤其是这种基础icon,复制多份到各自的模块中是不太优雅的,利用Iconfont就可以很好的解决。

IconFont的优点

  • 图片进行复用,并且很方便的更改图片的大小和颜色。

  • 减小应用体积,字体文件比图片要小;

  • 图标保真缩放,解决2x/3x乃至将来nx图问题;

  • 同一套资源可以应用在不同的平台 iOS,Android,web

IconFont的缺点

  • 只是支持单色

  • 制作成本高

在iOS中的使用姿势

对于制作IconFont的流程和其他平台的使用方式不做相关说明了,当前只说一下在iOS平台的使用说明

1、IconFont的生成平台,生成资源包

有很多的资源平台,当然了也可以自己制作

阿里巴巴的平台

image.png

image.png

image.png

image.png

打开demo_unicode.html,我们可以看到Unicode码和图标之间的关系

image.png

2、导入到项目中

image.png

在Info.plist中进行配置,添加

Fonts provided by application选项,添加进来的.ttf文件名称添加到数组中

image.png

3、在Label****中使用

使用方法和定制自定义的字体差不多。

首先要找到添加的.ttf对应的fontName的名称。

最笨的方法就是直接获取所有的字体,然后比较添加到plist之前和之后的字体有哪个不一样,可以将两次的打印结果放在Excel表格中进行对比。

NSArray*familyNames = [UIFont familyNames];

NSLog(@"familyNames.count === %ld",familyNames.count);

for(NSString*familyName in familyNames ){

printf("Family: %s \n", [familyName UTF8String]);

}

在Label中直接使用

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(106030050)];

 // 字体使用下面对比出来的字体

 label.font = [UIFont fontWithName:@"iconfont" size:35];

 // 采用Unicode码进行

 label.text = @"下面展示的IconFont \U0000e77c \U0000e77d \U0000e781 \U0000e782 \U0000e787";

 label.textColor = [UIColor orangeColor];

 label.numberOfLines = 0;

 [label sizeToFit];

 [self.view addSubview:label];

image.png

颜色,大小可以随便设置

4、在UIImage中使用

将文字转化成图片就可以了

相关代码,封装成了一个分类

#import 

@interface UIImage (IconFont)

/**

 通过IconFont的形式创建图片

 * 例如 [UIImage imageWithIconFontName:@"iconfont" fontSize:100 text:@"\U0000e603" color:[UIColor greenColor]]

 @param iconFontName iconFont的name

 @param fontSize 字体的大小

 @param text 文本信息

 @param color 颜色

 @return 创建的图片

 */


+ (UIImage *)imageWithIconFontName:(NSString *)iconFontName fontSize:(CGFloat)fontSize text:(NSString *)text color:(UIColor *)color;

@end
#import "UIImage+IconFont.h"

#import 

@implementation UIImage (IconFont)

/**

 通过IconFont的形式创建图片

 @param iconFontName iconFont的name

 @param fontSize 字体的大小

 @param text 文案

 @param color 颜色

 @return 创建的图片

 */


+ (UIImage *)imageWithIconFontName:(NSString *)iconFontName fontSize:(CGFloat)fontSize text:(NSString *)text color:(UIColor *)color

{

 CGFloat size = fontSize;

 CGFloat scale = [UIScreen mainScreen].scale;

 CGFloat realSize = size * scale;

 UIFont *font = [self fontWithSize:realSize withFontName:iconFontName];

 UIGraphicsBeginImageContext(CGSizeMake(realSize, realSize));

 CGContextRef context = UIGraphicsGetCurrentContext();

 if ([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

 */


 [text drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName:color}];

 } else {

#pragma clang diagnostic push

#pragma clang diagnostic ignored "-Wdeprecated-declarations"

 CGContextSetFillColorWithColor(context, color.CGColor);

 [text drawAtPoint:CGPointMake(00) withFont:font];

#pragma clang pop

 }

 UIImage *image = [UIImage imageWithCGImage:UIGraphicsGetImageFromCurrentImageContext().CGImage scale:scale orientation:UIImageOrientationUp];

 UIGraphicsEndImageContext();

 return image;

}

/**

 iconFont 转化font

 @param size 字体大小

 @param fontName 字体的名称

 @return 字体的font

 */


+ (UIFont *)fontWithSize:(CGFloat)size withFontName:(NSString *)fontName {

 UIFont *font = [UIFont fontWithName:fontName size:size];

 if (font == nil) {

 NSURL *fontFileUrl = [[NSBundle mainBundle] URLForResource:fontName withExtension:@"ttf"];

 [self registerFontWithURL: fontFileUrl];

 font = [UIFont fontWithName: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;

}

// 如果没有在info.plist中声明,在这注册一下也可以。

+ (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);

}

使用方法

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(20350100100)];

 imageView1.image = [UIImage imageWithIconFontName:@"iconfont" fontSize:80 text:@"\U0000e781" color:[UIColor greenColor]];

 imageView1.layer.borderColor = [UIColor redColor].CGColor;

 imageView1.layer.borderWidth = 1;

 imageView1.contentMode = UIViewContentModeCenter;

 [self.view addSubview:imageView1];

 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

 btn.frame = CGRectMake(20CGRectGetMaxY(imageView1.frame)+2010050);

 [btn setTitle:@"狮子" forState:UIControlStateNormal];

 [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

 btn.layer.borderWidth = 1;

 btn.layer.borderColor = [UIColor redColor].CGColor;

 [self.view addSubview:btn];

 UIImage *normalImage = [UIImage imageWithIconFontName:@"iconfont" fontSize:40 text:@"\U0000E784" color:[UIColor cyanColor]];

 [btn setImage:normalImage forState:UIControlStateNormal];

image.png

Demo链接

有啥更好的实现方法,或者有那个地方说的不对,欢迎指出。谢谢。

作者:踩坑小分队
链接:https://www.jianshu.com/p/61957b4bc348#comments

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:iOS内存分析下-前台内存耗尽闪退(FOOM)
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部