android使用font awesome替代簡單的表徵圖

標籤：android   顯示   表徵圖   

在android開發中，往往會有大量的小表徵圖，可是android介面與html是不同的，比如html中，可以將大量的小表徵圖製作成雪碧圖，這樣會大量的減少http的請求次數，對於效能也是有很大的提升，而在android中，一般對於na本身tive app的小表徵圖一般是用來做顯示用的，都會內嵌到 應用 ，兩者也沒有什麼可比性，不過如果android應用中有大量的小表徵圖，無形中就增加了apk的檔案大小，這個時候就到了font awesome出場了。

什麼是font awesome

font awesome是一個專為Bootstrap設計的字型檔，我們可以通過向顯示字型一樣方便的顯示我們想要顯示的表徵圖檔案。對於android來講，可以使用字型來代替部分需要顯示的小圖片，並且在這些字型中的圖片都是向量圖，是可以放大和縮小的，這就意味著每個表徵圖都能在所有大小的螢幕上完美呈現。好了，廢話不多說，直接進入正題吧。

在android上使用font awesome1.下載font awesome

2.解壓下載的壓縮包

將fonts目錄下的fontawesome-webfont.ttf檔案拷貝到asset檔案夾下

3.編寫string.xml

首先需要編寫string.xml檔案，需要去http://fortawesome.github.io/Font-Awesome/cheatsheet/串連下尋找自己想要的字型表徵圖對應的字串。

<string name="heard">&#xf004;</string><string name="fa_google_plus">&#xf0d5;</string><string name="fa_save">&#xf0c7;</string><string name="fa_thumbs_o_up">&#xf087;</string><string name="fa_toggle_on">&#xf205;</string>

這裡每一個string中的值就是需要顯示的表徵圖對應的值，name的值可以隨便給一個，不過一般都是一個有意義的名稱。

4.編寫布局

在textview中使用該字串，就可以顯示其對應的表徵圖了，這裡就替換了之前使用imageview來顯示小表徵圖了。方便了很多。

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center_horizontal"    android:padding="50dp"    tools:context=".MainActivity" >    <TextView        android:id="@+id/test_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/heard"        android:textAppearance="?android:attr/textAppearanceLarge"        android:textColor="#Ff9834"        android:textSize="30sp" />    <TextView        android:id="@+id/fa_google_plus"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/fa_google_plus"        android:textAppearance="?android:attr/textAppearanceLarge"        android:textColor="#87619a"        android:textSize="50sp" />    <TextView        android:id="@+id/fa_thumbs_o_up"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/fa_thumbs_o_up"        android:textAppearance="?android:attr/textAppearanceLarge"        android:textColor="#976523"        android:textSize="60sp" />    <TextView        android:id="@+id/fa_save"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/fa_save"        android:textAppearance="?android:attr/textAppearanceLarge"        android:textColor="#954278"        android:textSize="40sp" />    <TextView        android:id="@+id/fa_toggle_on"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/fa_toggle_on"        android:textAppearance="?android:attr/textAppearanceLarge"        android:textColor="#273896"        android:textSize="50sp" /></LinearLayout>

可以發現，這裡我們可以自訂該表徵圖的顏色和大小，這樣在不同的螢幕適配也是極好的，很方便。

5.代碼中引用

首先找到asset下對應的.ttf檔案

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

然後只需要為每一個textView setTypeface(font)即可。

((TextView)findViewById(R.id.fa_google_plus)).setTypeface(font);

顯示效果如下：

雖然font awesome有諸多優點，但是還是不得不提其表徵圖數量還是那麼的有限，我們很難找到從其身上所有的需要的表徵圖。全當一個瞭解吧，這也是其還沒有在本地應用流行起來的原因吧，不過對於web app這是一個很好的創新，尤其是使用bootstrap編寫出來的web頁面，同樣可以在手機的瀏覽器上訪問。這種自適應的布局，真正達到了pc和手機同時可以訪問的目的。

源碼下載

android使用font awesome替代簡單的表徵圖