【Android】【UI】在安卓中使用阿里的IconFont图标库

最新推荐文章于 2024-09-22 22:10:07 发布
最新推荐文章于 2024-09-22 22:10:07 发布
阅读量2.6k 收藏
点赞数
分类专栏： android 文章标签： android ui IconFont 图标库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013718730/article/details/121933151
版权

什么是IconFont

IconFont是一套图标库方案，它将常用的图标保存到一个字库文件当中

字库中每个字符的字形，就是图标的外形，这样就能将图标作为一个文字字符来显示

这套方案思路有点奇特，它的主要作用，是方便对图标进行统一打包、分发，这比诸多零散图片要方便

当我们需要使用某个图标时，我们根据Unicode找到对应图标在字库文件当中的位置，然后显示出这个文字即可

具体的使用方法，百度有很多，这里我们主要是套路，怎么让安卓支持这套技术

使用方式

先看结果，实现上虽然有点麻烦，但最终提供给大家使用的API是非常简单的

有TextView和Drawable两种方式来显示图标，支持渐变、描边、阴影、大小的设置

一般用TextView就行了，Drawable方式是用于特殊用途的，比如地图控件，经常通过自定义Drawable来显示标记


	IconFontTextView view = new IconFontTextView(ctx);
	view.fillColor(Colors.YELLOW, Colors.ORANGE).strokeColor(Colors.RED_50, 3).textSize(60).text("001", 0xE624).redraw(); //也可以传字符串格式的"E624"



	IconFontDrawable drawable = new IconFontDrawable();
	drawable.fillColor(Colors.YELLOW, Colors.ORANGE).strokeColor(Colors.RED_50, 3).textSize(120).text("001", 0xE624).redraw(); //也可以传字符串格式的"E624"

