备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

android-iconify 使用详解

2017-07-23 1060
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： android-iconify 使用详解 有图有真相1、android-iconify简介iconify的github地址：https://github.

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开发
数据格式
XML
javen205
目录
相关文章
张继群
|
20天前
|
Java Android开发
Android 开发获取通知栏权限时会出现两个应用图标
Android 开发获取通知栏权限时会出现两个应用图标
张继群
12 0
Hdnw
|
1月前
|
XML 缓存 Android开发
Android开发，使用kotlin学习多媒体功能（详细）
Android开发，使用kotlin学习多媒体功能（详细）
Hdnw
94 0
sumith
|
2月前
|
Android开发
安卓SO层开发 -- 编译指定平台的SO文件
安卓SO层开发 -- 编译指定平台的SO文件
sumith
30 0
shuj
|
1月前
|
设计模式 人工智能 开发工具
安卓应用开发：构建未来移动体验
【2月更文挑战第17天】 随着智能手机的普及和移动互联网技术的不断进步，安卓应用开发已成为一个热门领域。本文将深入探讨安卓平台的应用开发流程、关键技术以及未来发展趋势。通过分析安卓系统的架构、开发工具和框架，本文旨在为开发者提供全面的技术指导，帮助他们构建高效、创新的移动应用，以满足不断变化的市场需求。
shuj
18 1
万方科技阿里云
|
3月前
|
Android开发 开发者 iOS开发
APP开发后如何上架，上架Android应用市场前要准备什么
移动应用程序(APP)的开发已经成为现代企业和开发者的常见实践。然而，开发一个成功的APP只是第一步，将其上架到应用商店让用户下载和使用是实现其潜力的关键一步。
万方科技阿里云
67 0
shuj
|
1月前
|
机器学习/深度学习 调度 Android开发
安卓应用开发：打造高效通知管理系统
【2月更文挑战第14天】 在移动操作系统中，通知管理是影响用户体验的关键因素之一。本文将探讨如何在安卓平台上构建一个高效的通知管理系统，包括服务、频道和通知的优化策略。我们将讨论最新的安卓开发工具和技术，以及如何通过这些工具提高通知的可见性和用户互动性，同时确保不会对用户造成干扰。
shuj
33 1
请看我回答~
|
11天前
|
XML 开发工具 Android开发
构建高效的安卓应用：使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化，开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程，并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤，我们旨在提供一种高效且可靠的解决方案，以帮助开发者构建响应迅速且用户体验优良的安卓应用。
请看我回答~
17 0
张继群
|
20天前
|
Android开发
Android开发小技巧：怎样在 textview 前面加上一个小图标。
Android开发小技巧：怎样在 textview 前面加上一个小图标。
张继群
10 0
张继群
|
20天前
|
Android开发
Android 开发 pickerview 自定义选择器
Android 开发 pickerview 自定义选择器
张继群
12 0
疯狂的猿
|
26天前
|
Java Android开发
Android开发系列全套课程
本系列课程面向有java基础，想进入企业从事android开发的计算机专业者。学习搭配实战案例，高效掌握岗位知识。
疯狂的猿
17 1

热门文章

最新文章

  • 1
    我的Android之路(持续更新总结~)
  • 2
    Android实现自定义进度条(源码+解析)
  • 3
    mPaaS常见问题之Android集成dexPatch热修复运行时候无法正常进行热更新如何解决
  • 4
    Android 面试题及答案整理，最新面试题
  • 5
    构建高效Android应用：探究Kotlin与Java的性能差异
  • 6
    构建高效Android应用：Kotlin协程的实践与优化
  • 7
    构建高效Android应用：探究Kotlin协程的优势
  • 8
    安卓适配性策略：确保应用在不同设备上的兼容性
  • 9
    安卓安全性指南：保护用户数据免受恶意攻击
  • 10
    mPaaS常见问题之pixel4 android 13 调用移动网关 报这个错如何解决
  • 1
    构建高效Android应用：Kotlin协程的实践指南
    15
  • 2
    构建高效Android应用：Kotlin与协程的完美融合
    27
  • 3
    【Android平板编程】远程Ubuntu服务器code-server编程写代码
    45
  • 4
    android 使用GSON 序列化对象出现字段被优化问题解决方案
    16
  • 5
    前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
    46
  • 6
    构建高效Android应用：Kotlin协程的实践指南
    48
  • 7
    构建高效Android应用：探究Kotlin多线程编程
    35
  • 8
    构建高效Android应用：Kotlin协程的实践指南
    25
  • 9
    构建高效Android应用：Kotlin与协程的完美融合
    15
  • 10
    Android 12 新特性深度解析
    20

    • 相关电子书

    更多
  • 《深入探索Android热修复技术原理》
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss简介和使用流程
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4