自定义View实战之
自定义实现数字提示功能的ImageView
先直接上代码:
public class NumberHintView extends ImageView {
private int num = 0; //要显示的数量
private float radius; //圆圈的半径
private float textSize; //数字的大小
private int paddingRight; //右边内边距
private int paddingTop; //上边内边距
public NumberHintView(Context context) {
super(context);
}
public NumberHintView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public NumberHintView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 设置显示的数量
* @param num
*/
public void setNum(int num) {
this.num = num;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (num > 0) {
radius = getWidth() / 5; //初始化半径
textSize = num < 10 ? radius + 5 : radius; //初始化字体大小
paddingRight = getPaddingRight(); //初始化右边内边距
paddingTop = getPaddingTop(); //初始化上边内边距
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(getResources().getColor(R.color.red));
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(getWidth() - radius - paddingRight / 2, radius + paddingTop / 2, radius, paint);
paint.setColor(getResources().getColor(R.color.baseColor2));
paint.setTextSize(textSize);
String text;
if (num <= 99) {
text = "" + num;
} else {
text = "...";
}
canvas.drawText(text,
num < 10 ? getWidth() - radius - textSize / 4 - paddingRight/2
: getWidth() - radius - textSize / 2 - paddingRight/2,
radius + textSize / 3 + paddingTop/2,
paint);
}
}
}
然后在xml文件中引用即可。
现在,我们来结合代码分析:
第一步:声明所需属性。
private int num = 0; //要显示的数量
private float radius; //圆圈的半径
private float textSize; //数字的大小
private int paddingRight; //右边内边距
private int paddingTop; //上边内边距
第二步:创建setNum方法,如下:
/**
* 设置显示的数量
* @param num
*/
public void setNum(int num) {
this.num = num;
invalidate();
}
第三步:在draw方法中实现我们的逻辑。其实主要就是draw方法中的实现了,我们主要就是用到了Canvas类和Paint类,使用到
Canvas类的drawCircle方法、drawText方法,分别画圆和写字。