_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

最近访客