本菜最近整理了一下Android自定义View的代码实现(大神勿喷),适合Android初级开发人员学习,有任何错误或问题欢迎留言
今天我们用自定义view实现聊天头像以及聊天数量的计数(右上角为未读信息的数量):
代码如下:
public class NumberIcon extends ImageView {
public NumberIcon(Context context) {
this(context, null);
}
public NumberIcon(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public NumberIcon(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);
mTextPaint = new TextPaint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setAntiAlias(true);
//使view和数字关联上
mTextPaint.setTextSize(getPaddingRight());
mTextPaint.setStrokeWidth(5);
}
private Paint paint = null;
private TextPaint mTextPaint = null;
//表示信息数量
int num;
private float mCx;
private float mCy;
private float mR;
public void setNum(int num) {
this.num = num;
invalidate();
}
public int getNum() {
return num;
}
private int showNumMode = SHOW_NUM_MODE_0;
public int getShowNumMode() {
return showNumMode;
}
public void setShowNumMode(int showNumMode) {
this.showNumMode = showNumMode;
invalidate();
}
public static final int SHOW_NUM_MODE_0 = 0;
public static final int SHOW_NUM_MODE_1 = 1;
@Override
protected void onDraw(Canvas canvas) {
//先画头像,再画红圆圈,再画文字
//定位顺序,先有头像头像右上角有文字,文字正中心是圆心
// 先画头像
super.onDraw(canvas);
switch (showNumMode) {
case SHOW_NUM_MODE_0:
if (num > 0 && num < 100) {
//画红圆
//确定圆心?
mCx = getWidth() - getPaddingRight() - 0.5f * mTextPaint.measureText("" + num);
mCy = (float) (getPaddingTop() + 1.5 * mTextPaint.getFontMetrics().bottom);
mR = mTextPaint.getTextSize();
canvas.drawCircle(mCx, mCy, mR, paint);
//绘制文字
canvas.drawText(num + "", getWidth() - getPaddingRight() - mTextPaint.measureText("" + num),
getPaddingTop() + mTextPaint.getFontMetrics().bottom * 3.0f, mTextPaint
);
} else {
if (num > 99) {
//画红圆
//确定圆心?
mCx = getWidth() - getPaddingRight() - 0.5f * mTextPaint.measureText("99+");
mCy = (float) (getPaddingTop() + 1.5 * mTextPaint.getFontMetrics().bottom);
mR = mTextPaint.getTextSize();
canvas.drawCircle(mCx, mCy, mR, paint);
//绘制文字
canvas.drawText("99+", getWidth() - getPaddingRight() - mTextPaint.measureText("99+"),
getPaddingTop() + mTextPaint.getFontMetrics().bottom * 3.0f, mTextPaint
);
}
}
break;
case SHOW_NUM_MODE_1:
//小红圆
if (num > 0) {
//画圆
mCx = getWidth() - getPaddingRight();
mCy = (float) (getPaddingTop());
mR = getPaddingTop() / 5 * 4;
canvas.drawCircle(mCx, mCy, mR, paint);
}
break;
}
}
}
简单说明一下:
public static final int SHOW_NUM_MODE_0 = 0;
public static final int SHOW_NUM_MODE_1 = 1;
代码默认showNumMode = SHOW_NUM_MODE_0;
如果想让它显示右上角为一个红色实心点只需要在MainActivity中调用setShowNumMode(SHOW_NUM_MODE_1)即可
效果图:
当showNumMode = SHOW_NUM_MODE_0时用sum标记聊天时信息的数量,实际开发中可调用该封装好的类对sum进行酌情操作。