自定义控件核心源码


	package com.easing.android.IconFont;
	
	import android.content.Context;
	import android.content.res.TypedArray;
	import android.graphics.Canvas;
	import android.graphics.LinearGradient;
	import android.graphics.Paint;
	import android.graphics.Shader;
	import android.graphics.Typeface;
	import android.util.AttributeSet;
	import android.view.View;
	
	import com.easing.commons.android.manager.Dimens;
	import com.easing.commons.android.manager.Fonts;
	import com.easing.commons.android.ui.optimize.CanvasPainter;
	import com.easing.commons.android.value.color.Colors;
	
	@SuppressWarnings("all")
	public class IconFontTextView extends View {
	
	    //画填充色
	    Paint fillPaint = new Paint();
	    //画描边色
	    Paint strokePaint = new Paint();
	
	    String iconChar;
	
	    int width;
	    int height;
	
	    //字体
	    Typeface typeface;
	    //字体大小
	    float textSize;
	    //填充色
	    int startColor;
	    int endColor;
	    LinearGradient gradient;
	    //渐变色
	    int strokeColor;
	    float strokeWidth;
	
	    public IconFontTextView(Context context) {
	        this(context, null);
	    }
	
	    public IconFontTextView(Context context, AttributeSet attributeSet) {
	        super(context, attributeSet);
	        init(context, attributeSet);
	    }
	
	    protected void init(Context context, AttributeSet attributeSet) {
	        //设置填充画笔默认属性
	        fillPaint.setAntiAlias(true);
	        fillPaint.setStyle(Paint.Style.FILL);
	        fillPaint.setShadowLayer(Dimens.toPx(4), Dimens.toPx(2), Dimens.toPx(2), Colors.BLACK);
	        //设备描边画笔默认属性
	        strokePaint.setAntiAlias(true);
	        strokePaint.setStyle(Paint.Style.STROKE);
	        //读取属性
	        TypedArray attrs = context.obtainStyledAttributes(attributeSet, R.styleable.IconFontTextView);
	        //设置初始字符
	        int unicode = attrs.getInteger(R.styleable.IconFontTextView_IconFontTextView_text, 0);
	        if (unicode != 0)
	            iconChar = "" + (char) unicode;
	        //设置初始字体
	        String font = attrs.getString(R.styleable.IconFontTextView_IconFontTextView_textFont);
	        if (font != null) {
	            typeface = Fonts.create("iconfont/" + font + ".ttf");
	            fillPaint.setTypeface(typeface);
	            strokePaint.setTypeface(typeface);
	        }
	        //设置初始字体大小
	        textSize = attrs.getDimension(R.styleable.IconFontTextView_IconFontTextView_textSize, Dimens.toDp(20));
	        fillPaint.setTextSize(textSize);
	        strokePaint.setTextSize(textSize);
	        //设置初始填充色
	        startColor = attrs.getColor(R.styleable.IconFontTextView_IconFontTextView_startColor, 0xFF000000);
	        endColor = attrs.getColor(R.styleable.IconFontTextView_IconFontTextView_endColor, 0xFF000000);
	        //设置初始描边色
	        strokeColor = attrs.getColor(R.styleable.IconFontTextView_IconFontTextView_strokeColor, 0xFFFFFFFF);
	        strokeWidth = attrs.getDimension(R.styleable.IconFontTextView_IconFontTextView_strokeWidth, Dimens.toDp(20));
	        strokePaint.setColor(strokeColor);
	        strokePaint.setStrokeWidth(strokeWidth);
	    }
	
	    @Override
	    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	        width = getMeasuredWidth();
	        height = getMeasuredHeight();
	        invalidate();
	    }
	
	    @Override
	    protected void onDraw(Canvas canvas) {
	        if (iconChar == null)
	            return;
	        //计算文字位置
	        float textWidth = CanvasPainter.getTextWidth(fillPaint, iconChar);
	        float textHeight = CanvasPainter.getTextHeight(fillPaint);
	        float x = width / 2 - textWidth / 2;
	        float y = height / 2 - textHeight / 2;
	        //设置渐变色
	        gradient = new LinearGradient(x, y, x + textWidth, y + textHeight, new int[]{startColor, endColor}, new float[]{0F, 1F}, Shader.TileMode.CLAMP);
	        fillPaint.setShader(gradient);
	        //绘制填充色
	        CanvasPainter.drawTextFromCenter(canvas, fillPaint, iconChar, width / 2, height / 2);
	        //绘制描边色
	        CanvasPainter.drawTextFromCenter(canvas, strokePaint, iconChar, width / 2, height / 2);
	    }
	
	    //重绘
	    public IconFontTextView redraw() {
	        invalidate();
	        return this;
	    }
	
	    //设置填充色
	    //自动根据单色，生成透明度渐变色
	    public IconFontTextView fillColor(int color) {
	        this.startColor = 0x66000000 + color & 0x00FFFFFF;
	        this.endColor = color | 0xFF000000;
	        return this;
	    }
	
	    //设置填充色
	    public IconFontTextView fillColor(int startColor, int endColor) {
	        this.startColor = startColor;
	        this.endColor = endColor;
	        return this;
	    }
	
	    //设置描边色
	    public IconFontTextView strokeColor(int strokeColor, float strokeWidth) {
	        this.strokeColor = strokeColor;
	        this.strokeWidth = Dimens.toPx(strokeWidth);
	        strokePaint.setColor(strokeColor);
	        strokePaint.setStrokeWidth(this.strokeWidth);
	        return this;
	    }
	
	    //设置文字大小
	    public IconFontTextView textSize(int textSize) {
	        this.textSize = Dimens.toPx(textSize);
	        fillPaint.setTextSize(this.textSize);
	        strokePaint.setTextSize(this.textSize);
	        return this;
	    }
	
	    //设置图标文字
	    public IconFontTextView text(String font, int unicode) {
	        typeface = Fonts.create("iconfont/" + font + ".ttf");
	        fillPaint.setTypeface(typeface);
	        strokePaint.setTypeface(typeface);
	        iconChar = "" + (char) unicode;
	        return this;
	    }
	
	    //设置图标文字
	    public IconFontTextView text(String font, String unicodeHex) {
	        int unicode = Integer.parseInt(unicodeHex, 16);
	        return text(font, unicode);
	    }
	}





	package com.easing.android.IconFont;
	
	import android.graphics.Canvas;
	import android.graphics.ColorFilter;
	import android.graphics.LinearGradient;
	import android.graphics.Paint;
	import android.graphics.PixelFormat;
	import android.graphics.Shader;
	import android.graphics.Typeface;
	import android.graphics.drawable.Drawable;
	
	import com.easing.commons.android.manager.Dimens;
	import com.easing.commons.android.manager.Fonts;
	import com.easing.commons.android.ui.optimize.CanvasPainter;
	import com.easing.commons.android.value.color.Colors;
	
	//用于显示图标字体的Drawable
	@SuppressWarnings("all")
	public class IconFontDrawable extends Drawable {
	
	    //画填充色
	    Paint fillPaint = new Paint();
	    //画描边色
	    Paint strokePaint = new Paint();
	
	    String iconChar;
	
	    int width;
	    int height;
	    float scale = 1F;
	
	    //字体
	    Typeface typeface;
	    //字体大小
	    float textSize;
	    //填充色
	    int startColor;
	    int endColor;
	    LinearGradient gradient;
	    //渐变色
	    int strokeColor;
	    float strokeWidth;
	
	    public IconFontDrawable() {
	        //设置填充画笔默认属性
	        fillPaint.setAntiAlias(true);
	        fillPaint.setStyle(Paint.Style.FILL);
	        fillPaint.setShadowLayer(Dimens.toPx(4), Dimens.toPx(2), Dimens.toPx(2), Colors.BLACK);
	        //设备描边画笔默认属性
	        strokePaint.setAntiAlias(true);
	        strokePaint.setStyle(Paint.Style.STROKE);
	    }
	
	    @Override
	    public void draw(Canvas canvas) {
	        if (iconChar == null)
	            return;
	        //设置渐变色
	        gradient = new LinearGradient(0, 0, width, height, new int[]{startColor, endColor}, new float[]{0F, 1F}, Shader.TileMode.CLAMP);
	        fillPaint.setShader(gradient);
	        //绘制填充色
	        CanvasPainter.drawTextFromCenter(canvas, fillPaint, iconChar, width / 2, height / 2);
	        //绘制描边色
	        CanvasPainter.drawTextFromCenter(canvas, strokePaint, iconChar, width / 2, height / 2);
	    }
	
	    @Override
	    public int getOpacity() {
	        return PixelFormat.TRANSLUCENT;
	    }
	
	    @Override
	    public void setAlpha(int alpha) {
	
	    }
	
	    @Override
	    public void setColorFilter(ColorFilter colorFilter) {
	
	    }
	
	    @Override
	    public int getIntrinsicWidth() {
	        return width;
	    }
	
	    @Override
	    public int getIntrinsicHeight() {
	        return height;
	    }
	
	    //重绘
	    public IconFontDrawable redraw() {
	        width = (int) CanvasPainter.getTextWidth(fillPaint, iconChar);
	        height = (int) CanvasPainter.getTextHeight(fillPaint);
	        invalidateSelf();
	        return this;
	    }
	
	    //设置填充色
	    //自动根据单色，生成透明度渐变色
	    public IconFontDrawable fillColor(int color) {
	        this.startColor = 0x66000000 + color & 0x00FFFFFF;
	        this.endColor = color | 0xFF000000;
	        return this;
	    }
	
	    //设置填充色
	    public IconFontDrawable fillColor(int startColor, int endColor) {
	        this.startColor = startColor;
	        this.endColor = endColor;
	        return this;
	    }
	
	    //设置描边色
	    public IconFontDrawable strokeColor(int strokeColor, float strokeWidth) {
	        this.strokeColor = strokeColor;
	        this.strokeWidth = Dimens.toPx(strokeWidth);
	        strokePaint.setColor(strokeColor);
	        strokePaint.setStrokeWidth(this.strokeWidth);
	        return this;
	    }
	
	    //设置文字大小
	    public IconFontDrawable textSize(int textSize) {
	        this.textSize = Dimens.toPx(textSize);
	        fillPaint.setTextSize(this.textSize);
	        strokePaint.setTextSize(this.textSize);
	        return this;
	    }
	
	    //设置图标文字
	    public IconFontDrawable text(String font, int unicode) {
	        typeface = Fonts.create("iconfont/" + font + ".ttf");
	        fillPaint.setTypeface(typeface);
	        strokePaint.setTypeface(typeface);
	        iconChar = "" + (char) unicode;
	        return this;
	    }
	
	    //设置图标文字
	    public IconFontDrawable text(String font, String unicodeHex) {
	        int unicode = Integer.parseInt(unicodeHex, 16);
	        return text(font, unicode);
	    }
	}

