Android仿音乐播放器带进度的播放暂停按钮

因为项目需要，要做一个下载暂停开始的按钮，要求按钮上显示进度。网上找了找没有合适的，不太满意，于是自己动手写了一个。

效果如下：

主要步骤：

1、最外侧的圆环。

2、圆环内侧代表进度的圆弧。

3、暂停时在中心部位画出三角形。

4、播放时在中心部位画出矩形。

5、重写ontouch方法，down事件时设置播放或者暂停的状态。

6、添加一个状态监听器，在调用者中监听状态。

7、设置进度，重绘。

代码比较简单，所以贴出来view的代码，activity和布局文件就不写了：

/** 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方法就可以设置进度。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。