Android端实现图标带提示数字功能

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;

public class IconNmuberView extends View {

	Bitmap bitmap;
	String number="0";
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		int x=getWidth()/2;
		int y=getHeight()/2;
		
		Paint paint=new Paint();
		
		//在画布上画上图标作为背景,不需动态加载的话可以省略这部
		if(bitmap!=null){
			canvas.drawBitmap(bitmap,null, paint);
		}
		
		//数字为0直接返回
		if(number.equals("0")){
			return;
		}
		
		//设置画笔为红色
		paint.setColor(Color.RED);
		//计算小圆形的圆心图标,半径取大图标半径的四分之一
		canvas.drawCircle((float)(x+Math.sqrt(x*x/2)),(float)(x-Math.sqrt(x*x/2)),(float)(x/4), paint);
		paint.setColor(Color.WHITE);
		//为适应各种屏幕分辨率,字体大小取半径的3.5分之一,具体根据项目需要调节
		paint.setTextSize((float)(x/3.5));
		//去除锯齿效果
		paint.setFlags(Paint.ANTI_ALIAS_FLAG);
		paint.setAntiAlias(true);
		//字体加粗
		paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
		//字体位置设置为以圆心为中心
		paint.setTextAlign(Paint.Align.CENTER);
		canvas.drawText(number,(float)(x+Math.sqrt(x*x/2)),(float)(x-Math.sqrt(x*x/2))+x/9, paint);
	}
	
	//设置图标
	public void setIcon(Bitmap bitmap){
		this.bitmap=bitmap;
	}
	
	//设置数字
	public void setNumber(String number){
		this.number=number;
	}

	public IconNmuberView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

}

使用好多APP的时候经常可以看到如图所示的可以在图标的右上角显示数字的图标,这种设计可以很明显的提示用户收到了哪些消息和信息,IOS端有自带的这种控件可以使用,但Android端还没有这种设计,因为项目的需要,自己做了一个自定义控件,专门处理类似于这样的问题。

原理是在一块画布上面画上背景图标,然后确定所画圆形的圆心位置,之后在上面画数字即可。

Android端实现图标带提示数字功能_第1张图片

创建自定义控件IconNmuberView.java



完成后显示效果

Android端实现图标带提示数字功能_第2张图片



你可能感兴趣的:(android)