1. 程式人生 > >安卓中如何使用iconfont字型圖示

安卓中如何使用iconfont字型圖示

優點: 

      1. 可以高度自定義圖示的樣式(包括大小和顏色),對於個人開發者尤其適用 

      2. 可以減少專案和安裝包的大小(特別你的專案中有很多圖片icon時,效果將是M級) 

      3. 幾乎可以忽略螢幕大小和解析度,做到更好的適配

      4. 使用簡單 

      …… 

缺點: 
      1. 只能是一些簡單的icon,不能代替如背景圖、9圖等資源 

      2. 一些需要文字說明的icon,圖片資源將會是更好的選擇 

      3. 對設計的要求更高,不同icon可能擁有不同的邊距,這時要切換icon時還要設定大小 

      4. 由於邊距的存在可能存在無法填滿控制元件的情況 

      5. 無法在Android studio中進行實時預覽

iconfont對於客戶端應用來說有很多便捷:

      1、自由變化大小

      2、自由修改顏色

      3、可以新增一些視覺效果如:陰影、旋轉、透明度。

      4、比單位的圖片更節省資源

操作步驟

第一步:.首先去http://www.iconfont.cn/圖示庫選擇自己要用的圖示下載,下載後得到個壓縮檔案並解壓,最後得到一個壓縮檔案,解壓後得到如下檔案,其實我們需要的只有兩個,就是我框出的那兩個檔案
有一些不是你下載,你不知道unicode的圖示可以下載 Fontlab stadio 這個軟體去檢視對應的unicode
第二步開啟 res/values/strings.xml,新增 string 值;
<string name="icon">&#xe616</string>
第三步開啟 activity_main.xml,新增 string 值到 TextView:在這裡你可以調整圖示的大小,顏色
<TextView
  android:id="@+id/text"
  android:textColor="@color/colorPrimary"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/icon" />

第四步:在MainActivity為 TextView 指定字型圖示
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 
  Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
  TextView textview = (TextView)findViewById(R.id.text);
  textview.setTypeface(iconfont);
}

效果如下圖所示: 圖示原來是灰色,這裡我指定了是藍色
就是這麼簡單完事。但是我們發現在activity程式碼中setTypeface很沒有必要。因為我們整個應用有很多頁面都需要設定字型圖示時,這樣設定會有很多,垃圾程式碼產生。這時我們可以用一個簡單的自定義view去繼承TextView就解決問題,程式碼如下
public class IconView extends TextView {
    public IconView(Context context) {
        super(context);

    }


    public IconView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        Typeface typeface = Typeface.createFromAsset(context.getAssets(),"iconfont.ttf");
        setTypeface(typeface);
    }
然後在佈局檔案中使用這個自定義View即可
<com.example.wpschen.myapplication.IconView
        android:id="@+id/text"
        android:textSize="20sp"
        android:textColor="@color/colorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/icon" />

最後提一個我遇到的小問題,最開始我下載的圖示的unicode是&#xe1517 總共是8位數,但每次一執行就崩潰,會報這樣的錯誤
03-01 17:12:41.020 4970-4970/com.example.wpschen.myapplication E/dalvikvm: Could not find class 'android.graphics.drawable.RippleDrawable', referenced from method android.support.v7.widget.AppCompatImageHelper.hasOverlappingRendering
03-01 17:12:41.055 4970-4970/com.example.wpschen.myapplication E/dalvikvm: VM aborting
03-01 17:12:41.055 4970-4970/com.example.wpschen.myapplication A/libc: Fatal signal 6 (SIGABRT) at 0x0000136a (code=-6), thread 4970 (n.myapplication)


最後又換了一個圖示資源,unicode是常見的7位數,這樣才得以解決,但至於8位數unicode的為什麼造成崩潰,百度好多也沒有什麼好的解決辦法,如果你看到這裡,你也可以去嘗試解決一下然後告訴我阿~