工程大小優化之圖片資源

工程大小優化之圖片資源

摘要：點點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…