Iconfont 开源库 Iconic 使用 方便你使用svg图片。随意更改你的色调。

对于SVG,安卓可以试用vector可以引入到drawable里,就可以直接相当于图片使用,但是这样做会造成颜色控制困难,导致效率并不高。所以可以直接将值封装成字体包的形式,直接设置textColor就好了。想变红就不会变绿。

Iconfont目的在使用SVG的时候引入字体包,如果再项目中引用纯色图片,使用SVG会达到一个高效的目的,长话短说,直接开始说,怎么用。

这里,讲解的是阿里巴巴矢量库里的iconfont。

百度搜索—-iconfont 会出来阿里巴巴矢量库的链接哦,注册,登录,然后创建项目。

从这里可以获取我们需要的资源

很简单的页面,你肯定会用

好,我们上传了我们需要的SVG后,并且下载了生成好的压缩包,我们预览一下。

生成的文件目录,ttf文件就是我们的字体包文件

现在对我们有用的,是ttf文件,还有unicode.html文件,这2个,一个是主文件,另外一个,知识为了让你去知道,内部字体的编码,以及编码之前的命名。我们现在打开unicode.html,我使用的是editplus。直接查看的源代码,你也可以用记事本打开。

这里写图片描述

如果直接使用的话,你也可以参考阿里巴巴的文档,是相当简单的。并且也是很好用的。

下面的链接指向阿里巴巴的帮助文档

http://www.iconfont.cn/plus/help/detail?helptype=code

如果你有更多的需求。比如将之以drawble的形式导出,或者在imageview中使用字体包,或者使用一些三方的字体包的话。那么可以考虑引入下关于svg的插件。这里介绍的是Android-Iconics

https://github.com/mikepenz/Android-Iconics

这里有英文的文档及项目的demo。如果你嫌看英文文档累。那么,你就慢慢的听我说吧。

项目导入

如果你不需要google这些标准的iconfont,而直接使用自己的icon。。那么你只需要引入

compile ‘com.mikepenz:iconics-core:2.8.1@aar’ 就够了

首先把ttf文件放到下图的位置

ttf文件位置

然后上我的配置文件吧

public class MyIcon implements ITypeface {
    private static final String TTF_FILE = "iconfont.ttf";
    private static Typeface typeface = null;
    private static HashMap<String, Character> mChars;

    @Override
    public IIcon getIcon(String key) {
        return Icon.valueOf(key);
    }

    @Override
    public HashMap<String, Character> getCharacters() {
        if (mChars == null) {
            HashMap<String, Character> aChars = new HashMap<String, Character>();
            for (Icon v : Icon.values()) {
                aChars.put(v.name(), v.character);
            }
            mChars = aChars;
        }
        return mChars;
    }

    @Override
    public String getMappingPrefix() {
        return "con";
    }

    @Override
    public String getFontName() {
        return "MyIcon";
    }

    @Override
    public String getVersion() {
        return "1.0.0";
    }

    @Override
    public int getIconCount() {
        return mChars.size();
    }

    @Override
    public Collection<String> getIcons() {
        Collection<String> icons = new LinkedList<String>();
        for (Icon value : Icon.values()) {
            icons.add(value.name());
        }
        return icons;
    }

    @Override
    public String getAuthor() {
        return "ZRF";
    }

    @Override
    public String getUrl() {
        return "";
    }

    @Override
    public String getDescription() {
        return "";
    }

    @Override
    public String getLicense() {
        return "";
    }

    @Override
    public String getLicenseUrl() {
        return "";
    }

    @Override
    public Typeface getTypeface(Context ctx) {
        if (typeface == null) {
            try {
                typeface = Typeface.createFromAsset(ctx.getAssets(), "fonts/" + TTF_FILE);
            } catch (Exception e) {
                return null;
            }
        }
        return typeface;
    }

