_摘要:_点点 iOS 项目本身功能较多,导致应用体积也比较大。一个 Xcode 工程下图片资源占用了很大的空间,且如果有些 App 需要一键换肤功能,呵呵,不知道得做多少图片。每套图片还需要设置 1x@,2x@,3x@等
IconFont 技术起源于 Web 领域的 Web Font 技术。随着时间的推移,网页设计越来越漂亮。但是电脑预装的字体远远无法满足设计者的要求,于是 Web Font 技术诞生了。一个英文字库并不大,通过网络下载字体,完成网页的显示。有了 Web Font 技术,大大提升了设计师的发挥空间。
网页设计中图标需要适配多个分辨率,每个图标需要占用一次网络请求。于是有人想到了用 Web Font 的方法来解决这两个问题,就是 IconFont 技术。将矢量的图标做成字体,一次网络请求就够了,可以保真缩放。解决这个问题的另一个方式是图片拼合的 Sprite 图。
Web 领域使用 IconFont 类似的技术已经多年,当我在 15 年接触 BootStrap 的时候 Font Awesome 技术大行其道。最近 IconFont 技术在 iOS 图片资源方面得以应用,最近有点时间自己研究整理了一番,在此记录学习点滴。
纯色 icon
网上说了一大堆如何制作 IconFont 的方法,在此不做讨论。
初步尝试使用
NSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:@"\U0000e696 \U0000e6ab \U0000e6ac \U0000e6ae"];
[attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, 1)];
[attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(3, 1)];
[attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(9, 1)];
self.label.attributedText = attributedStr;
[self.view addSubview:self.label];
pragma mark - getter and setter
-(UILabel *)label{
if (!_label) {
_label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, BoundWidth-200, 40)];
_label.font = [UIFont fontWithName:@"iconfont" size:24];
_label.textColor = [UIColor purpleColor];
}
return _label;
}
利用 IconFont 生成 1 个 UIImage 只需要**LBPIconFontmake(par1, par2, par3)**,par1:iconfont 的 unicode 值; par2:图片大小; par3:图片的颜色值。
其中,LBPIconFontmake 是一个宏,#define LBPIconFontmake(text,size,color) [[LBPFontInfo alloc] initWithText:text withSize:size andColor:color]。
self.latestImageView.image = [UIImage iconWithInfo:LBPIconFontmake(@"\U0000e6ac", 60, @"000066") ];
![封装后的工程目录结构]( https://github.com/FantasticLBP/iOSKonwledge-Kit/raw/master/assets/屏幕快照%202017-05-28%20 下午 2.56.00.png "封装后的工程目录结构")
![效果图]( https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/Simulator%20Screen%20Shot%202017 年 5 月 28 日%20 下午 3.19.44.png "效果图")
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.