iOS開發中使用文字圖標iconfont


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

第一步:獲取iconfont文件。

公司會有UI做圖,讓他們提供文件就好了,如果自己學習測試或者做自己的項目,就需要自己找素材了。我平時用的是阿里巴巴的圖標庫(http://www.iconfont.cn)。
打開網址,搜索你需要的圖標

移動鼠標到圖標上,點擊購物車的小圖標,然后點擊右上角的購物車小圖標,

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

第二步:導入ttf文件

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

第三步:修改info.plist

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

第四步:查看iconfont中的圖標的編碼

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

其中的圖標名稱下面的一個字符串就是我們需要的編碼,只是我們需要將其進行轉換,如果是Objective-C,我們需要將其轉為\U0000e642,如果是swift,我們需要將其轉為\u{e642},每個圖標的編碼不一樣,但是對應關系是一樣的,每個iconfont文件中可能不止一個圖標,使用的時候就根據圖標編碼轉成對應的即可使用;

第五步:在項目中使用iconfont

我用的是swift,Objective-C的使用方式類似,你們可以自己嘗試,只是編碼的轉換結果不一樣

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就行

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

如果有什么地方是有錯誤的,歡迎指正,交流是提升技術的一種方式。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM