自定义ImageView实现图片上传进度显示

最近自己在做个app名叫Bingo，其中需要上传图片到服务器上，于是仿QQ传输图片的效果实现图片上传功能，效果如下面两张图片：

初始化Paint画笔

    private Paint imagePaint;
    private Paint textPaint;

    protected void initPainters(Context context) {
        imagePaint = new Paint();
        imagePaint.setAntiAlias(true);
        imagePaint.setStyle(Paint.Style.FILL);

        textPaint = new TextPaint();
        textPaint.setColor(Color.parseColor("#FFFFFF"));
        textPaint.setTextSize(DisplayUtil.sp2px(context, 18));
        textPaint.setAntiAlias(true);
        setProgressStart();
    }

处理上传进度和显示的文字

    private int progress = 0;

    //获得显示的文字
    private String getDrawText() {
        if (progress >= 0 && progress <= 100) {
            return progress+"%";
        }
        return null;
    }

    public void setProgressStart() {
        setProgress(-1);
    }

    public void setProgressFinish() {
        setProgress(101);
    }

    public void setProgress(int progress){
        this.progress=progress;
        postInvalidate(); //更新View绘制
    };

在onDraw中画出图形

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (progress < 0) {
            imagePaint.setColor(Color.parseColor("#70000000"));
            canvas.drawRect(0, 0, getWidth(), getHeight(), imagePaint);
        } else if (progress > 100) {
            imagePaint.setColor(Color.parseColor("#00000000"));
            canvas.drawRect(0, 0, getWidth(), getHeight(), imagePaint);
        } else {
            imagePaint.setColor(Color.parseColor("#70000000"));
            canvas.drawRect(0, 0, getWidth(), getHeight() - getHeight() * progress / 100, imagePaint);

            imagePaint.setColor(Color.parseColor("#00000000"));
            canvas.drawRect(0, getHeight() - getHeight() * progress / 100, getWidth(), getHeight(), imagePaint);

            String text = getDrawText();
            if (!TextUtils.isEmpty(text)) {
                float textHeight = textPaint.descent() + textPaint.ascent();
                canvas.drawText(text, (getWidth() - textPaint.measureText(text)) / 2.0f, (getWidth() - textHeight) / 2.0f, textPaint);
            }
        }
    }

整理小的知识点

要绘图，首先得调整画笔，待画笔调整好之后，再将图像绘制到画布上，这样才可以显示在手机屏幕上。Android 中的画笔是 Paint类，Paint 中包含了很多方法对其属性进行设置， 上面用到的主要方法如下：

• setAntiAlias: 设置画笔的锯齿效果。
• setColor: 设置画笔颜色
• setTextSize: 设置字体尺寸。
• setStyle: 设置画笔风格，空心或者实心。
• setStrokeWidth: 设置空心的边框宽度。

TextPaint是Paint的子类，用它可以很方便的进行文字的绘制，一般情况下遇到绘制文字的需求时，我们一般用TextPaint所提供的方法。 绘制text的高度的时候会用到textPaint.descent()和textPaint.ascent()，他们的意义如下：

Baseline是基线，在Android中，文字的绘制都是从Baseline处开始的，Baseline往上至字符“最高处”的距离我们称之为ascent（上坡度），Baseline往下至字符“最低处”的距离我们称之为descent（下坡度），leading（行间距）则表示上一行字符的descent到该行字符的ascent之间的距离。