前情提要:公司不讓UI干重活,讓我自己找圖標(biāo)盲憎。然后推薦使用這個(gè)開(kāi)源庫(kù)嗅骄。優(yōu)質(zhì)Icon多到數(shù)不清,還可以隨意修改icon的顏色饼疙,大小溺森,使用起來(lái)略爽。簡(jiǎn)書(shū)和掘金上搜不到相關(guān)博客窑眯,踩了點(diǎn)坑屏积,凡事只能靠自己啊。
項(xiàng)目demo地址請(qǐng)點(diǎn)擊這里
一磅甩、添加依賴(lài)
compile "com.mikepenz:iconics-core:2.8.2@aar"
compile 'com.android.support:appcompat-v7:25.1.0'
二炊林、選擇需要依賴(lài)的圖標(biāo)庫(kù)
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'
每個(gè)圖標(biāo)庫(kù)都有自己的網(wǎng)站,可以在上面挑選自己喜歡的圖標(biāo)卷要,查找對(duì)應(yīng)的圖標(biāo)id
Font Awesome
ionicons
三渣聚、icon前綴和依賴(lài)庫(kù)對(duì)應(yīng)表
- Google Material Design Icons
"gmd"
ORIGINAL by Google compile 'com.mikepenz:google-material-typeface:+.original@aar' - Material Design Iconic Font
"gmi"
Google Material Iconic compile 'com.mikepenz:material-design-iconic-typeface:+@aar' - Fontawesome
"faw"
compile 'com.mikepenz:fontawesome-typeface:+@aar' - Meteocons
"met"
compile 'com.mikepenz:meteocons-typeface:+@aar' - Octicons
"oct"
compile 'com.mikepenz:octicons-typeface:+@aar' - Community Material
"cmd"
compile 'com.mikepenz:community-material-typeface:+@aar' - Weather Icons
"wic"
compile 'com.mikepenz:weather-icons-typeface:+@aar' - Typeicons
"typ"
compile 'com.mikepenz:typeicons-typeface:+@aar' - Entypo
"ent"
compile 'com.mikepenz:entypo-typeface:+@aar' - Devicon
"dev"
compile 'com.mikepenz:devicon-typeface:+@aar' - Foundation Icons
"fou"
compile 'com.mikepenz:foundation-icons-typeface:+@aar' - Ionicons
"ion"
compile 'com.mikepenz:ionicons-typeface:+@aar'
四、以Drawable方式使用(在代碼中動(dòng)態(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文件中使用
- 使用開(kāi)源庫(kù)自定義的控件
<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"/>
- 使用普通控件(需要注冊(cè))
有兩種方法 - 在onCreate函數(shù)中加入代碼
@Override
protected void onCreate(Bundle savedInstanceState) {
LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));
super.onCreate(savedInstanceState);
}
- 重寫(xiě)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"
/>
六奕枝、這里有一個(gè)坑
在所有步驟都正確完成后,AS還是會(huì)紅線報(bào)錯(cuò)
翻遍了issues彪标,有說(shuō)把
xmlns:app="http://schemas.android.com/apk/res-auto"
改成
xmlns:app="http://schemas.android.com/apk/tool"
然而并沒(méi)有軟用倍权。
https://github.com/mikepenz/Android-Iconics/issues/174
看到了這個(gè)issue,直接添加
Iconics.init(getApplicationContext());
Iconics.registerFont(new GoogleMaterial());
//注:應(yīng)該和 LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));作用類(lèi)似
然后報(bào)著試一試的心態(tài)捞烟,直接運(yùn)行薄声,竟然可以!果然是我太年輕么L饣D妗!
七苍息、總結(jié)
使用起來(lái)實(shí)在是方便缩幸,對(duì)比阿里的Iconfont。Icon質(zhì)量也挺不錯(cuò)竞思。
Android-Iconics庫(kù)的地址
還有一個(gè)類(lèi)似的庫(kù)Android-Iconify的庫(kù)地址 表谊。