Android iconify 使用詳解

2019-10-22 18:31:16

字體：大中小

來源：轉載

供稿：網友

android-iconify 使用詳解，下文圖文并茂給大家介紹的非常詳細，具體內容詳情請參考下文。

android,iconify,使用

1、android-iconify簡介

iconify的github地址：https://github.com/JoanZapata/android-iconify
項目地址：http://joanzapata.com/android-iconify
iconify是一個矢量圖標庫，包含使用 Dave Gandy 制作的超過370中矢量字體圖標，可以使Android應用開發者免于制作多種適用于不同屏幕大小尺寸的圖片，從而提高開發者工作效率。
適用場景：

1、iconify原作者提供了三種他自定義的控件：IconTextView、IconButton、IconToggleButton，可以直接使用這三類控件來顯示iconify中提供的字體圖標；

2、在java代碼中通過使用一個IconDrawable為具有setIcon（Drawable drawable）方法的控件設置該字體圖標

優點：由于這些圖標均是矢量字體圖標，所以不僅可以無限放大而不會失真，模糊，而且可以將適用于text的屬性應用于這些矢量圖標上，從而實現改變圖標顏色、添加陰影等效果
缺點：目前在xml文件中使用圖標庫中的資源時，需要自己對照查閱不同圖標所對應的標記，自己手敲標記，這樣不僅麻煩，而且容易出錯。

2、使用android-iconify

2.1 添加依賴

在需要使用iconify的app的build.gradle的dependencies中添加依賴（下面添加了整個庫，在實際開發過程中，可以只添加自己需要的某一個或幾個庫即可）：

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

自定義一個繼承自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的圖標庫。icon-scan icon-wx-pay 是自定義阿里圖標庫

<?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 下載資源

android,iconify,使用

3.2 添加資源自定義FontModule

將上文截圖中的 iconfont.ttf 復制到assets目錄

自定義FontModule可以參考FontAwesomeModule,需要實現IconFontDescriptor 接口以及實現Icon接口來添加我們具體的圖標

public class IconFontModule implements IconFontDescriptor {  @Override  public String ttfFileName() {    return "iconfont.ttf";//上文復制的字體文件  }  @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;  }}

android,iconify,使用

4、在代碼中使用

IconDrawable iconDrawable = new IconDrawable(this, FontAwesomeIcons.fa_key)        .colorRes(R.color.colorAccent)        .actionBarSize();imageView.setImageDrawable(iconDrawable);

5、使用到的資源文件

支付寶默認狀態支付寶點擊狀態微信正常狀態微信點擊狀態

android,iconify,使用

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>

總結

以上所述是小編給大家介紹的Android iconify 使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android毛玻璃背景效果簡單實現代碼

下一篇：Android定時器Timer的停止和重啟實現代碼