Android高仿iOS圆环进度条

Android高仿iOS圆环进度条

一、目标

实现圆环进度条,为神马笔记播放笔记的录音元素做准备。

二、参考项目

开源项目 描述
ldoublem / RingProgress a circle progress bar with effect
HotBitmapGG / RingProgressBar A material design circle the progress bar.

三、系统功能类

描述
ShapeDrawable 使用各种Shape的Drawable。
ArcShape A material design circle the progress bar.

四、实现代码

添加了start()stop()接口,使之产生动画效果。

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
public class RingView extends View {

long duration;
long progress;

long startTime;
long endTime;
boolean isRunning;

ShapeDrawable drawable;
RingShape shape;

float indentSize;

public RingView(Context context) {
this(context, null);
}

public RingView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public RingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}

public RingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);

{
this.shape = new RingShape(-90, 0);
this.drawable = new ShapeDrawable(shape);

float value = 2.6f;
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
float strokeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, metrics);
this.indentSize = strokeWidth / value;
indentSize *= 1.4f;

Paint paint = drawable.getPaint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(strokeWidth);
paint.setStrokeCap(Paint.Cap.BUTT);
paint.setStrokeJoin(Paint.Join.ROUND);
}

}

public void setDuration(long duration) {
this.duration = duration;

this.postInvalidate();
}

public void setProgress(long progress) {
this.progress = progress;

this.postInvalidate();
}

public void start() {
this.startTime = SystemClock.elapsedRealtime();
this.endTime = startTime;

this.isRunning = true;

this.invalidate();

}

public void stop() {
if (!isRunning) {
return;
}

this.endTime = SystemClock.elapsedRealtime();
this.progress += (this.endTime - this.startTime);

this.isRunning = false;

this.invalidate();
}

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

if (this.getWidth() <= 0 || this.getHeight() <= 0) {
return;
}

{
this.drawProgress(canvas);
}

if (isRunning) {
this.invalidate();
}
}

void drawProgress(Canvas canvas) {

long current = this.progress;
if (isRunning) {
current += (SystemClock.elapsedRealtime() - this.startTime);
}

long total = this.duration;

{
float sweepAngle = 0;
if (total > 0) {
sweepAngle = 360.f;
sweepAngle = (current < total)? (360.f * current / total): sweepAngle;
}

shape.setSweepAngle(sweepAngle);

}

{
float strokeWidth = this.indentSize;

int left = (int)strokeWidth;
int top = (int)strokeWidth;
int right = (int)(this.getWidth() - strokeWidth);
int bottom = (int)(this.getHeight() - strokeWidth);
drawable.setBounds(left, top, right, bottom);
drawable.draw(canvas);
}
}

/**
*
*/
private static class RingShape extends RectShape {
private float mStartAngle;
private float mSweepAngle;

/**
* RingShape constructor.
*
* @param startAngle the angle (in degrees) where the arc begins
* @param sweepAngle the sweep angle (in degrees). Anything equal to or
* greater than 360 results in a complete circle/oval.
*/
public RingShape(float startAngle, float sweepAngle) {
mStartAngle = startAngle;
mSweepAngle = sweepAngle;
}

/**
* @return the angle (in degrees) where the arc begins
*/
public final float getStartAngle() {
return mStartAngle;
}

public void setStartAngle(float startAngle) {
this.mStartAngle = startAngle;
}

/**
* @return the sweep angle (in degrees)
*/
public final float getSweepAngle() {
return mSweepAngle;
}

public void setSweepAngle(float sweepAngle) {
this.mSweepAngle = sweepAngle;
}

@Override
public void draw(Canvas canvas, Paint paint) {
canvas.drawArc(rect(), mStartAngle, mSweepAngle, false, paint);
}

@Override
public void getOutline(Outline outline) {
// Since we don't support concave outlines, arc shape does not attempt
// to provide an outline.
}

@Override
public RingShape clone() throws CloneNotSupportedException {
return (RingShape) super.clone();
}
}
}

五、开发过程回顾

实现圆环的核心代码是Canvas#drawArc()方法。

借鉴了ArcShape代码,实现RingShape,并结合ShapeDrawable使用。

六、接下来

组合出录音的RecyclerView的ViewHolder。

继续完成神马笔记录音功能。

七、Finally

须菩提。 若有人言。 如来若来若去。若坐若卧。 是人不解我所说义。 何以故。 如来者。 无所从来。亦无所去。 故名如来。