iOS開(kāi)發(fā)中使用文字圖標(biāo)iconfont的應(yīng)用示例
在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)物車(chē)的小圖標(biāo),然后點(diǎn)擊右上角的購(gòu)物車(chē)小圖標(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)擊回車(chē),會(huì)自動(dòng)變成名稱(chēng)為Fonts provided by application的數(shù)組,點(diǎn)擊添加一個(gè)item,類(lèi)型為String,輸入iconfont.ttf,這個(gè)是你剛導(dǎo)入的文件的名字,點(diǎn)擊回車(chē),配置完畢;
第四步:查看iconfont中的圖標(biāo)的編碼
我們使用的是unicode,所以,在剛才下載的文件夾中找到demo_unicode.html文件,雙擊打開(kāi),可以看到如下內(nèi)容

其中的圖標(biāo)名稱(chēng)下面的一個(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的使用方式類(lèi)似,你們可以自己嘗試,只是編碼的轉(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)入文件的名稱(chēng),如果你想給圖標(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS代碼瘦身實(shí)踐之如何刪除無(wú)用的類(lèi)
這篇文章主要給大家介紹了關(guān)于iOS代碼瘦身實(shí)踐之如何刪除無(wú)用的類(lèi),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家各位iOS開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
iOS 獲取當(dāng)前時(shí)間及時(shí)間戳的互換實(shí)例
下面小編就為大家分享一篇iOS 獲取當(dāng)前時(shí)間及時(shí)間戳的互換實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
iOS開(kāi)發(fā)一個(gè)好看的ActionSheet
本篇文章通過(guò)代碼分享和圖文形式教給大家用IOS寫(xiě)一個(gè)好看的ActionSheet過(guò)程以及注意事項(xiàng),需要的朋友參考下吧。2018-01-01
IOS中實(shí)現(xiàn)圖片點(diǎn)擊全屏預(yù)覽
IOS作為一款智能手機(jī)系統(tǒng),在查看圖片的時(shí)候,如果能夠?qū)崿F(xiàn)全屏,對(duì)用戶(hù)來(lái)說(shuō)有很好的視覺(jué)體驗(yàn),其實(shí)實(shí)現(xiàn)起來(lái)非常的簡(jiǎn)單,下面我就結(jié)合一個(gè)簡(jiǎn)單的代碼給大家來(lái)分享一下,,需要的朋友可以參考下2015-11-11
詳解IOS的Automatically Sign在設(shè)備上打包
本篇教程主要給大家分享了IOS的Automatically Sign如何在設(shè)備上直接打包,有需要的朋友參考學(xué)習(xí)下。2018-01-01
詳解iOS應(yīng)用開(kāi)發(fā)中autoresizing尺寸自動(dòng)適應(yīng)屬性的用法
這篇文章主要介紹了iOS應(yīng)用開(kāi)發(fā)中autoresizing尺寸自動(dòng)適應(yīng)屬性的用法,文中講解了使用代碼和Storyboard兩種方式調(diào)節(jié)autoresizing的方法,示例代碼為Objective-C,需要的朋友可以參考下2016-03-03