源码下载

IconFont for Android.zip

ByteFlys
关注
专栏目录
Android使用IconFont
u012426327的专栏
09-18 1023
IconFont介绍 IconFont实际是把图片做在字体文件(.ttf)中. ttf文件中每个图片对应的一个unicode码. TextView 设置文字的时候,使用对应的unicode码就能显示出图片. 打开iconfont.ttf, 可以看到里面全是图片 Snip20161215_15.png 假如在iconfont.ttf里面. unicode码""
Android 中 使用 IconFont
FritzXu的博客
03-15 2055
在上篇 react-native-vector-icons的集成心得 中简单了介绍了什么是 IconFont 以及如何在React Native 中使用，这里再开一篇来具体说明什么是 IconFont 并且总结一下在 Android 开发中如何使用。 什么是 IconFont IconFont 其实就是将若干个 SVG 矢量图的做成了字体文件 ( .ttf ) ，供开发者使用。 ...
Android使用iconfont图标
肖旺银的博客
04-15 4109
1.从iconfont网站中选择自己的想要的图标(登录就不需要说了吧) 例如 搜索购物车图标，把想要的图标放入购物车 添加置项目 ， 没有就自己新建一个 进入到项目 把这个文件下载下来之后，解压 将这个iconfont.ttf放入AndroidStudio项目中的main下面的assets文件夹里，没有就新建一个 用法 val icon: Typeface = Typeface.createFromAsset(context.assets, "iconfont.ttf") textview.ty
【Android】 IconFont的使用
最新发布
2303_79296612的博客
09-22 609
IconFont虽然看起来是图标，实际原理跟字体的实现方式是一样的，所以我们把每个Icon当作一个特殊的文字来理解和处理。：SVG 使用基于路径的矢量图形，这意味着图形可以无限放大而不失真，非常适合需要多种分辨率的应用。：SVG 文件是文本格式，可以使用任何文本编辑器创建和编辑。：SVG 可以包含交互性，如事件处理器，允许用户与图形进行交互。：SVG 文件的大小通常比位图小，这使得它们在网页上加载更快。：SVG 支持 CSS 样式，可以方便地改变图形的外观。前几步如之前的，在平台获取字体文件压缩包。
android 的iconfont,android中使用iconfont
weixin_39684967的博客
05-27 380
项目缺少ui，但是又需要很多icon，为了和web的界面统一，android中，我也采用里iconfont的方案。写一个iconTextView继承TextViewpackage com.edusohoapp.app.view;import android.content.Context;import android.graphics.Typeface;import android.widget....
Android Iconfont-阿里巴巴矢量图标库的简单使用
冯大鱼的博客
06-01 5267
  现在越来越多的个人开发者或者初学者苦于没有ui图标，画出的界面不好看，在这给大家介绍Iconfont-阿里巴巴矢量图标库，里面有很多ui开发者自行设计及的各式各样的图标，比如按钮、品牌图标、表情等，可以在线使用，或者下载到本地使用。首先进入网站 首页 可搜索自己想要的图标现在随便点一个点击下载按钮PNG下载可以下载原图点击类似于购物车的图标 添加入库右上角购物车就存在图标了  点击它点击下载代...
