前言
正常我们看到一个图标不外乎这三种情况，
1、使用icon图片
2、贝塞尔曲线绘制
3、图标字体
- 此文就是介绍将图标转化为字体，从而达到减小应用体积的目的
字体库生成
字体库生成阿里矢量图标库这上面提供了很多素材字体库
大致操作步骤如下，选择心仪的图标然后下载至本地
image
然后下载到本地，可以看到这些文件，其中的ttf文件就是我们需要的字体库
image
至于更多更加精美的图标这个就是UI设计师的工作，我们只需要知道怎么使用即可...
基本使用
1、将字体库添加在Copy Bundle Resources
image
2、添加到info.plist
在info.plist当中添加Fonts provided by application，然后在里面添加字体库
image
3、查询图标对应编码
方式一、打开刚刚下载到本地的文件iconfont.css，里面就可以看见对应图标的编码
image
方式二、在字体库下载处查看
可以看到里面的e697就是我们所需要的编码
image
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];
image
到此基本图标使用就已经完成，
- 缺点也很明显，只适用于纯色的图标
- 优点更加明显，
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;
image
生成渐变色代码直接附上
- (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];
};
}
网友评论