震驚!Icon使用極其簡單? Android-Iconics 開源庫介紹

前情提要:公司不讓UI干重活,讓我自己找圖標。然后推薦使用這個開源庫。優(yōu)質(zhì)Icon多到數(shù)不清,還可以隨意修改icon的顏色,大小,使用起來略爽。簡書和掘金上搜不到相關博客,踩了點坑,凡事只能靠自己啊。

項目demo地址請點擊這里

一、添加依賴

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

compile 'com.android.support:appcompat-v7:25.1.0'

二、選擇需要依賴的圖標庫

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.8.36.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'    

每個圖標庫都有自己的網(wǎng)站,可以在上面挑選自己喜歡的圖標,查找對應的圖標id
Font Awesome
ionicons

已Font Awesome 為例

三、icon前綴和依賴庫對應表

  1. Google Material Design Icons
    "gmd"
    ORIGINAL by Google compile 'com.mikepenz:google-material-typeface:+.original@aar'
  2. Material Design Iconic Font
    "gmi"
    Google Material Iconic compile 'com.mikepenz:material-design-iconic-typeface:+@aar'
  3. Fontawesome
    "faw"
    compile 'com.mikepenz:fontawesome-typeface:+@aar'
  4. Meteocons
    "met"
    compile 'com.mikepenz:meteocons-typeface:+@aar'
  5. Octicons
    "oct"
    compile 'com.mikepenz:octicons-typeface:+@aar'
  6. Community Material
    "cmd"
    compile 'com.mikepenz:community-material-typeface:+@aar'
  7. Weather Icons
    "wic"
    compile 'com.mikepenz:weather-icons-typeface:+@aar'
  8. Typeicons
    "typ"
    compile 'com.mikepenz:typeicons-typeface:+@aar'
  9. Entypo
    "ent"
    compile 'com.mikepenz:entypo-typeface:+@aar'
  10. Devicon
    "dev"
    compile 'com.mikepenz:devicon-typeface:+@aar'
  11. Foundation Icons
    "fou"
    compile 'com.mikepenz:foundation-icons-typeface:+@aar'
  12. Ionicons
    "ion"
    compile 'com.mikepenz:ionicons-typeface:+@aar'

四、以Drawable方式使用(在代碼中動態(tài)替換圖片)

new IconicsDrawable(this)
.icon(FontAwesome.Icon.faw_android) //icon Id
.color(Color.RED)
.sizeDp(24) //icon 大小 dp值

private void initView() {
        final CheckBox cb_icon = (CheckBox) findViewById(R.id.cb_icon);
        int themeColor = getResources().getColor(R.color.colorAccent);
        int blackColor = getResources().getColor(R.color.black);
        int sizeDp = 20;
        final Drawable drawable = new IconicsDrawable(this)
                .icon(FontAwesome.Icon.faw_ticket).color(themeColor).sizeDp(sizeDp);
        final Drawable drawableDis = new IconicsDrawable(this).icon(FontAwesome.Icon.faw_angle_right).color(blackColor).sizeDp(sizeDp * 2);
        cb_icon.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked)
                    cb_icon.setCompoundDrawables(null, drawable, null, null);
                else {
                    cb_icon.setCompoundDrawables(null, drawableDis, null, null);
                }
            }
        });
        cb_icon.setChecked(true);
    }

五、直接在XML文件中使用

  1. 使用開源庫自定義的控件
<com.mikepenz.iconics.view.IconicsImageView
           android:id="@+id/iconicsImageView"
           android:layout_width="72dp"
           android:layout_height="72dp"
           android:layout_gravity="center"
           app:iiv_icon="@string/gmd_ac_unit"
           app:iiv_color="@color/colorPrimary"
           app:iiv_size="36dp"
           />
       <com.mikepenz.iconics.view.IconicsTextView
           android:text="abc{ion-ios-cloud-upload}defgh{faw-adjust}ijk{ion-ios-cloud-upload}"
           android:textColor="@android:color/holo_red_dark"
           android:layout_width="wrap_content"
           android:layout_height="56dp"
           android:textSize="16sp"/>
       <com.mikepenz.iconics.view.IconicsButton
           android:text="{faw-adjust} Button"
           android:layout_width="120dp"
           android:layout_height="60dp"/>

  1. 使用普通控件(需要注冊)
    有兩種方法
  2. 在onCreate函數(shù)中加入代碼
@Override
protected void onCreate(Bundle savedInstanceState) {
  LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
  super.onCreate(savedInstanceState);
}
  1. 重寫attchBaseContext函數(shù)
@Override
protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(IconicsContextWrapper.wrap(newBase));
}

然后就可以使用了

<ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:ico_color="@color/black"
            app:ico_icon="ion_ios_eye"
            android:layout_marginRight="15dp"
            app:ico_size="30dp"
            />

六、這里有一個坑

在所有步驟都正確完成后,AS還是會紅線報錯


翻遍了issues,有說把

xmlns:app="http://schemas.android.com/apk/res-auto"
改成
xmlns:app="http://schemas.android.com/apk/tool"
然而并沒有軟用。

https://github.com/mikepenz/Android-Iconics/issues/174
看到了這個issue,直接添加

Iconics.init(getApplicationContext());
Iconics.registerFont(new GoogleMaterial());

//注:應該和 LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));作用類似

然后報著試一試的心態(tài),直接運行,竟然可以!果然是我太年輕么!!!

七、總結

使用起來實在是方便,對比阿里的Iconfont。Icon質(zhì)量也挺不錯。
Android-Iconics庫的地址
還有一個類似的庫Android-Iconify的庫地址

參考

http://blog.csdn.net/cuipp0509/article/details/60778152

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容