前言
正常我們看到一個圖標不外乎這三種情況，
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];
};
}