_StriveG Blog

一个仿qq图片上传的Drawable

发表于 | |

前言

感觉qq聊天里面，传图片的效果很赞，感觉可以用到自己的项目里，因此，也写了一个这个效果，实现方式非常简单。就是一个Drawable。

ProgressDrawable

先看下效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
package com.guolei.customviews;
//                    _    _   _ _
//__      _____  _ __| | _| |_(_) | ___
//\ \ /\ / / _ \| '__| |/ / __| | |/ _ \
// \ V  V / (_) | |  |   <| |_| | |  __/
//  \_/\_/ \___/|_|  |_|\_\\__|_|_|\___|
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.Log;
/**
 * Copyright © 2013-2017 Worktile. All Rights Reserved.
 * Author: guolei
 * Email: 1120832563@qq.com
 * Date: 18/1/17
 * Time: 下午2:17
 * Desc:
 */
public class ProgressDrawable extends Drawable {
    private float progress;
    private Paint mPaint;
    private Paint mTextPaint;
    private Path path = new Path();
    private RectF rectF = new RectF(0, 0, 0, 0);
    private int mBaseline = 0;
    public ProgressDrawable() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.parseColor("#99000000"));
        mTextPaint = new Paint(mPaint);
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextSize(40);
    }
    public float getProgress() {
        return progress;
    }
    public void setProgress(float progress) {
        this.progress = progress;
        invalidateSelf();
    }
    @Override
    public void draw(@NonNull Canvas canvas) {
        path.reset();
        path.addRect(rectF, Path.Direction.CCW);
        int radius = (int) (progress * ((rectF.right) / 2 * 1.414 - 100)) + 100;
        path.addCircle(rectF.right / 2, rectF.right / 2, radius > 100 ? radius : 100 , Path.Direction.CW);
        canvas.drawPath(path, mPaint);
        canvas.drawCircle(rectF.right / 2, rectF.right / 2, 80, mPaint);
        String s = String.valueOf(progress * 100).substring(0,2) + "%";
        s = s.replace(".","");
        int width = (int) mTextPaint.measureText(s);
        canvas.drawText(s, rectF.right / 2 - (width / 2), mBaseline, mTextPaint);
    }
    @Override
    public void setAlpha(int i) {
    }
    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
    }
    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
    @Override
    protected void onBoundsChange(Rect bounds) {
        rectF.set(0, 0, bounds.right, bounds.bottom);
        computeBaseline();
    }
    private void computeBaseline() {
        mBaseline = (int) (rectF.height() / 2 + (Math.abs(mTextPaint.ascent()) - mTextPaint.descent()) / 2);
    }
}

代码很简单，根据进度去绘制，分为3个部分。

  • 外圈 由path合成
  • 内圈 Circle
  • 字

最近访客