在iOS的開發(fā)中甫煞,各種圖標的使用是不可避免的,如果把全部圖標做成圖片放在項目中嗡午,那么隨著項目的逐漸龐大起來,圖片所占的地方就會越來越大冀痕,安裝包也就隨之變大了荔睹,如果圖標需要根據(jù)不同的場景改變使用不同的顏色,那么言蛇,如果做成圖片就需要多張不同顏色的圖片僻他,對于能更換皮膚的APP來說,安裝包也就會更大腊尚,為了讓APP的安裝包瘦身吨拗,iconfont就產(chǎn)生了。關于iconfont的介紹與制作方式就暫時不進行介紹了婿斥。
第一步:獲取iconfont文件劝篷。
公司會有UI做圖,讓他們提供文件就好了民宿,如果自己學習測試或者做自己的項目娇妓,就需要自己找素材了。我平時用的是阿里巴巴的圖標庫(http://www.iconfont.cn)活鹰。
打開網(wǎng)址峡蟋,搜索你需要的圖標
移動鼠標到圖標上,點擊購物車的小圖標华望,然后點擊右上角的購物車小圖標蕊蝗,
點擊下載代碼,就可以把下載一個包含iconfont的壓縮包赖舟,文件夾的目錄如下圖
第二步:導入ttf文件
將文件夾中的iconfont.ttf文件直接拖入到項目中蓬戚,記得勾選Add to targets中的選項
第三步:修改info.plist
點擊添加按鈕,輸入UIAppFonts宾抓,點擊回車子漩,會自動變成名稱為Fonts provided by application的數(shù)組豫喧,點擊添加一個item,類型為String幢泼,輸入iconfont.ttf紧显,這個是你剛導入的文件的名字,點擊回車缕棵,配置完畢孵班;
第四步:查看iconfont中的圖標的編碼
我們使用的是unicode,所以招驴,在剛才下載的文件夾中找到demo_unicode.html文件篙程,雙擊打開,可以看到如下內(nèi)容
其中的圖標名稱下面的一個字符串就是我們需要的編碼别厘,只是我們需要將其進行轉(zhuǎn)換虱饿,如果是Objective-C,我們需要將其轉(zhuǎn)為\U0000e642触趴,如果是swift氮发,我們需要將其轉(zhuǎn)為\u{e642},每個圖標的編碼不一樣冗懦,但是對應關系是一樣的爽冕,每個iconfont文件中可能不止一個圖標,使用的時候就根據(jù)圖標編碼轉(zhuǎn)成對應的即可使用批狐;
第五步:在項目中使用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)
其中的設置font中的name是你導入文件的名稱承冰,如果你想給圖標一個顏色,直接設置label的文本顏色即可食零,如果設置大小困乒,直接設置font就行
總結(jié):文字圖標的使用很方便,也能讓安裝包減少不小的體積贰谣,項目中圖標太多或者隨時需要轉(zhuǎn)換圖標顏色的話娜搂,建議使用,如果只有幾個而且不需要隨時轉(zhuǎn)換顏色吱抚,那就沒有那個必要了百宇,切幾個小圖標就行了。
如果有什么地方是有錯誤的秘豹,歡迎指正携御,交流是提升技術的一種方式。