Android iconify 使用詳解
android-iconify 使用詳解 ,下文圖文并茂給大家介紹的非常詳細(xì),具體內(nèi)容詳情請(qǐng)參考下文。

1、android-iconify簡(jiǎn)介
- iconify的github地址:https://github.com/JoanZapata/android-iconify
- 項(xiàng)目地址:http://joanzapata.com/android-iconify
- iconify是一個(gè)矢量圖標(biāo)庫,包含使用 Dave Gandy 制作的超過370中矢量字體圖標(biāo),可以使Android應(yīng)用開發(fā)者免于制作多種適用于不同屏幕大小尺寸的圖片,從而提高開發(fā)者工作效率。
- 適用場(chǎng)景:
1、iconify原作者提供了三種他自定義的控件:IconTextView、IconButton、IconToggleButton,可以直接使用這三類控件來顯示iconify中提供的字體圖標(biāo);
2、在java代碼中通過使用一個(gè)IconDrawable為具有setIcon(Drawable drawable)方法的控件設(shè)置該字體圖標(biāo)
- 優(yōu)點(diǎn):由于這些圖標(biāo)均是矢量字體圖標(biāo),所以不僅可以無限放大而不會(huì)失真,模糊,而且可以將適用于text的屬性應(yīng)用于這些矢量圖標(biāo)上,從而實(shí)現(xiàn)改變圖標(biāo)顏色、添加陰影等效果
- 缺點(diǎn):目前在xml文件中使用圖標(biāo)庫中的資源時(shí),需要自己對(duì)照查閱不同圖標(biāo)所對(duì)應(yīng)的標(biāo)記,自己手敲標(biāo)記,這樣不僅麻煩,而且容易出錯(cuò)。
2、使用android-iconify
2.1 添加依賴
在需要使用iconify的app的build.gradle的dependencies中添加依賴(下面添加了整個(gè)庫,在實(shí)際開發(fā)過程中,可以只添加自己需要的某一個(gè)或幾個(gè)庫即可):
dependencies {
compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.2.2' // (v4.5)
compile 'com.joanzapata.iconify:android-iconify-entypo:2.2.2' // (v3,2015)
compile 'com.joanzapata.iconify:android-iconify-typicons:2.2.2' // (v2.0.7)
compile 'com.joanzapata.iconify:android-iconify-material:2.2.2' // (v2.0.0)
compile 'com.joanzapata.iconify:android-iconify-material-community:2.2.2' // (v1.4.57)
compile 'com.joanzapata.iconify:android-iconify-meteocons:2.2.2' // (latest)
compile 'com.joanzapata.iconify:android-iconify-weathericons:2.2.2' // (v2.0)
compile 'com.joanzapata.iconify:android-iconify-simplelineicons:2.2.2' // (v1.0.0)
compile 'com.joanzapata.iconify:android-iconify-ionicons:2.2.2' // (v2.0.1)
}
2.2 初始化android-iconify
自定義一個(gè)繼承自Application類的類:
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Iconify
.with(new FontAwesomeModule())
.with(new EntypoModule())
.with(new TypiconsModule())
.with(new MaterialModule())
.with(new MaterialCommunityModule())
.with(new MeteoconsModule())
.with(new WeathericonsModule())
.with(new SimpleLineIconsModule())
.with(new IoniconsModule());
}
}
2.3 配置Application
<application android:name="com.application.MyApplication" android:icon="@mipmap/ic_launcher" android:label="@string/app_name">
2.4 在布局文件中的使用
其中fa xxx 是Font Awesome的圖標(biāo)庫。icon-scan icon-wx-pay 是自定義阿里圖標(biāo)庫
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="100dp"
android:layout_marginTop="30dp"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/id_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example delegate"
tools:ignore="HardcodedText" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#22000000"
android:shadowDx="0"
android:shadowDy="5"
android:shadowRadius="1"
android:text="Welcome {fa-smile-o} {fa-hand-peace-o} !"
android:textColor="#2A9BDA"
android:textSize="30sp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#22000000"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="1"
android:text="I {fa-heart-o} to {fa-code} on {fa-android}"
android:textColor="#FF0000"
android:textSize="40sp" />
<com.joanzapata.iconify.widget.IconButton
android:id="@+id/id_icon_ib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:clickable="true"
android:shadowColor="#22000000"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="1"
android:text="I {fa-heart-o}"
android:textColor="@color/selector_text_press_color"
android:textSize="40sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:orientation="horizontal">
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/alipay_button_style" />
<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="30dp"
android:background="@drawable/wx_button_style" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:orientation="horizontal">
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="50dp"
android:layout_height="50dp"
android:clickable="true"
android:shadowColor="#22000000"
android:text="{fa-weixin}"
android:textColor="@color/selector_text_press_color"
android:textSize="40sp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:clickable="true"
android:text="{fa-cc-visa}"
android:textColor="@color/selector_text_press_color"
android:textSize="40sp" />
</LinearLayout>
<com.joanzapata.iconify.widget.IconTextView
android:id="@+id/id_itv_wxicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="{icon-scan}"
android:textSize="40sp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="{icon-wx-pay}"
android:textSize="40sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal">
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="{fa-cog}"
android:textSize="30dp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="{fa-cog spin}"
android:textSize="30dp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="{fa-refresh spin}"
android:textSize="30dp" />
<com.joanzapata.iconify.widget.IconTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="{fa-spinner spin}"
android:textSize="30dp" />
<ImageView
android:id="@+id/id_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
3、自定義FontModule
3.1 下載資源


