前言

之前的一篇文章《【Android 進階】SVG 的使用以及繪製動畫》簡單介紹了 SVG 圖片的好處以及如何在 Android 中使用 SVG 圖片。本文接着介紹下如何在 Android 中使用阿里巴巴 Iconfont 平臺的圖片，方便我們日常的開發。

SVG to VectorDrawable

從阿里巴巴矢量圖庫 Iconfont 可以下載 SVG 形式的圖片，導入 AS 中就轉爲了 VectorDrawable 形式的圖片文件。如果不瞭解的可以看回我上一篇文章《【Android 進階】SVG 的使用以及繪製動畫》。

但是每次都需要下載 SVG 文件，再通過 AS 導入，也許算是挺麻煩的一件事情。現在推薦一個好工具，就是 SVG to VectorDrawable，顧名思義，就是一個把 SVG 文件轉爲 VectorDrawable 文件的工具。

只需要把 SVG 文件粘貼進去，該工具就會自動幫你轉爲 VectorDrawable 文件。最後你只需要在 AS 中新建個文件，然後粘貼轉換後的 VectorDrawable 文件內容就去即可。當然，可能你覺得這樣並不方便，那就見仁見智了。

網址：http://inloop.github.io/svg2android/

使用 Iconfont 製作“圖片”字體文件

優點：

更方便的使用 SVG 圖片
把圖標當成字符使用，大小和顏色都可以隨意改。

製作步驟

step1:

從 iconfont 平臺選擇要使用到的圖標（如圖），並下載（選擇下載代碼）至本地；複製字體文件到項目 assets 目錄；

step2:

打開下載下來的文件，並在目錄中打開 demo_unicode.html，找到圖標相對應的 HTML 實體字符碼

step3:

打開 res/values/strings.xml，把 demo_unicode.html 各個圖標的字符嗎添加到 string 值；

如：

<string name="all">&#xe696;</string>
<string name="back">&#xe697;</string>
<string name="cart">&#xe698;</string>
<string name="category">&#xe699;</string>
<string name="close">&#xe69a;</string>
<string name="comments">&#xe69b;</string>
<string name="cry">&#xe69c;</string>

step4:

比如使用圖標 cart，
打開 activity_main.xml，添加 string 值到 TextView：

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

對該 TextView 設置顏色、大小就等同於給圖標 cart 設置顏色、大小。而且還不用考慮分辨率問題。

step5:

爲 TextView 指定字體庫：

import android.graphics.Typeface; 
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.like);
    textview.setTypeface(iconfont);
}

通過以上 5 步，就可以實現目的了。但如果你還是覺得不夠方便，那麼看下面這個第三方庫吧！

引入 Android-Iconics

以上有點麻煩：使用第三方庫:Android-Iconics 吧。
原理和之前講的一樣，只是把過程封裝了起來。

github

https://github.com/mikepenz/Android-Iconics

這個庫的好處：

意思就是可以使用不同的 icons 在不同的大小，不同的顏色以及不同的分辨率條件下已依然表現出色。

What do you get

No customization limitations (size, color, contour, background, padding, positioning, …)
One icon source (no more mdpi, hdpi, …)
Flexibility
If it takes a Drawable, it will also work with the IconicsDrawable!
Save in APK size
All licenses included, best used with AboutLibraries

相信上面的特色大家都看的懂，我也就不翻譯了

Already available fonts

Google Material Design Icons
Material Design Iconic Font
Fontawesome
Meteocons
Octicons
Community Material
Weather Icons
Typeicons
Entypo
Devicon
Foundation Icons
Ionicons

可用的字體圖標風格庫。

更多詳細的介紹請看官方介紹哈。

如何使用？

如何使用這個第三方庫呢，其實 github 上的介紹已經非常簡單清楚了，大家可以根據上面的介紹一步一步的使用此庫。

這裏簡單的記錄下使用步驟：

step1:添加 gradle 依賴

