Android 如何應用ttf圖示字型庫

LeBron_Six發表於2016-11-10
Android

轉載請註明出處：http://blog.csdn.net/yyh352091626/article/details/53113677

作為一個Android開發者，自己想做一個app練手，有個比較頭疼的問題就是沒有UI圖示資源~~ 其實很容易搞定的，下面就來聊聊如何在Android中應用圖示字型庫，找圖示不再糾結！
這裡寫圖片描述

圖示庫傳送門：https://icomoon.io/app/#/select

1、點選左上角選單 -> Manager Projects 進入管理頁面。
這裡寫圖片描述

2、點選New Project, 建立一個工程，如First App並點選Load>
這裡寫圖片描述

3、點選Add Icon From Libray，去選擇自己喜歡的Library，點選+Add新增到工程裡面。Library有收費的，也有免費的，視情況而定。
這裡寫圖片描述

這裡寫圖片描述

4、轉到資源頁面。選擇自己想要下載的圖示，怎麼都是灰色的？安啦，後面有驚喜！
這裡寫圖片描述

5、點選右下角Generate Font，生成ttf字型庫。
這裡寫圖片描述

上面四個圖示就是我前面選中的，下面的諸如e911文字就是圖示對應的unicode符號，中文字型也是這麼一個道理。點選download下載字型庫。
這裡寫圖片描述

6、下載完成，解壓。拷貝fonts/icomoon.ttf 到 android-assets/fonts 下面。
這裡寫圖片描述

7、應用字型。首先建一個字型“對映”類，反正官方不太推薦用列舉方式，暫且就用註解吧~~ 開啟剛才解壓包裡面的demo.html，對應來建立字型對映。

import android.support.annotation.StringDef;

/**
 * @author yuyh.
 * @date 2016/11/10.
 */
@StringDef({
        MDFonts.HOME,
        MDFonts.NEWSPAPER,
        MDFonts.MUSIC,
        MDFonts.PLAY
})
public @interface MDFonts {

    String HOME = "\ue902";

    String NEWSPAPER = "\ue904";

    String MUSIC = "\ue911";

    String PLAY = "\ue912";
}
import android.content.Context;
import android.graphics.Typeface;
import android.widget.TextView;

/**
 * @author yuyh.
 * @date 2016/11/10.
 */
public class MDFontsUtils {

    public static Typeface OCTICONS;

    /**
     * Get octicons typeface
     *
     * @param context
     * @return octicons typeface
     */
    public static Typeface getOcticons(final Context context) {
        if (OCTICONS == null)
            OCTICONS = getTypeface(context, "fonts/icomoon.ttf");
        return OCTICONS;
    }

    /**
     * Set octicons typeface on given text view(s)
     *
     * @param textViews
     */
    public static void setOcticons(final TextView... textViews) {
        if (textViews == null || textViews.length == 0)
            return;

        Typeface typeface = getOcticons(textViews[0].getContext());
        for (TextView textView : textViews)
            textView.setTypeface(typeface);
    }

    /**
     * Get typeface with name
     *
     * @param context
     * @param name
     * @return typeface
     */
    public static Typeface getTypeface(final Context context, final String name) {
        return Typeface.createFromAsset(context.getAssets(), name);
    }
}

9、圖示對應是用TextView表示，而不是ImageView。如下：

 <TextView
      android:id="@+id/tvMusic"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      android:textSize="16dp" />

  <TextView
      android:id="@+id/tvHome"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      android:textSize="16dp" />

在Java中應用字型。如下：

tvMusic = (TextView) findViewById(R.id.tvMusic);
tvMusic.setText(MDFonts.MUSIC);

tvHome = (TextView) findViewById(R.id.tvHome);
tvHome.setText(MDFonts.HOME);

// 應用字型
MDFontsUtils.setOcticons(tvMusic, tvHome);

run起來，大功告成！
這裡寫圖片描述

10、你會發現，run起來圖示顏色全是Android預設的灰色，那麼怎麼更改圖示顏色呢？剛才說了，圖示字型用的是TextView，實際上他跟中文英文字型沒什麼兩樣，他本質上還是文字。所以，TextView怎麼設定字型大小、字型顏色，這裡就對應怎麼設定。如下：

tvHome.setTextColor(Color.RED);
tvHome.setTextSize(50);

這裡寫圖片描述

哈哈，沒毛病！

當然，也可以把字型符號配置在string.xml

<string name="icon_home" translatable="false">\ue902</string>
<TextView
    android:id="@+id/tvHome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:textSize="16dp"
    android:text="@string/icon_home" />

// 當然，還需要下面這步來應用設定
MDFontsUtils.setOcticons(tvHome);

更多用法大家就自行擴充套件吧！比如可以自定義一個TextView，直接應用字型，就不需要MDFontsUtils.setOcticons(tvHome); 這步操作了，自己用就可以啦！

感謝閱讀！

相關文章