因为项目需要，要做一个下载暂停开始的按钮，要求按钮上显示进度。网上找了找没有合适的，不太满意，于是自己动手写了一个。
效果如下：
主要步骤：
1、最外侧的圆环。
2、圆环内侧代表进度的圆弧。
3、暂停时在中心部位画出三角形。
4、播放时在中心部位画出矩形。
5、重写onTouch方法，DOWN事件时设置播放或者暂停的状态。
6、添加一个状态监听器，在调用者中监听状态。
7、设置进度，重绘。
代码比较简单，所以贴出来View的代码，Activity和布局文件就不写了：
|
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
/** Created by xuzhilei on 2016/8/16. 模仿音乐暂停开始按钮的View */public class PlayButtonView extends View { /** 中心点X轴坐标 */ private int viewCenterX; /** 中心点Y轴坐标 */ private int viewCenterY; /** 有效长度的一般（View长宽较小者的一半） */ private int viewHalfLength; /** 三角形右侧顶点 */ private Point pointA = new Point(); /** 三角形左上顶点 */ private Point pointB = new Point(); /** 三角形左下顶点 */ private Point pointC = new Point(); /** 矩形左边界 */ private int RectLeft; /** 矩形上边界 */ private int RectTOP; /** 矩形右边界 */ private int RectRight; /** 矩形下边界 */ private int RectBottom; /** 三角形的三条边路径 */ private Path path = new Path(); /** 包围最外侧圆环的矩形 */ private RectF rectF = new RectF(); /** 包围进度圆弧的矩形 */ private RectF rectF2 = new RectF(); /** 进度 */ private int progress; /** 暂停中还是播放中 */ private boolean isPlaying = false; /** 是否进行过了测量 */ private boolean isMeasured = false; /** 画笔颜色 */ private int color = 0xffff0099; /** 最外侧圆环画笔 */ private Paint paintA = new Paint(); /** 进度圆弧画笔 */ private Paint paintB = new Paint(); /** 暂停开始画笔 */ private Paint paintC = new Paint(); /** 状态监听器 */ private OnStatusChangeListener onStatusChangeListener; /** 构造器 */ public PlayButtonView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (!isMeasured) { getWidthAndHeight(); isMeasured = true; } } /** 得到视图等的高度宽度尺寸数据 */ private void getWidthAndHeight() { int viewHeight = getMeasuredHeight(); int viewWidth = getMeasuredWidth(); viewCenterX = viewWidth / 2; viewCenterY = viewHeight / 2; viewHalfLength = viewHeight < viewWidth ? viewHeight / 2 : viewWidth / 2; int paintAwidth = viewHalfLength / 15; int paintBwidth = viewHalfLength / 8; rectF.left = viewCenterX - (viewHalfLength - paintAwidth / 2); rectF.top = viewCenterY - (viewHalfLength - paintAwidth / 2); rectF.right = viewCenterX + (viewHalfLength - paintAwidth / 2); rectF.bottom = viewCenterY + (viewHalfLength - paintAwidth / 2); rectF2.left = viewCenterX - (viewHalfLength - paintBwidth / 2); rectF2.top = viewCenterY - (viewHalfLength - paintBwidth / 2); rectF2.right = viewCenterX + (viewHalfLength - paintBwidth / 2); rectF2.bottom = viewCenterY + (viewHalfLength - paintBwidth / 2); paintA.setColor(color); paintA.setStrokeWidth(paintAwidth); paintA.setAntiAlias(true); paintA.setStyle(Paint.Style.STROKE); paintB.setColor(color); paintB.setStrokeWidth(paintBwidth); paintB.setAntiAlias(true); paintB.setStyle(Paint.Style.STROKE); paintC.setColor(color); paintC.setStrokeWidth(1); paintC.setAntiAlias(true); paintC.setStyle(Paint.Style.FILL); pointA.x = viewCenterX + viewHalfLength / 2; pointA.y = viewCenterY; double sin = Math.sin(Math.toRadians(60)); // √(3) / 2 double cos = Math.cos(Math.toRadians(60)); // 1/ 2 pointB.x = (float) ((viewCenterX - cos * viewHalfLength + viewCenterX) / 2); pointB.y = (float) ((viewCenterY - sin * viewHalfLength + viewCenterY) / 2); pointC.x = (float) ((viewCenterX - cos * viewHalfLength + viewCenterX) / 2); pointC.y = (float) ((viewCenterY + sin * viewHalfLength + viewCenterY) / 2); RectLeft = viewCenterX - viewHalfLength / 3; RectTOP = viewCenterY - viewHalfLength / 3; RectRight = viewCenterX + viewHalfLength / 3; RectBottom = viewCenterY + viewHalfLength / 3; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 画未完成进度的圆环 canvas.drawArc(rectF, 0, 360, false, paintA); // 画已经完成进度的圆弧 从-90度开始，即从圆环顶部开始 canvas.drawArc(rectF2, -90, progress * 3.6f, false, paintB); if (isPlaying) { canvas.drawRect(RectLeft, RectTOP, RectRight, RectBottom, paintC); } else { path.reset(); path.moveTo(pointA.x, pointA.y); path.lineTo(pointB.x, pointB.y); path.lineTo(pointC.x, pointC.y); path.close(); canvas.drawPath(path, paintC); } } /** 监听触摸DOWN时间，开始播放，暂停播放 */ @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { isPlaying = !isPlaying; invalidate(); if (isPlaying) { onStatusChangeListener.play(); } else { onStatusChangeListener.pause(); } } return super.onTouchEvent(event); } /** 设置进度 0-100区间 */ public void setProgress(int progress) { if (progress < 0) { progress = 0; } if (progress > 100) { progress = 100; } this.progress = progress; invalidate(); } /** 外界设置播放状态 */ public void setPlaying(boolean isPlaying) { this.isPlaying = isPlaying; invalidate(); } /** 播放暂停状态监听的接口 */ public interface OnStatusChangeListener { void play(); void pause(); } /** 设置监听接口 */ public void setOnStatusChangeListener(OnStatusChangeListener onStatusChangeListener) { this.onStatusChangeListener = onStatusChangeListener; } /** 位置信息 */ private class Point { float x; float y; } |
在调用者中设置OnStatusChangeListener 的监听器即可监听播放状态，通过setProgress方法就可以设置进度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_27102463/article/details/52259910
