工程大小优化之图片资源

工程大小优化之图片资源

摘要：点点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的方法，在此不作讨论。

咱们说说怎么用

1. 首先选取一些有丰富资源的网站，我使用阿里的IconFont多年，其余的没去研究，因此此处直接使用阿里的产品。地址：www.iconfont.cn/plus
2. 打开网站在线挑选好合适的图标加入购物车，如图

   阿里IconFont

3. 选择好以后在购物车查看，而后点击下载代码

   下载IconFont

4. 打开下载好的文件，其机构以下，咱们在iOS项目开发过程当中使用unicode的形式使用IconFont,因此打开demo_unicode.html
   

   下载文件目录结构

   
   

   unicode形式使用IconFont

5. 注意：建立 UIFont 使用的是字体名，而不是文件名；文本值为 8 位的 Unicode 字符，咱们能够打开 demo.html 查找每一个图标所对应的 HTML 实体 Unicode 码，好比： "店" 对应的 HTML 实体 Unicode 码为：0x3439 转换后为：\U00003439 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符

Xcode中使用IconFont

初步尝试使用

1. 首先看看如何简单实用IconFont
2. 首先将下载好的文件夹中的iconfont.ttf加入到Xcode工程中，确保加入成功在Build检查

   Xcode检查引入结果

3. 怎么用？

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") ];复制代码

封装后的工程目录结构

1. LBPFontInfo来封装字体信息
2. UIColor+picker根据十六进制字符串来设置颜色
3. LBPIconFont向系统中注册IconFont字体库，并使用
4. UIImage+LBPIconFont封装一个使用IconFont的Image分类

效果图

效果图

Demo地址

github.com/FantasticLB…