iOS開發 阿里巴巴IconFont適配技術

2021-07-12 06:25:42 字數 2969 閱讀 5589

在開發阿里資料ios版客戶端的時候,由於專案進度很緊,專案裡的所有圖示都是用最平常的背景方案來實現。而為了要相容普通屏與retina屏的裝置,蘋果要求 每個背景圖都要以兩種尺寸存

(a.png和[email protected]),這讓設計師們增加了成本,因為他們每次都得出兩份背景圖示。

現在在web開發上, icon font技術

的應用很廣泛,它不僅在解決多解析度顯示問題上很有成效,而且在使用它的時候還能降低不少設計和開發成本。

那麼它能不能應用到ios開發上來呢?帶著這個疑問,我在github上找到了 fontasticicons

和 ios-fontawesome

,但是這兩個oc包對icon資源封裝都有限,而且擴充套件也不是很方便。

既然能在ios上使用icon font,那麼怎麼用呢?經過一番摸索,發現使用原理和自定義字型差不多,只有個別操作不太一樣,接下來我給大家詳細介紹一下。

在講icon font之前,首先先來看看普通自定義字型是如何在ios中使用的,兩個原理是一樣的。這裡以 kaushanscript-regular

為例:將字型檔案拖入專案(ios支援的字型格式有:.ttf、.otf,其他格式不確定):

然後再在專案的資源池中確認字型檔案是否加入專案,開啟xcode專案的build phases中檢視:

註冊完,我們需要檢測是否註冊成功且取得新字型名稱,檢測方法就是把所有安裝了的字型都列印出來,看看新註冊的字型是否在裡面:

for (nsstring* family in [uifont familynames]) 

}

執行完,檢視控制台裡列印出的所有字型集中是否有新註冊的字型,如果有,說明註冊成功,並將字型名(在這裡是「kaushan script」)記住留到後面用。

最後,就是使用你最新加入的字型啦:

uilabel *label = [[uilabel alloc] initwithframe:cgrectmake(10, 60, 300, 50)]; 

label.font = [uifont fontwithname:@"kaushan script" size:35]; 

label.text = @"icon font"; 

label.textcolor = uicolorfromrgb(0xff7300); 

[self.view addsubview:label];

效果:

圖示字型也是字型,使用方式和上面所說的差不多,只是在套用上有些差別;這裡拿 fontello的圖示字型庫

為例。使用 fontlab studio 5

工具開啟字型檔案(比如fontello.ttf),就可以看到圖示與unicode碼之間的對應關係啦。

在objective-c中,自定義的unicode碼需要以「\u0000e802」這樣的格式存在。

這裡還可以使用蘋果emoji表情庫的圖示,這裡不需要新加字型庫,只要找到emoji圖示和unicode之間的對應關係就好,但是這些圖示都不是向量圖,縮放請自重。

如果上面介紹的圖示庫還滿足不了你的需求,或者需要的圖示分布在多個圖示庫而不能集中到乙個字型檔案中;那麼你可能需要 自己去製作圖示字型

檔案了。

這樣,在ios開發上,不僅可以直接去開源圖示庫找現成的圖示用到專案中,而且還可以輕鬆地改變圖示的顏色、大小,相信可以解放不少設計師和工程師的工作量。

上**

demo

圖示字型庫

fontello

etao圖示字型庫

(這裡有個問題要注意,etao的圖示字型名為「untitled1」,是不是生成字型的同學疏忽啦?)

emoji表情庫

參考資料

icon font 實踐

fontasticicons

ios-fontawesome

custom unicode characters in objective-c

css3 icon font完全指南

阿里巴巴IOS開發內推面試

這是我的第一篇部落格,但並不是我的第一次面試。很久以前就想開始我的部落格之旅,但是一直給自己藉口,沒有什麼好寫的,下次可以一起寫,會寫的更好,更精彩。現在看來,並不是如此,有些人認為部落格是展示自己才華的地方 有些人認為部落格是給自己乙個交代 乙個寄託 有些人認為部落格是乙個可以和大家分享的平台,可...

阿里巴巴開發手冊

反例 string str start for int i 0 i 100 i 2 注意 math.random 這個方法返回是double型別,注意取值的範圍 0 x 1 能夠取到零值,注意除零異常 如果想獲取整數型別的隨機數,不要將x放大10的若干倍然後取整,直接使用random物件的nexti...

阿里巴巴Java開發手冊

一 程式設計規範 一 命名風格 1 類命名風格 首字母大寫,即uppercamelcase風格 2 方法名 引數名 成員變數 區域性變數都是用lowercamelcase風格 3 常量命名全部大寫 max count 4 定義整形陣列 int arraydemo 5 包名統一使用小寫 6 介面類中的...