compile "com.mikepenz:iconics-core:2.8.4@aar"

step2:選擇字體庫(添加一個喜歡的字體依賴庫就可以了)

compile 'com.mikepenz:google-material-typeface:3.0.1.0.original@aar'
compile 'com.mikepenz:material-design-iconic-typeface:2.2.0.2@aar'
compile 'com.mikepenz:fontawesome-typeface:4.7.0.0@aar'
compile 'com.mikepenz:octicons-typeface:3.2.0.2@aar'
compile 'com.mikepenz:meteocons-typeface:1.1.0.2@aar'
compile 'com.mikepenz:community-material-typeface:1.9.32.1@aar'
compile 'com.mikepenz:weather-icons-typeface:2.0.10.2@aar'
compile 'com.mikepenz:typeicons-typeface:2.0.7.2@aar'
compile 'com.mikepenz:entypo-typeface:1.0.0.2@aar'
compile 'com.mikepenz:devicon-typeface:2.0.0.2@aar'
compile 'com.mikepenz:foundation-icons-typeface:3.0.0.2@aar'
compile 'com.mikepenz:ionicons-typeface:2.0.1.2@aar'

step3：onCreate 中使用 LayoutInflaterCompat（不太懂，但是得這樣做）

Set the IconicsLayoutInflater as new LayoutInflaterFactory. This will enable automatic icon detection for TextViews,Buttons, and allow you to set icons on ImageView’s via xml. This is compatible with libs which wrap the baseContext like Calligraphy. This does not work on FAB’s please use the Context-Injection instead.（官方介紹）

@Override
protected void onCreate(Bundle savedInstanceState) {
    LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
    //...
    super.onCreate(savedInstanceState);
    //...
}

step4：實際使用：代碼方式

官方提供了很多實現方式，這裏只介紹一種，其他的感興趣可以去 github 上看。

 Drawable drawable =  new IconicsDrawable(this)
               .icon(FontAwesome.Icon.faw_android)
               .color(Color.RED)
               .sizeDp(24)

//可以隨意設置顏色、大小、圖標（圖標庫中的圖標）

自定義的字體庫

其實就是換字體庫的意思，下面說說怎麼自定義自己的字體文件。
主要的思路就是參考第三方框架寫自己的自定義 Iconfont，
還是用上面例子中所下載的字體文件作爲自己的自定義字體文件庫。

按照 github 介紹可以分爲以下幾個步驟：

step1:實現 ITypeface 接口，自定義 Font 類


public class CustomFont implements ITypeface {

    private static final String TTF_FILE = "iconfont.ttf";
    private static Typeface typeface = null;
    private static HashMap<String, Character> mChars;


    @Override
    public IIcon getIcon(String key) {
        return Icon.valueOf(key);
    }

    @Override
    public HashMap<String, Character> getCharacters() {
        if (mChars == null) {
            HashMap<String, Character> aChars = new HashMap<String, Character>();
            for (Icon v : Icon.values()) {
                aChars.put(v.name(), v.character);
            }
            mChars = aChars;
        }
        return mChars;
    }

    @Override
    public String getMappingPrefix() {
        return "custom";
    }

    @Override
    public String getFontName() {
        return "CustomFont";
    }

    @Override
    public String getVersion() {
        return "1.0.0";
    }

    @Override
    public int getIconCount() {
        return mChars.size();
    }

    @Override
    public Collection<String> getIcons() {
        Collection<String> icons = new LinkedList<String>();
        for (Icon value : Icon.values()) {
            icons.add(value.name());
        }
        return icons;
    }

    @Override
    public String getAuthor() {
        return "www.blog.csdn.net/leaf_130";
    }

    @Override
    public String getUrl() {
        return "http://blog.csdn.net/leaf_130";
    }

    @Override
    public String getDescription() {
        return "The premium icon font for Ionic Framework.";
    }

    @Override
    public String getLicense() {
        return "MIT Licensed";
    }

