公司在前一段時間將大量圖標進行了iconfont的替換，大大縮減了app的size。這幾天，尋思著在自己app上也使用 iconfont，并且在使用上進行優化，使其在xib和 storyboard 上能像 UIImageView 那樣所寫即所見，所見即所得。

iconfont 即通過自體形式進行 icon 的展示。其最大特點就是矢量性，即放大圖標不虛化。

下面先快速介紹下從創建到使用的過程以及對其使用進行優化，具體如下幾點：

1. 創建 iconfont 圖標；
2. 創建 iconfont 字體褲；
3. 使用圖標字體庫；
4. 在 iOS 使用上優化

創建 iconfont 圖標

作為一個程序員，說真的我不會畫圖標，也覺得畫起來特別煩，瑣。好在阿里巴巴為我們提供了極大的便利。上網站：http://www.iconfont.cn

在這個網站你不僅可以上傳自己設計的字體圖標，更重要的是這里有超多牛逼設計師已經設計好的 icon，你只需要根據自己app的需要進行搜索，然后聚合起來，再生成一個字體庫就能使用了。當然了，如果你對某個 icon 覺得不滿意，你完全可以直接對它進行簡單編輯哈。使用起來絕對666。

網站首頁

下面介紹下在別人創建好的 icon 上進行修改和保存。

首先在首頁上隨便選擇一個圖標庫，進入圖標庫詳情后，挑選一個想修改的圖標并將其加入購物車，然后添加到自己的項目上，接著在你創建的項目上即可看到這個圖標。光標移動到圖標，點擊編輯即可。

add icon

生成字體庫

在選擇了需要的圖標并添加到項目后，點擊【下載至本地】即可生成圖標字體庫。順便說一下，創建項目時會讓你指定字體庫名稱（默認是 iconfont），可以根據自己需要進行命名（在使用時會用到這個字體庫名稱）。

new project

下載到本地后，我們其目錄結構如下：

目錄結構

使用圖標字體庫

因為后面會在 iOS 使用上進行優化，所以這里主要介紹在 iOS 上的使用。在android 和 web 上的使用可以參考官網的介紹： http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

iOS上的使用

其實這就是導入自定義字體，步驟是一模一樣。

1.創建一個項目，選擇 Single View Application，填寫項目名稱，完成。如下圖：

（步驟太簡單，圖片不好意思顯示）

2.把下載的字體庫 iconfont.ttf 文件拖入項目中，勾上 Copy Items If Needed，點擊【Finish】；
（步驟太簡單，圖片不好意思顯示）

3.選擇 Info.plist 文件，添加一個 key，名稱為 UIAppFonts，回車。

添加字體key

4.這時新建的這一項應該是個數組類型，在 item0 的 Value 項填上字體名稱（注意是字體名稱，不是 ttf 文件名稱，即上面提到的在創建字體的時候所填的名稱）

添加自定義字體

5.在 storyboard 上放置一個 UILabel 或 UIButton，設置為自定義字體，選擇新添加的字體

創建label

6.ctrl + 拖動控件，關聯屬性

關聯屬性

7.設置字體圖標 Unicode
在我們下載的字體目錄中，有個 demo_unicode.html 文件，打開它可以看到每個圖標對呀的 Unicode 編號。

圖標Unicode

給 label 的 text 設置上相應的值即可。如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 燈泡
    _iconLabel.text = @"\U0000e881";
}

8.編譯運行

運行結果

優化部分

以上就是創建和使用 iconfont 的這個過程。使用起來倒不麻煩，就是有幾個缺點：

1. 每次使用圖標都得查一下對應的 Unicode 編號；
2. 對應著一堆 "\U0000xxxx"，如果不寫注釋，真不知道是什么東西；
3. 如果是使用存代碼創建label，那通過代碼設置圖標還說得過去，但是使用 xib 或 storyboard 的時候還得用過一行代碼來設置就有點說不過去了；

這么說確實感覺挺麻煩的，有問題就有解決的答案。下面，介紹下我是怎么逐一解決這些問題的。

問題2和3：能不能看著編碼就知道是什么圖標呢？怎樣在 xib 上創建 label 的時候同時給設置上圖標值呢？
解決方案： 通過繼承 label，結合 IB_DESIGNABLE 就能辦到。

首先創建 UILabel 子類 IconLabel，添加屬性 iconName，順便拓展下 IconLabel 功能，多添加個屬性 selectedIconName，這樣 IconLabel 就可以直接通過改變 selected 狀態來改變預先設置好的圖標了，如下代碼：