    public enum Icon implements IIcon {
        //这里是我自己的命名,最好基于unicode里面原来的名字,这样会使对应方便
        //括号里就是unicode字体编码。其实就是将一些平时不用的字体,换成这些纯色图
        //甚至你可以把它看作是你自己写的文字,而不是图片。
        con_aadetail_icon_write('\ue62a'),
        con_dyn_login_cross('\ue629'),
        con_dyn_login_logo('\ue628'),
        con_dyn_detail_close('\ue627'),
        con_article_portrait('\ue626'),
        con_faceless_checkBox_normal('\ue625'),
        con_faceless_checkBox_checked('\ue624'),
        con_recordvideo_btn_closelight('\ue623'),
        con_video_btn_trypaly_preview('\ue622'),
        con_videoclass_notes_playtime('\ue621'),
        con_videoclass_notes_notetime('\ue620'),
        con_videoclass_coursename_stop('\ue61f'),
        con_videoclass_coursename_play('\ue61e'),
        con_recordvideo_btn_lightopen('\ue61d'),
        con_recordvideo_btn_turncamera('\ue61c'),
        con_recordvideo_delete('\ue61b'),
        con_recordvideo_btn_start('\ue61a'),
        con_public_video_btn_directory('\ue619'),
        con_icon_warning('\ue618'),
        con_public_audio_btn_audition('\ue617'),
        con_state_icon_warmprompt48('\ue616'),
        con_public_video_btn_stop('\ue615'),
        con_public_video_btn_playnext('\ue614'),
        con_public_video_btn_play('\ue613'),
        con_public_vedio_btn_stop('\ue612'),
        con_public_vedio_btn_play('\ue611'),
        con_public_op_btn_minwindow('\ue610'),
        con_public_op_btn_maxwindow('\ue60f'),
        con_public_nav_btn_share('\ue60e'),
        con_public_nav_btn_collected('\ue60d'),
        con_public_nav_btn_collect('\ue60c'),
        con_public_nav_btn_back('\ue60b'),
        con_public_answer_replynumber('\ue60a'),
        con_personal_btn_set('\ue609'),
        con_personal_btn_service('\ue608'),
        con_personal_btn_purse('\ue607'),
        con_personal_btn_need('\ue606'),
        con_personal_btn_message('\ue605'),
        con_personal_btn_flock('\ue604'),
        con_personal_btn_dynamic('\ue603'),
        con_personal_btn_course('\ue602'),
        con_personal_btn_classroom('\ue601'),
        con_personal_btn_channel('\ue600');

        char character;

        Icon(char character) {
            this.character = character;
        }

        public String getFormattedName() {
            return "{" + name() + "}";
        }

        public char getCharacter() {
            return character;
        }

        public String getName() {
            return name();
        }

        // remember the typeface so we can use it later
        private static ITypeface typeface;

        public ITypeface getTypeface() {
            if (typeface == null) {
                typeface = new MyIcon();
            }
            return typeface;
        }
    }
}`

你需要在你的项目的application中引用他

    @Override
    public void onCreate() {
        super.onCreate();

        //register custom fonts like this (or also provide a font definition file)
        Iconics.registerFont(new MyIcon());

}

将下面这段代码记录在你的activity的基类中,以便你能够在imageview跟textview中正常的使用iconic。但是,如果使用imageview的时候,会产生一些问题。比如你必须知道app:后面跟的属性是什么名字,因为是缺失的并不提示的。

    @Override
    protected void attachBaseContext(Context newBase) {
        super.attachBaseContext(IconicsContextWrapper.wrap(newBase));
    }

形式

这是在你在activity中注册了context事件。才可以直接使用系统的控件。但是会报出属性缺失异常。比如你觉得不好看,你可以在根布局上加上

 tools:ignore="MissingPrefix"

这样他就会忽略没有的属性,不会报错,我建议就让他红着。

如果你没有在activity中注册context。你可以在用到iconfont的地方使用他内部的控件。这也是我建议的,比如下方这样,都是通俗易懂,而且studio能够提示,跟平时的imageview并没有什么不同。唯一的区别就是图片没办法预览。这是唯一的弊端。

普通的imageview中使用

<ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    app:ico_color="@color/md_red_A200"
    app:ico_icon="gmd-plus-circle"
    app:ico_size="48dp" />

    //other possible attributes
    //app:ico_background_color="@android:color/transparent"
    //app:ico_color="@color/md_red_100"
    //app:ico_contour_color="@android:color/transparent"
    //app:ico_contour_width="0dp"
    //app:ico_corner_radius="0dp"
    //app:ico_icon="gmd-plus-circle"
    //app:ico_offset_x="0dp"
    //app:ico_offset_y="0dp"
    //app:ico_padding="0dp"
    //app:ico_size="48dp"

相应的库里自定义imageview使用

<com.mikepenz.iconics.view.IconicsImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:iiv_background_color=""
        app:iiv_color=""
        app:iiv_contour_color=""
        app:iiv_contour_width=""
        app:iiv_corner_radius=""
        app:iiv_icon=""
        app:iiv_padding=""
        app:iiv_size=""
        app:paddingEnd=""
        app:paddingStart=""
        app:theme=""/>

如果你要在textview中引用,或者iconictextview

 <com.mikepenz.iconics.view.IconicsTextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="abv{faw-adjust}cdd{con_aadetail_icon_write}"
        android:textAllCaps="false"
        android:textColor="#000000"
        android:textSize="16dp"
    />

你必须 {这里是图片} 以这样的形式来引入你的图片。textColor就是这张图的颜色,这也是最简单,也挺好用的,个人比较推荐。在textview中也是一样用法。如果你使用textview没有效果,请注意是否注册。

当然,你也可以在button等中引入他,并且可以在代码中获取到相应的drawable。或者你可以直接在项目中。设置text,他一样会显示为图片。相当便利。类似与这样

new IconicsDrawable(this)
    .icon(FontAwesome.Icon.faw_android)
    .color(Color.RED)
    .sizeDp(24)

你可以像你平时给textview设置文字一样设置图片。并且随意改变他的颜色

       textview.setText("{con_aadetail_icon_write}");
        textview.setTextColor(R.color.colorPrimary);

还有更多用法,可以参考官方demo。如果需要。过几天我上我的demo。现在没有整理出来。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值