    @Override
    public String getLicenseUrl() {
        return "http://blog.csdn.net/leaf_130";
    }

    @Override
    public Typeface getTypeface(Context context) {
        if (typeface == null) {
            try {
                typeface = Typeface.createFromAsset(context.getAssets(),   TTF_FILE);
            } catch (Exception e) {
                return null;
            }
        }
        return typeface;
    }

    public enum Icon implements IIcon {


        //這裏枚舉兩個圖標
        custom_all('\ue696'),
        custom_back('\ue697');


        char character;

        Icon(char character) {
            this.character = character;
        }

        public String getFormattedName() {
            return "{" + name() + "}";
        }

        public char getCharacter() {
            return character;
        }

        public String getName() {
            return name();
        }

        // remember the typeface so we can use it later
        private static ITypeface typeface;

        public ITypeface getTypeface() {
            if (typeface == null) {
                typeface = new CustomFont();
            }
            return typeface;
        }
    }


}

step2:自定義 Application 類（別忘了在配置文件配置）

public class MyApplication extends Application {


    @Override
    public void onCreate() {
        super.onCreate();


        //only required if you add a custom or generic font on your own
        Iconics.init(getApplicationContext());

        //register custom fonts like this (or also provide a font definition file)
        Iconics.registerFont(new CustomFont());
    }
}

step3:代碼中使用

public class IconActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_icon);


        Drawable drawable =  new IconicsDrawable(this)
                .icon(CustomFont.Icon.custom_all)
                .color(Color.BLACK)
                .sizeDp(50);


        ((ImageView)this.findViewById(R.id.img)).setImageDrawable(drawable);

    }
}

到這裏已經實現了自定義 Iconfont 圖標的所有步驟。更多使用方式請看 Github 上作者給出的詳細說明文檔吧。

遇到的問題

自定義的 CustomFont，代碼中使用 ok,但是 xml 中使用不太行，暫時沒找到解決方法，可能是我使用出了問題，也可能是這個庫本身有點小 bug.

總結

上面論述了這麼多，現在應該做個總結了，不然很快就忘了什麼是 SVG ,什麼是 Iconfont 圖標。

SVG 就是拉伸不影響像素的一種特殊的矢量圖，對頁面適配的支持性很強。使用阿里巴巴矢量圖庫 Iconfont 網站下載的圖標字體文件，在 Android 中使用將大大節省開銷，因爲 15 個圖標的字體文件才 12k 左右。而之前的開發中一張圖片就上百 k，可謂大大降低了 apk 的大小。另外，使用字體文件的圖標，可以隨意設置大小、顏色等屬性，還能保證圖片的高保真度，而不會出現其他問題。

題外話

歡迎關注我的微信公衆號，不只是原創技術分享，還更多的是對生活的思考與總結。

轉自:https://blog.csdn.net/leaf_130/article/details/71725937

【Android 進階】Iconfont 圖標的使用以及自定義

前言

SVG to VectorDrawable

使用 Iconfont 製作“圖片”字體文件

優點：

製作步驟

step1:

step2:

step3:

step4:

step5:

引入 Android-Iconics

github

這個庫的好處：

What do you get

Already available fonts

如何使用？

step1:添加 gradle 依賴

step2:選擇字體庫(添加一個喜歡的字體依賴庫就可以了)

step3：onCreate 中使用 LayoutInflaterCompat（不太懂，但是得這樣做）

step4：實際使用：代碼方式

自定義的字體庫

step1:實現 ITypeface 接口，自定義 Font 類

step2:自定義 Application 類（別忘了在配置文件配置）

step3:代碼中使用

遇到的問題

總結

題外話

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

記錄 Android WebView 開發過程的坑和解決方法

Android開源項目集合(不斷更新)

最全Android 學習渠道分享

android高仿微信表情輸入與鍵盤輸入(詳細實現分析)

BaseAnimation是基於開源的APP,致力於收集各種動畫效果(最新版本1.3)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結