美文网首页各种长见识涨姿势Android知识Android开发
Android Icon-fonts:像文字一样操作图标

Android Icon-fonts:像文字一样操作图标

作者: JackMeGo | 来源:发表于2016-12-16 19:40 被阅读222次
IconFonts

在Android手机上,每种字体实际上就是一套图片,每个图片由一个个点阵组成,并赋予一个对应的Unicode编码。同样的道理,我们可以把一些常用的图标也制作成字体格式,分配Unicode编码,并像使用文字一样的使用这些图标,这就是Icon fonts的用法,这种方法经常被用于前端开发中。

相比于使用Drawable对象,Icon fonts有如下优点:

  1. 不再需要制作存储不同分辨率的drawables,图形资源的大小降低一个数量级
  2. 可以方便的对icon-fonts进行缩放,改变颜色,改变大小(比如点击前和点击后),添加阴影和光晕等效果

使用效果如下,看起来就像操作一个图标,实际上是在操作一个文本,而且我们不需要存储不同尺寸和不同颜色的图标。

IconFont使用效果

Icon fonts用法也很简单,分四步:

  1. 将图标生成SVG文件,并将SVG文件转换成字体文件,格式为ttf,同时每个图标对应一个Unicode码,如下图。可以在这个网站进行转换,同时上面有一些做好的图标可以用:https://icomoon.io/app/#/select

    各种各样的Icon Icon对应的Unicode
  2. 将生成的ttf字体文件放到assets文件夹


    assets文件夹
  3. 在strings.xml中给每个icon-font命名,对应的value就是该Icon的Unicode


    String xml
  4. 使用Typeface.createFromAsset加载字体文件,通过setTypeface给TextView设置字体,然后就可以像文字一样给它设置颜色,大小等属性了

Typeface font = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
cameraTV.setTypeface(font);
cameraTV.setText(R.string.ic_camera);
cameraTV.setTextSize(TypedValue.COMPLEX_UNIT_SP, 30);
cameraTV.setTextColor(getResources().getColor(R.color.yellow));

Done

相关文章

  • Android Icon-fonts:像文字一样操作图标

    在Android手机上,每种字体实际上就是一套图片,每个图片由一个个点阵组成,并赋予一个对应的Unicode编码。...

  • Android App启动流程

    抛出问题:1. Android系统桌面是什么2. 点击应用图标后Android系统执行了什么操作 用文字总结App...

  • 字体图标 icon-font 的使用

    矢量图标库矢量:不会因为大小而变得模糊,因为本身就是文字类型,所以可以像文字一样操作。 1.在搜索框内查找 2.找...

  • SVG sprite

    之前说过icon-fonts解决方案可以一次性加载纯色图标,并且相对于精灵图更小更灵活;那渐变色或者组合颜色的图标...

  • Android 优化 图标文字 iconfont

    Android 优化 图标文字 iconfont 使用图标文字代替图片的实践 进入项目的main文件夹创建一个as...

  • Android状态栏、标题栏、刘海

    关于fitsSystemWindow android标题栏、状态栏图标文字颜色及背景动态变化 详解Android刘...

  • 优秀技术博客

    1、kotlin 2、玩Android平台 3、IconFont 图标文字化 4、FlutterFlutter中文网

  • Android开发第一天

    图标平台 阿里图标库 Android学习论坛 Android巴士AndroidDevelopers Android...

  • android:imeOptions指定了弹出键盘时右下角的按键

    android:imeOptions指定了弹出键盘时右下角的按键的显示文字,未指定时默认为回车图标。android...

  • 小图标icon-fonts解决方案

    老生常谈了,一般来说简单优化,可以选择使用精灵图,把多个icon放在一张图中,本来需要请求多次的图标请求一次就ok...

网友评论

本文标题:Android Icon-fonts:像文字一样操作图标

本文链接:https://www.haomeiwen.com/subject/vsgnmttx.html