Android iconify 使用详解

程序员文章站 2023-01-03 10:48:30

android-iconify 使用详解，下文图文并茂给大家介绍的非常详细，具体内容详情请参考下文。 1、android-iconify简介 iconif...

android-iconify 使用详解，下文图文并茂给大家介绍的非常详细，具体内容详情请参考下文。

1、android-iconify简介

iconify的github地址：https://github.com/joanzapata/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 {
  // 将/替换成\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 使用详解，希望对大家有所帮助

上一篇： Substance Designer 2018注册破解详细安装教程(附破解补丁下载)

下一篇： Android编程实现播放音频的方法示例

Android iconify 使用详解

Pytorch之finetune使用详解

详解JavaScript正则表达式中的global属性的使用

React Native中Mobx的使用方法详解

查看当前mysql使用频繁的sql语句(详解)

JavaScript正则表达式中的ignoreCase属性使用详解

nodejs 使用 js 模块的方法实例详解

详解JavaScript编程中正则表达式的使用

详解iOS应用开发中Core Data数据存储的使用

android 浏览器之多窗口方案详解

Android下如何使用百度地图sdk