Android进阶之自定义view(三)

本菜最近整理了一下Android自定义View的代码实现(大神勿喷),适合Android初级开发人员学习,有任何错误或问题欢迎留言
今天我们用自定义view实现聊天头像以及聊天数量的计数(右上角为未读信息的数量):
Android进阶之自定义view(三)_第1张图片
代码如下:

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进行酌情操作。

你可能感兴趣的:(Android)