如何在移動端app中應用字體圖標icon fonts （轉）

原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral

How to use icon fonts in your mobile apps

 

在任何APP設計中實現可圖形的矢量縮放最完美的方式是使用字體圖標.

 

移動端的設計變的愈來愈複雜。緣由在於多樣的屏幕尺寸與不一樣的分辨率。 Native版APP幾乎沒法提供像素級別完美的視覺體驗。

 

當咱們設計APP界面中各類圖標時，咱們不得不面臨兩方面，好的一面是，使用真實的icons，即便用像素設計出吸引用戶的交互界面，這樣的交互界面能更好的幫助用戶理解和使用你的APP，不太好的一面就是繁瑣乏味的「重複工做」。一旦你的傑做完成了，你得開始切片、組織、優化、適配等工做，在開發人員將你的視覺設計應用於不一樣設備中時，這些工做始終慣穿於每一個項目。

 

基本上我很是愛用像素圖標，但我最近發現我花太多時間在清理文件夾，尋找不一樣規格的目標設備。儘管市面上有衆多的插件幫你從單個圖片源導出成多種方案的圖標與圖形，追蹤優化各類分辨率、操做系統下圖片的優化是項能夠避免的苦差事兒。讓咱們看一看基於矢量的圖標字體(icon fonts)

 

利用Fontello網站的圖標字體生成器，咱們分分鐘就能夠生成一組圖標

 

Friends with benefits (炮友？)

---

當在設計產品UI時，咱們許多美工都儘可能不使用像素圖片，而更傾向於使用矢量圖，是有各類緣由的。舉個粟子，在一個須要快速變動需求又要求保質的的團隊中工做。保持文件大小的可維護，以及讓UI能適應各類尺寸屏幕，這些都是矢量圖形應用時的小功能。矢量圖形能讓你在一個長期的項目不會抓狂的渡過。

 

在面對自適應、加載時間或retina屏等問題時，基於矢量圖形的解決方案已成爲基本解決方案了，就像CSS效果，爲不一樣用戶設計高質量的WEB UI，因爲近期瀏覽器在自定義字體上的較好的支持，不少美工甚至將它們的icons作成web fonts，這同樣是基於矢量圖形好處理由。

 

 

做爲一名移動端的美工，花費了太多時間在切割、組織、打包圖形上，我曾好奇是否能夠在native的app上應用這項高級的web技術。

但願可以再也不關注分辨率、設備尺寸，真正關注於設計自己的工做,我決心使用圖標字體(icon fonts)來加強IOS和ANDROID APP的UI

 

 

在應用屬性列表內加載項目文件夾內用戶自定義字體

 

 

對於可縮放的自適應設計來說，Icon fonts是一種驚人的解決方案。

在開發native app時，你應該記住icon fonts技術有多項超過位圖的高級特性，這些特性所帶來的好處會影響你的設計工做流，以及產品的最終品質。

 

可縮放性（Scalability）：

基於字體的icon是與分辨率無關並能縮放到任何想要程度的技術。你的圖標看起來絕不關心retina,HDPI,XHDPI等等屏幕，但渲染時會根據目標設備自動調整，你將有能力應對任何當下，將來，或大多數任意規格的設備

 

尺寸（Size ）：

裁剪到正確的比例，icon font的文件的大小要比起位圖小到難以置信的程度，使用icon font時，你不須要根據不一樣設備準備不一樣的圖片，你的APP只須要在啓動時加載一次icon font文件便可。

 

可維護性（Maintainability）：

自你的icon打包進一個字體文件，在項目自始至終你僅須要維護這個單一的字體文件。

經過管理字體文件你能夠很天然的組織你的icon集合，任意的進行修改或擴展 

可推廣性（Adoption）：

然而，應用這樣的icon fonts可能會影響你和你同事之間的工做流程，但說服讓他們採用這樣的技術也很是簡單，有數款免費或收費的工具幫你輕鬆達到目的並能看到很好的應用結果，在幾乎任意（手機）移動平臺、瀏覽器或操做系統

 

靈活性（Flexibility）：

應用icon fonts技術中最有意義的一項能力是能夠操縱icon fonts， 改變顏色，大小，僅僅幾行代碼就能夠在瞬間改變外觀

 

可交互性(Interactivity)：

因爲靈活性以及可以經過代碼方便的操縱，icon fonts 是獨一無二的在運行時被操縱，經過應用icon fonts技術， 你能輕鬆的在不一樣狀態顯示對應的不一樣效果，建立動畫。

 

 

---

雖然icon fonts爲設計提供了衆多好處爲一些有趣的設計提供可能性，天然地，它也不是全權的解決方案。一旦你的設計中須要的顏色超過一種，實現複雜的視覺設計，icon font就有限制了。無認如何，主流與非主流的icon fonts都能在互聯網上找到，在咱們使用以前web設計界已經很流行了，並有不少服務幫你建立夢幻的icon fonts集合

 

經過xcode中的outlet connection, 在view呈現後，你還能很方便的改變label

 

 

 

 

Using icon fonts on iOS

在IOS中使用字體圖標

---

在IOS中應用icon font很是的簡單粗爆。在一開始你最好經過使用Fontello或IcoMoon收集一些圖標並整合進你的APP。另外一種方法是你本身花時間本身作出來，但創造性的工做的總要花掉你不少時間。

那麼如今咱們僅僅須要將獲得的icon整合進咱們的APP

 

你只須要懂得IOS開發基本的文件結構以及.tff後綴的字體文件icon font

爲了測試icon font技術，咱們在Xcode內新建一個 Single View Application的工程。工程建完後就把你的字體文件複製進工程目錄，若是不出什麼意外，你應該在你的 Project Navigator中看到對應的字體文件了

 

