在iOS的開發(fā)中，各種圖標(biāo)的使用是不可避免的，如果把全部圖標(biāo)做成圖片放在項目中，那么隨著項目的逐漸龐大起來，圖片所占的地方就會越來越大，安裝包也就隨之變大了，如果圖標(biāo)需要根據(jù)不同的場景改變使用不同的顏色，那么，如果做成圖片就需要多張不同顏色的圖片，對于能更換皮膚的APP來說，安裝包也就會更大，為了讓APP的安裝包瘦身，iconfont就產(chǎn)生了。關(guān)于iconfont的介紹與制作方式就暫時不進行介紹了。

第一步：獲取iconfont文件。

公司會有UI做圖，讓他們提供文件就好了，如果自己學(xué)習(xí)測試或者做自己的項目，就需要自己找素材了。我平時用的是阿里巴巴的圖標(biāo)庫（http://www.iconfont.cn）。

打開網(wǎng)址，搜索你需要的圖標(biāo)

移動鼠標(biāo)到圖標(biāo)上，點擊購物車的小圖標(biāo)，然后點擊右上角的購物車小圖標(biāo)，

點擊下載代碼，就可以把下載一個包含iconfont的壓縮包，文件夾的目錄如下圖

第二步：導(dǎo)入ttf文件

將文件夾中的iconfont.ttf文件直接拖入到項目中，記得勾選Add to targets中的選項

第三步：修改info.plist

點擊添加按鈕，輸入UIAppFonts，點擊回車，會自動變成名稱為Fonts provided by application的數(shù)組，點擊添加一個item，類型為String，輸入iconfont.ttf，這個是你剛導(dǎo)入的文件的名字，點擊回車，配置完畢；

第四步：查看iconfont中的圖標(biāo)的編碼

我們使用的是unicode，所以，在剛才下載的文件夾中找到demo_unicode.html文件，雙擊打開，可以看到如下內(nèi)容

其中的圖標(biāo)名稱下面的一個字符串就是我們需要的編碼，只是我們需要將其進行轉(zhuǎn)換，如果是Objective-C，我們需要將其轉(zhuǎn)為\U0000e642，如果是swift，我們需要將其轉(zhuǎn)為\u{e642}，每個圖標(biāo)的編碼不一樣，但是對應(yīng)關(guān)系是一樣的，每個iconfont文件中可能不止一個圖標(biāo)，使用的時候就根據(jù)圖標(biāo)編碼轉(zhuǎn)成對應(yīng)的即可使用；

第五步：在項目中使用iconfont

我用的是swift，Objective-C的使用方式類似，你們可以自己嘗試，只是編碼的轉(zhuǎn)換結(jié)果不一樣

let iconLabel = UILabel.init(frame: .init(x: 0, y: 0, width: 100, height: 30))
iconLabel.text = "\u{e642}"
iconLabel.font = UIFont.init(name: "iconfont", size: 15)

其中的設(shè)置font中的name是你導(dǎo)入文件的名稱，如果你想給圖標(biāo)一個顏色，直接設(shè)置label的文本顏色即可，如果設(shè)置大小，直接設(shè)置font就行

總結(jié)：文字圖標(biāo)的使用很方便，也能讓安裝包減少不小的體積，項目中圖標(biāo)太多或者隨時需要轉(zhuǎn)換圖標(biāo)顏色的話，建議使用，如果只有幾個而且不需要隨時轉(zhuǎn)換顏色，那就沒有那個必要了，切幾個小圖標(biāo)就行了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論