前言
正常我们看到一个图标不外乎这三种情况,
1、使用icon图片
2、贝塞尔曲线绘制
3、图标字体
此文就是介绍将图标转化为字体,从而达到减小应用体积的目的
字体库生成
字体库生成阿里矢量图标库这上面提供了很多素材字体库
大致操作步骤如下,选择心仪的图标然后下载至本地
然后下载到本地,可以看到这些文件,其中的ttf文件就是我们需要的字体库
至于更多更加精美的图标这个就是UI设计师的工作,我们只需要知道怎么使用即可...
基本使用
1、将字体库添加在Copy Bundle Resources
2、添加到info.plist
在info.plist当中添加Fonts provided by application
,然后在里面添加字体库
3、查询图标对应编码
方式一、打开刚刚下载到本地的文件iconfont.css
,里面就可以看见对应图标的编码
方式二、在字体库下载处查看
可以看到
里面的e697
就是我们所需要的编码
4、实战使用
正常的当成字符串使用即可,显示\U0000e82b
里面的e82b
对应图标编码
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; label.center = CGPointMake(self.view.frame.size.width/2, 500); label.textAlignment = NSTextAlignmentCenter; label.backgroundColor = [UIColor.greenColor colorWithAlphaComponent:0.5]; label.textColor = UIColor.blueColor; label.font = [UIFont fontWithName:@"iconfont" size:50]; label.text = @"\U0000e82b"; [self.view addSubview:label];
到此基本图标使用就已经完成,
缺点也很明显,只适用于纯色的图标
优点更加明显,
1、避免@2X图和@3X图 2、随意改变大小不会像图标会出现锯齿失真情况 3、随心所欲改变颜色 4、等等等有待你的发现...
更好玩的扩展,设置渐变色图标
生成一个横向彩虹渐变色,然后设置textColor
UIColor *color = [self kj_gradientColor:UIColor.redColor,UIColor.orangeColor,UIColor.yellowColor,UIColor.greenColor,UIColor.cyanColor,UIColor.blueColor,UIColor.purpleColor,nil](CGSizeMake(label.frame.size.width, 1)); label.textColor = color;
生成渐变色代码直接附上
- (UIColor*(^)(CGSize))kj_gradientColor:(UIColor*)color,...{ NSMutableArray * colors = [NSMutableArray arrayWithObjects:(id)color.CGColor,nil]; va_list args;UIColor * arg; va_start(args, color); while ((arg = va_arg(args, UIColor *))) { [colors addObject:(id)arg.CGColor]; } va_end(args); return ^UIColor*(CGSize size){ UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale); CGContextRef context = UIGraphicsGetCurrentContext(); CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColors(colorspace, (__bridge CFArrayRef)colors, NULL); CGContextDrawLinearGradient(context, gradient, CGPointZero, CGPointMake(size.width, size.height), 0); UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); CGGradientRelease(gradient); CGColorSpaceRelease(colorspace); UIGraphicsEndImageContext(); return [UIColor colorWithPatternImage:image]; }; }