@interface IconLabel : UILabel

/// 設置選中狀態
@property(nonatomic, assign) BOOL selected;
/// 普通狀態下的圖片名稱（只需要后面的4位 16 進制， 如：f3f7)
@property(nonatomic, copy, nullable) NSString *iconName;
/// 被選中狀態下的圖片名稱（只需要后面的4位 16 進制，如：f3f7)
@property(nonatomic, copy, nullable) NSString *selectedIconName;

@end

重寫 iconName 和 selectedIconName setter 方法：

#pragma mark - setter and getter

- (void)setIconName:(NSString *)iconName {
    NSString *iName = iconUnicodeWithName(iconName);
    if (iName != _iconName) {
        _iconName = iName;
    }
}

- (void)setSelectedIconName:(NSString *)selectedIconName {
    NSString *iName = iconUnicodeWithName(selectedIconName);
    if (iName != _selectedIconName) {
        _selectedIconName = iName;
    }
}

其中 iconUnicodeWithName，是通過 NSScanner 將16進制字符串進行掃描，并轉換為Unicode，如下：

NSString *iconUnicodeWithName(NSString *name) {
    NSScanner *scanner = [NSScanner scannerWithString:name];
    unsigned int code;
    [scanner scanHexInt:&code];
    return [NSString stringWithFormat:@"%C", (unsigned short)code];
}

最后，因為我們要在 xib 上直接進行值的設置，所有需要為 IconLabel 類和其想在 xib 上顯示的屬性設置上關鍵字，如下：

IB_DESIGNABLE

@interface IconLabel : UILabel

/// 設置選中狀態
@property(nonatomic, assign) BOOL selected;
/// 普通狀態下的圖片名稱（只需要后面的4位 16 進制， 如：f3f7)
@property(nonatomic, copy, nullable) IBInspectable NSString *iconName;
/// 被選中狀態下的圖片名稱（只需要后面的4位 16 進制，如：f3f7)
@property(nonatomic, copy, nullable) IBInspectable NSString *selectedIconName;

@end

其中 IB_DESIGNABLE 標識該類為可設計類， IBInspectable 標識屬性為可視察屬性（下面就能看到效果）。

為了能讓設置的值對應的圖標實時顯示，我們需要重寫 UILabel 的 prepareForInterfaceBuilder 方法，為了不需要手動設置字體名稱，我們需要在 awakeFromNib 方法上進行默認字體的設置，如下：

#define IconFontName @"my_like_icon"

@implementation IconLabel

- (void)awakeFromNib {
    [super awakeFromNib];
    
    [self setupFontWithSize:self.font.pointSize];
    [self reloadView];
}

- (void)prepareForInterfaceBuilder {
    [super prepareForInterfaceBuilder];
    
    [self setupFontWithSize:self.font.pointSize];
    [self reloadView];
}

// 初始化字體
- (void)setupFontWithSize:(CGFloat)fontSize {
    self.font = [UIFont fontWithName:IconFontName size:fontSize];
}

- (void)reloadView {
    self.text = _selected ? _selectedIconName : _iconName;
}

@end

類的自定義這樣就算完成了。現在，切換到 Main.storyboard，同樣添加一個 UILabel 組件，并修改類為 IconLabel

設置label類

接著，切換到 Show the Attributes inspector 選擇，你會發現多了兩個可填框

多出的框

設置一下值，看看效果

設置值

so cool，如此美妙。現在你只需在 Icon Name 出設置上圖標對應的字符串編號即可實時顯示圖標了。問題2和3解決。

接著我們看看問題1：能不能不需要查圖標對應的 Unicode 編號就能設置圖標呢？
等等，什么？你說問題2只解決了一半？雖然在 storyboard 上可以實時顯示對應編碼圖標，但是如果我就用純代碼呢，不還是要注釋是什么圖標嗎。而且，通過 storyboard 設置值又衍生出另一個問題了。
問題4： 突然有一天產品說：把所有收藏圖標從紅心都換成五角星吧... 我的刀呢

是的，如果只是上面這點實現，你還是要寫注釋說明。而問題4其實我們只要通過全局搜索再替換就行了（你就不想全局替換？那就聽我慢慢道來哈）

下面在解決問題1的同時，會相應的把 問題2和4解決。
不查編碼就能設置圖標，其實很簡單，你只需要將圖標編碼記住，就不用查了。

