登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

在iOS工程中使用iconfont技术节省图片开销

[复制链接]
来自: 昔年123456 分类: iOS精品源码 上传时间: 2017-8-31 10:19:21
Tag:

项目介绍:

工程大小优化之图片资源
_摘要:_点点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图片资源方面得以应用,最近有点时间自己研究整理了一番,在此记录学习点滴。
优点
  • 减小体积,字体文件比图片要小
  • 图标保真缩放,解决2x/3x乃至将来的nx图问题
  • 方便更改颜色大小,图片复用
缺点
  • 只适用于 纯色icon
  • 使用unicode字符难以理解
  • 需要维护字体库
网上说了一大堆如何制作IconFont的方法,在此不做讨论。
我们说说怎么用
  • 首先选取一些有丰富资源的网站,我使用阿里的IconFont多年,其他的没去研究,所以此处直接使用阿里的产品。地址:http://www.iconfont.cn/plus
  • 打开网站在线挑选好合适的图标加入购物车,如图
  • 选择好之后在购物车查看,然后点击下载代码
  • 打开下载好的文件,其机构如下,我们在iOS项目开发过程中使用unicode的形式使用IconFont,所以打开demo_unicode.html
  • 注意:创建 UIFont 使用的是字体名,而不是文件名;文本值为 8 位的 Unicode 字符,我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码,比如: "店" 对应的 HTML 实体 Unicode 码为:0x3439 转换后为:\U00003439 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符
Xcode中使用IconFont
初步尝试使用
  • 首先看看如何简单实用IconFont
  • 首先将下载好的文件夹中的iconfont.ttf加入到Xcode工程中,确保加入成功在Build检查
  • 怎么用?
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 iconWithInfoBPIconFontmake(@"\U0000e6ac", 60, @"000066") ];
  • LBPFontInfo来封装字体信息
  • UIColor+picker根据十六进制字符串来设置颜色
  • LBPIconFont向系统中注册IconFont字体库,并使用
  • UIImage+LBPIconFont封装一个使用IconFont的Image分类
效果图
如果有不懂的地方可以加入QQ交流群讨论:515066271。这个QQ群讨论技术范围包括:iOS、H5混合开发、前端开发、PHP开发,欢迎大家讨论技术。

相关源码推荐:

我来说两句
*滑动验证:
所有评论(74)
逆鳞九霄 2017-8-31 10:36:41
感谢分享,Code4App有你更精彩:)
回复
AlonMessi 2017-8-31 10:36:52
感谢大神分享,必须顶!
回复
kengsir 2017-8-31 10:37:09
code4app好的内容真的很多~赞
回复
phoiu 2017-8-31 10:37:25
膜拜大神~
回复
BlueManlove 2017-8-31 10:37:35
感谢大神~
回复
littleRed 2017-8-31 10:38:04
我是来学习的
回复
hellokenken 2017-8-31 10:38:40
mark,收藏了
回复
code4app热心网友 2017-8-31 14:52:31
我只是路过打酱油的。
回复
code4app热心网友 2017-8-31 16:10:15
感谢分享,Code4App有你更精彩:)
回复
提取码:  下载次数:50 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
878 0 50
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表