Android 中使用IconFont 例子
03-18
在Android项目中使用IconFont，首先需要获取一个图标字体库，如阿里巴巴的IconFont图标库（http://www.iconfont.cn/）。下载或克隆你需要的图标库，通常会得到一个`.ttf`或`.otf`的字体文件。将这个文件复制到项目...
安卓换肤主题更换夜间模式相关-Android中使用IconFont的小例子包含了icon字体库哦.rar
07-29
本示例将探讨如何在Android应用中使用IconFont实现图标替换，同时涉及换肤主题和夜间模式的设置。 首先，让我们了解什么是IconFont。IconFont，也称为图标字体，是一种将图标设计成字体格式的技术。通过这种方式，...
Android Stdio调用阿里图标库
AME1314的博客
05-03 2426
Step1.访问阿里图标库官网https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 Step2:登陆账号 Step3:点击图标库 Step4,将要使用的图标填入库 Step5.点击右上角购物车按钮，下载代码 Step6.解压待用 ...
Taro：阿里图标的使用
weixin_42301205的博客
06-01 1567
Taro：阿里图标的使用一、下载图标代码1、将图标加入购物车2、在购物车中将图标添加至项目3、获取代码链接4、复制代码二、创建icon.css并把代码复制进去三、在app.jsx中引入icon.css四、使用图标1、安装taro-ui2、代码五、效果展示 一、下载图标代码 1、将图标加入购物车 2、在购物车中将图标添加至项目 3、获取代码链接 4、复制代码 二、创建icon.css并把代码复制进去 将 " .iconfont " 改为 " .icon " // src/icon/icon.css
Android中正确使用字体图标(iconfont)的方法
09-01
IconFont字体不仅仅流行于Web开发，在移动开发中也渐渐的使用的范围更广泛。这篇文章主要介绍了在Android开发中使用icon font的代码和方法。对大家学习使用iconfont有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。
Android 中使用IconFont
Area的专栏
03-18 1491
最近发现IconFont字体可以在移动开发中使用，这里介绍在Android开发中使用icon font的代码和方法。 应用步骤： 1、第一步：复制字体文件到项目 assets 目录；（字体文件fontawesome.ttf，我们可以去搜索fontawesome下载） 2、第二步：自定义TextView；
android 的iconfont,IconFont的制作及在Android的使用
weixin_32775495的博客
05-27 419
本文介绍的内容对应的Github项目地址：IconFontApp上一节提到，如果项目中很多自定义的图标，或者是各种不同来源的图标，我们可以通过对Iconify进行扩展来实现，但是在扩展之前我们需要制作自己的图标字体文件，那么图标字体文件该如何制作呢？这个可以试试Fontello、Icomoon或者IconFont吧！(制作图标字体的方法有很多，可以参考这里，本文主要介绍的是如何快速利用已有的图标制...
android 中使用IconFont详解
迷路的小孩
10-29 732
操作步骤 首先去http://www.iconfont.cn/plus/collections/index图标库选择自己要用的图标下载，下载后得到个压缩文件并解压，最后得到如下文件： 其中2个文档可以不要，将剩余的文件拷贝到项目的assets目录下： 然后打开demo.html来找到图标相对应的 HTML 实体字符码： 然后在string定义需要用到的图标字符码： <stri...
android seticon方法,Android中使用IconFont
weixin_39786534的博客
05-25 310
通道：前提工作：准备iconfont图标前提工作的基本流程如图所示：准备工作的流程图.png我们可以使用github第三方账号进行登录iconfont网站。第二步：将需要的图标添加入库将图标添加入库.png第三步：到库中进行查看，可以直接下载代码或添加至项目下载代码或添加至项目.png第四步：第三步选中添加至项目新建一个项目(review复习)，把库中的代码添加到新建的项目中。图片.png第四步：...
在Android中使用字体图标(Icon Font)
freedomzcd的专栏
08-20 1718
主要内容 做前端开发的人，对字体图标（iconFont）应该都不陌生（感到陌生的人自己去搜索普及下知识吧( ￣┏＿┓￣)）。实际原理就是ICON打成字体，然后通过CSS设置字体的样式来生效。 但是，这是在H5相关开发及其延伸开发时用到的。那么，原生Android开发中，应该怎么使用这些图标呢。下面就给大家介绍一下在Android原生开发中的使用方法。 本方法基于Android Studio工程使用，Eclipse的使用者请自行摸索，主要是assets的位置问题。 首先，准备好一个字体图标文件，一
Android Studio使用IconFont阿里矢量图标库
weixin_44177244的博客
08-18 925
在Android Studio中的src文件夹右键 单击New,创建Assets文件夹 在assets下新建一个iconfont目录 将iconfont.ttf复制到iconfont目录下 在res/values/strings.xml，添加 string 值 测试一波，在xml中写一个TextView，然后再Activity中设置下Typeface xml布局 Activity 封装一个类，不需要手动设置Typeface 自定义TextView package com.s
使用Appium进行Android UI自动化测试实践
"本文主要探讨了Appium在Android UI测试中的应用实践，介绍Appium作为一款跨平台的自动化测试框架，如何通过Selenium WebDriver协议进行通信，并以Python为编程语言来实现测试脚本。文中提到了批量添加微信好友的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值