爲了讓Xcode理解你將要如何使用導入的文件，你得在你的應用程序的Info.plist內創建「連接」。這個plist文件在Supporting Files文件夾內，表現爲meta data便可理解爲hash表。爲了在編譯app時能包含進你的字體文件，在list上簡單新建一行（右鍵而後add row）名字選擇爲 Fonts provided by application，在其下給字體文件取個名字，名字就是你的應用程序中用來識別你的字體文件的。在咱們這個測試工程中，值爲fontello.ttf。如今Xcode知道了咱們導入的文件能幹什麼，咱們能在程序中使用導入的字體文件了

 

 

把你的app切換到storyboard模式，在view中你喜歡的地方放一個label組件用來顯示icon，在設置完label後，咱們須要創建一個outlet。

在storyboard中作這些事情都很簡單，在 Assistant Editor Mode模式下

 

此模式下顯示了你的圖形界面和ViewController界面。如今簡單的按住ctrl鍵，從label組件拖動就會現線條，直接拖線條到ViewController到@interface這行代碼上放開就會彈出一個小界面，輸入名稱，好比 iconLabel，outlet就建成了，代碼中你會發現多了下面這樣一行：

@property (weak, nonatomic) IBOutlet UILabel *iconLabel

如今你就能經過代碼來控制label組件了，經過編輯ViewController（.m後綴的文件）設置label。在viewDidload方法內加入如下幾行代碼，就像下面那樣

( void)viewDidLoad{ 
　　[super viewDidLoad]; 

　　[iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]]; 
　　[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]]; 
}

添加的第一條代碼用來定義字體應用於label並設置字號，這裏咱們設置了130pt

在使用這些命令時要注意字體名稱，這裏要填寫字體的真實名稱，即在字體簿打開的字體名或任何其它編輯器內能顯示的字體名稱。特別注意這點，由於字體名極可能與字體文件名稱不同

 

在第二行中文字用Unicode字符  Hammer and Pick (2692)編碼。

 

雖然有點神祕，獲取icon字體的unicode字符編碼仍是比較容易的。可使用字體編輯器，或者直接上傳到Icon Moon這類網站，你能夠絕不費力的將icon字體轉換成unicode編碼

 

你能夠經過Android XML 語法來申明任何你想要的UI屬性

 

Colours, gradients and shadows

如今icon「引用」已經創建，你都搞定了。在咱們經過代碼操做label前，你得先運行看看你的工做成果。最終，這也是你將icon字體合併進app所要作的。從如今開始有趣的事兒纔開始。文本的全部操做都由你掌控了，例如：顏色，透明度，漸變，陰影。

例如應用如下幾行代碼 ，讓icon變成紅色+陰影：

iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

有許多效果可使用。一些相對來講比較複雜，但全部文本效果都通用。動畫或任何複雜的操做只要你能想到的均可以作了

 

Using icon fonts on Android

在Android中應用字體圖標

---

 

一樣的，在開發Android應用時也同樣能使用icon fonts就像用在ios上面同樣，能獲得同樣的好處。

就應用範圍而言，Android更加有意思更有用。由於Android有着更多不一樣分辨率，不一樣屏幕的設備平臺。最重要的是Android默認不支持矢量圖形，這對開發者和設計人員面對不一樣Android設備時但是一個重大打擊

 

在開始開發你的新Android應用以前，你僅須要知道一個app最基本的文件構架，一樣的icon font文件也是.tff後綴，使用包含了Android ADT的Eclipse IDE，你能夠開始新建一個Blank Activity的Android Application Project。在項目設置後，複雜.tff文件到你的資源文件目錄內。一旦複製成功，Package Explorer面板內應該能看到

 

接下來，在你的Main Activity View內建立一個TextView。你能夠在layout文件夾內找到你的資源文件。文件名應該是 activity_main.xml。在多數狀況下，Android SDK已經將一個文本爲「Hello world」的TextView放到了你的View內，咱們就能使用這個TextView了。

在定義Icon各屬性後，你能在模擬器內看到你的icon了。

 

爲了操做TextView,咱們須要將圖形模式切換到切換到XML View內。如今爲TextView添加一個ID，以便接下來UI和代碼創建引用關係

你的TextView應該看起來像下面這樣

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/hello_world" 
 android:id="@+id/iconLabel" />

經過使用ID，咱們可以在APP內任何地方操做TextView。如今你能夠切換到MainActivity.java文件添加一些代碼來加載icon font了。在MainActivity內有一個方法名爲onCreate的方法。加載和應用icon fonts都在此方法內，以下

 

TextView iconLabel = (TextView) findViewById(R.id.iconLabel); 
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf"); 
iconLabel.setTypeface(font); iconLabel.setText("\u2692");

 

和上面的IOS例子很像，經過引用到label組件，咱們告訴Android應該使用哪一個自定義字體到TextView上面。以後幾行使用Unicode字符編碼，此次以JAVA方式而已。運行程序後你就能夠看到你的icon在Main Activity的View上了

在應用成功後，你能夠根據你的須要操做icon了。Android UI構建一般由interface builder或組織XML文件來實現，要添加一些效果，只要回到Main Activity的XML部分找到添加了Label ID的地方，添加一些代碼就可。例如添加如下代碼會讓你的icon變大，帶點透明的紅色，並伴有陰影。

android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />

有不少的效果能夠應用。就像在IOS中同樣，動畫或者複雜的操做都由你掌控了。最大的好處是自定義的icon fonts能夠普遍的適配各種操做系統。任何支持自定義icon fonts的平臺都容許你使用全新的這些效果

使用字體編輯器，你能優化現存的icons或解放你的思想讓你建立出本身的傑做