逗我嗎

哈，還是進入正題吧。。。

要想做到這點，其實一個映射表就能解決了（有沒有頓悟的感覺）。映射表的格式很簡單，key 值是圖標名稱（命名時當然是要做到見名稱如見圖標啦），而且這個名稱是要中文還是英文完全取決于你，當然，你想讓兩者并存也完全沒問題。而 value 的值就是圖標對應的編號了。如下，我新建了個 plist 文件進行管理：

IconMap

怎么樣，看到 key 可以很形象的想到是什么圖標吧。
技巧： 有個技巧可以快速往這個文件填充內容，就是通過選擇文件然后 右擊，然后選擇 Open As -> Source Code，前面說到在下載下來的文件中有個叫 demo_unicode.html 的文件，通過 atom 或者 sublime 編輯器將其打開；然后復制需要的代碼（即：圖標編碼那一塊代碼）；接著，command + n 新建文件，將內容粘貼；然后還是見下圖 gif 好了：

快速設置內容

最后將其粘貼到新建的plist 文件即可。

粘貼內容

接下來要做的就是通過 key 來映射相應的值，修改一下前面重寫的 setter 方法，如下：

- (void)setIconName:(NSString *)iconName {
    NSString *iName = IconNameSelector(iconName);
    if (iName.length) {
        iName = iconUnicodeWithName(iName);
    } else {
        iName = iconUnicodeWithName(iconName);
    }
    if (iName != _iconName) {
        _iconName = iName;
    }
}

- (void)setSelectedIconName:(NSString *)selectedIconName {
    NSString *iName = IconNameSelector(selectedIconName);
    if (iName.length) {
        iName = iconUnicodeWithName(iName);
    } else {
        iName = iconUnicodeWithName(selectedIconName);
    }
    if (iName != _selectedIconName) {
        _selectedIconName = iName;
    }
}

這里做了下兼容，如果 IconNameSelector 返回的內容是空的，則認為 iconName 就是圖標的編碼，直接進行字符串編碼掃描；如果返回結果非空，則說明映射成功，把映射結果進行編碼掃描。 這里 IconNameSelector 所做的就是讀取映射文件并返回值。

下面看看改進后的使用方法：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    IconLabel *iconLabel = [[IconLabel alloc] initWithIconName:@"燈泡" fontSize:30];
    iconLabel.frame = CGRectMake(100, 100, iconLabel.frame.size.width, iconLabel.frame.size.height);
    [self.view addSubview:iconLabel];
}

這下是不是感覺簡單明了了。再看看 storyboard的使用：

storyboard使用改進

這下，不需要查看圖標編碼就可以設置圖標了。
先看看 IconNameSelector 的實現：

#define SRCROOT [[NSString stringWithCString:__FILE__ encoding:(NSUTF8StringEncoding)] stringByReplacingOccurrencesOfString:@"Classes/IconFontMap.h" withString:@""]

static NSDictionary *iconFontMap = nil;

static inline NSString * _Nullable iconfontWithName(NSString * __nonnull name) {
#if DEBUG
    NSString *fullPath = [SRCROOT stringByAppendingString:@"IconFontMap.plist"];
    iconFontMap = [NSDictionary dictionaryWithContentsOfFile:fullPath];
#endif
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        NSString *path = [[NSBundle mainBundle] pathForResource:@"IconFontMap" ofType:@"plist"];
        iconFontMap = [NSDictionary dictionaryWithContentsOfFile:path];
    });
    return iconFontMap[name];
}

#define IconNameSelector(key) iconfontWithName(key)

注意到 #if Debug ... #endif 包起來的代碼。其實，因為將映射表放在文件上，通過 [NSBundle mainBundle] 獲取的路徑在編譯時是沒法讀取到的，所以為了在 storyboard 的使用中能實時顯示圖標，我稍微做了黑科技，本來想通過代碼獲取 {SRCROO} 路徑，然后編譯后動態去定義*。
另外，其實你完全可有直接定義一個 NSDictionary 對象，直接將代碼貼上：

static NSDictionary *iconFontMap = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
    iconFontMap = @{
                    @"key1": @"name1",
                    @"key2": @"name2"
                    };
});

以上，即在使用 iconfont 時的基本優化過程。當然，在實際用途中，還封裝了 IconButton 和 IconImageView，項目地址：
https://github.com/linshaolie/IconFontExtension
如有發現什么問題，歡迎提出，謝謝。