Android iconify 使用详解

发布时间 - 2026-01-11 02:35:09    点击率:

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 下载资源


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 {
  //&#xe609 将/&#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、使用到的资源文件

支付宝默认状态 支付宝点击状态 微信正常状态 微信点击状态   

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 使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# android  # iconify  # 使用  # 自定义  # 适用于  # 给大家  # 标上  # 支付宝  # 小编  # 是一个  # 几个  # 在此  # 而不  # 三种  # 可以直接  # 图文并茂  # 应用于  # 工作效率  # 所述  # 给我留言  # 具体内容  # 请参考  # 感谢大家 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 网站优化排名时,需要考虑哪些问题呢?  高防服务器如何保障网站安全无虞?  如何用PHP快速搭建CMS系统?  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用?  如何确认建站备案号应放置的具体位置?  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  三星网站视频制作教程下载,三星w23网页如何全屏?  原生JS获取元素集合的子元素宽度实例  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  高端企业智能建站程序:SEO优化与响应式模板定制开发  专业商城网站制作公司有哪些,pi商城官网是哪个?  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  如何安全更换建站之星模板并保留数据?  个人网站制作流程图片大全,个人网站如何注销?  详解CentOS6.5 安装 MySQL5.1.71的方法  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  js实现点击每个li节点,都弹出其文本值及修改  Laravel如何实现一对一模型关联?(Eloquent示例)  Laravel如何自定义分页视图?(Pagination示例)  详解MySQL数据库的安装与密码配置  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  Python结构化数据采集_字段抽取解析【教程】  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  利用vue写todolist单页应用  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode(.NET组件介绍之四)  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  Laravel观察者模式如何使用_Laravel Model Observer配置  Laravel如何实现事件和监听器?(Event & Listener实战)  如何为不同团队 ID 动态生成多个独立按钮  大连网站制作费用,大连新青年网站,五年四班里的视频怎样下载啊?  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  如何挑选高效建站主机与优质域名?  如何在阿里云高效完成企业建站全流程?  奇安信“盘古石”团队突破 iOS 26.1 提权  详解ASP.NET 生成二维码实例(采用ThoughtWorks.QRCode和QrCode.Net两种方式)  javascript读取文本节点方法小结  如何用AWS免费套餐快速搭建高效网站?  Laravel如何设置定时任务(Cron Job)_Laravel调度器与任务计划配置  Laravel如何实现用户注册和登录?(Auth脚手架指南)  laravel怎么通过契约(Contracts)编程_laravel契约(Contracts)编程方法  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  如何用低价快速搭建高质量网站?  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  html如何与html链接_实现多个HTML页面互相链接【互相】  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  如何用y主机助手快速搭建网站?  音乐网站服务器如何优化API响应速度?