AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

android-iconify 使用详解

2017-07-23 1113
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
请看我回答~
|
1月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上，安卓和iOS两大阵营各据一方。随着技术的演进，跨平台开发框架成为开发者的新宠，旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战，并分享实用的开发技巧，帮助开发者在安卓和iOS的世界中游刃有余。
请看我回答~
43 1
shuj
|
1月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图：从零到英雄
【10月更文挑战第42天】 在安卓的世界里，自定义视图是一块画布，让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门，通过深入浅出的方式，让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤，以及如何优化你的视图以提高性能和兼容性。准备好了吗？让我们开始这段创造性的旅程吧！
shuj
27 1
游客qf4jmczx4xu2y
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图：打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中，自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程，以及如何通过它们增强应用的用户体验。我们将从基础出发，逐步深入，最终让你能够自信地设计和实现专属的UI组件。
游客qf4jmczx4xu2y
47 4
mrq4nk6ni2neg
|
20天前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图：打造个性化用户界面
在安卓应用开发的广阔天地中，自定义视图是一块神奇的画布，让开发者能够突破标准控件的限制，绘制出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战技巧，逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者，这篇文章都将为你打开新的视野，让你的应用在众多同质化产品中脱颖而出。
mrq4nk6ni2neg
42 19
aliyun8599273441-30642
|
1月前
|
IDE Java 开发工具
移动应用与系统：探索Android开发之旅
在这篇文章中，我们将深入探讨Android开发的各个方面，从基础知识到高级技术。我们将通过代码示例和案例分析，帮助读者更好地理解和掌握Android开发。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的信息和技巧。让我们一起开启Android开发的旅程吧！
aliyun8599273441-30642
66 30
请看我回答~
|
21天前
|
JSON Java API
探索安卓开发：打造你的首个天气应用
在这篇技术指南中，我们将一起潜入安卓开发的海洋，学习如何从零开始构建一个简单的天气应用。通过这个实践项目，你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者，这篇文章都将为你提供一个清晰的路线图和实用的代码示例，帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程，打造属于你自己的第一个安卓应用吧！
请看我回答~
46 14
肥猪肥猪-17824
|
24天前
|
Java Linux 数据库
探索安卓开发：打造你的第一款应用
在数字时代的浪潮中，每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界，通过浅显易懂的语言和实际代码示例，引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者，这篇文章都将为你打开一扇门，让你的创意和技术一起飞扬。
肥猪肥猪-17824
47 13
shuj
|
22天前
|
XML 存储 Java
探索安卓开发之旅：从新手到专家
在数字时代，掌握安卓应用开发技能是进入IT行业的关键。本文将引导读者从零基础开始，逐步深入安卓开发的世界，通过实际案例和代码示例，展示如何构建自己的第一个安卓应用。我们将探讨基本概念、开发工具设置、用户界面设计、数据处理以及发布应用的全过程。无论你是编程新手还是有一定基础的开发者，这篇文章都将为你提供宝贵的知识和技能，帮助你在安卓开发的道路上迈出坚实的步伐。
shuj
31 5
天下无贼001
|
20天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略：一次编码，多平台部署
在移动应用开发的广阔天地中，安卓和iOS两大阵营各占一方。随着技术的发展，跨平台开发框架应运而生，它们承诺着“一次编码，到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势，同时通过代码示例揭示跨平台工具的实际运用。
天下无贼001
43 3
我不是游客20240119
|
22天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图：打造个性化UI组件
在安卓应用开发中，自定义视图是一种强大的工具，它允许开发者创造独一无二的用户界面元素，从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例，引导你了解如何在安卓项目中实现自定义组件，并探讨其背后的技术原理。我们将从基础的View类讲起，逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者，这篇文章都将为你提供有价值的见解和技巧。
我不是游客20240119
41 4