3.2 添加資源自定義FontModule
將上文截圖中的 iconfont.ttf 復(fù)制到assets目錄
自定義FontModule可以參考FontAwesomeModule,需要實(shí)現(xiàn)IconFontDescriptor 接口以及實(shí)現(xiàn)Icon接口來添加我們具體的圖標(biāo)
public class IconFontModule implements IconFontDescriptor {
@Override
public String ttfFileName() {
return "iconfont.ttf";//上文復(fù)制的字體文件
}
@Override
public Icon[] characters() {
return IconFonts.values();
}
}
public enum IconFonts implements Icon {
// 將/&#x替換成\u
icon_scan('\ue609'),
icon_ali_pay('\ue65e'),
icon_wx_pay('\ue615'),
icon_qq_pay('\ue60d');
private char character;
IconFonts(char character) {
this.character = character;
}
@Override
public String key() {
return name().replace('_', '-');
}
@Override
public char character() {
return character;
}
}

4、在代碼中使用
IconDrawable iconDrawable = new IconDrawable(this, FontAwesomeIcons.fa_key)
.colorRes(R.color.colorAccent)
.actionBarSize();
imageView.setImageDrawable(iconDrawable);
5、使用到的資源文件
支付寶默認(rèn)狀態(tài) 支付寶點(diǎn)擊狀態(tài) 微信正常狀態(tài) 微信點(diǎn)擊狀態(tài)




selector_text_press_color.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:color="@color/colorAccent"/> <item android:color="@color/colorGreen"/> </selector>
alipay_button_style.xml
<?xml version="1.0" encoding="utf-8" ?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/alipay_pressed" /> <item android:drawable="@drawable/alipay_normal" /> </selector>
wx_button_style.xml
<?xml version="1.0" encoding="utf-8" ?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/wx_pressed" /> <item android:drawable="@drawable/wx_normal" /> </selector>
colors.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="colorGreen">#04b00f</color> </resources>
總結(jié)
以上所述是小編給大家介紹的Android iconify 使用詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Android?Camera開發(fā)實(shí)現(xiàn)可復(fù)用的相機(jī)組件
這篇文章主要為大家詳細(xì)介紹了Android?Camera開發(fā)實(shí)現(xiàn)可復(fù)用的相機(jī)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
簡(jiǎn)單實(shí)現(xiàn)Android計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了自己動(dòng)手實(shí)現(xiàn)的Android計(jì)算器功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Flutter改變狀態(tài)變量是否必須寫在setState回調(diào)詳解
這篇文章主要為大家介紹了Flutter改變狀態(tài)變量是否必須寫在setState回調(diào)里的原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
Android帶數(shù)字或紅點(diǎn)的底部導(dǎo)航攔和聯(lián)網(wǎng)等待加載動(dòng)畫示例
這篇文章主要介紹了Android帶數(shù)字或紅點(diǎn)的底部導(dǎo)航攔和聯(lián)網(wǎng)等待加載動(dòng)畫示例,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下。2017-03-03
Android開發(fā)中Activity屬性設(shè)置小結(jié)
Android應(yīng)用開發(fā)中會(huì)經(jīng)常遇到Activity組件的使用,下面就來講解下Activity組件。Activity的生命周期、通信方式和IntentFilter等內(nèi)容,并提供了一些日常開發(fā)中經(jīng)常用到的關(guān)于Activity的技巧和方法。通過本文,你可以進(jìn)一步了接Android中Activity的運(yùn)作方式。2015-05-05
Android實(shí)時(shí)文件夾創(chuàng)建方法
這篇文章主要介紹了Android實(shí)時(shí)文件夾創(chuàng)建方法,涉及基于Activity實(shí)現(xiàn)文件實(shí)時(shí)查詢的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Android利用MediaRecorder實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了Android利用MediaRecorder實(shí)現(xiàn)錄音功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03

