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

第一步：獲取iconfont文件。

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

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

移動(dòng)鼠標(biāo)到圖標(biāo)上，點(diǎn)擊購(gòu)物車的小圖標(biāo)，然后點(diǎn)擊右上角的購(gòu)物車小圖標(biāo)，

點(diǎn)擊下載代碼，就可以把下載一個(gè)包含iconfont的壓縮包，文件夾的目錄如下圖

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

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

第三步：修改info.plist

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

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

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

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

第五步：在項(xià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)一個(gè)顏色，直接設(shè)置label的文本顏色即可，如果設(shè)置大小，直接設(shè)置font就行

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

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

最新評(píng)論