[移动开发]【Android】【UI】在安卓中使用阿里的IconFont图标库

什么是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