Android 可滚动圆形进度条 滑块和进度在进度条上面跟着滚动。package com.example.test;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Matrix;

import android.graphics.Paint;

import android.graphics.PointF;

import android.graphics.RectF;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

public class MusicProgressBar extends View{

/**

* 画笔对象的引用

*/

private Paint paint;

/**

* 圆环的颜色

*/

private int roundColor;

/**

* 圆环进度的颜色

*/

private int roundProgressColor;

/**

* 圆环的宽度

*/

private float roundWidth;

/**

* 最大进度

*/

private int max;

/**

* 当前进度

*/

private int progress;

/**

* 中间进度百分比的字符串的颜色

*/

private int textColor;

/**

* 中间进度百分比的字符串的字体

*/

private float textSize;

/**

* 点的半径

*/

private float pointRadius;

/**

* 空心点的宽度

*/

private float pointWidth;

private Drawable mThumb, mThumbPress;

public MusicProgressBar(Context context) {

this(context, null);

}

public MusicProgressBar(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public MusicProgressBar(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

paint = new Paint();

//TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);

//获取自定义属性和默认值

roundColor =Color.RED;// mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.RED);

roundProgressColor =Color.GREEN;// mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, Color.GREEN);

roundWidth =3;// mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 3);

textColor =Color.BLACK;// mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);

textSize =8;// mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);

max =100;// mTypedArray.getInteger(R.styleable.RoundProgressBar_imageMax, 100);

pointRadius =3;// mTypedArray.getDimension(R.styleable.RoundProgressBar_pointRadius, 3);

pointWidth =2;// mTypedArray.getDimension(R.styleable.RoundProgressBar_pointWidth, 2);

// mTypedArray.recycle();

// 加载拖动图标

mThumb = getResources().getDrawable(R.drawable.ic_launcher);// 圆点图片

int thumbHalfheight = mThumb.getIntrinsicHeight() / 2;

int thumbHalfWidth = mThumb.getIntrinsicWidth() / 2;

mThumb.setBounds(-thumbHalfWidth, -thumbHalfheight, thumbHalfWidth, thumbHalfheight);

mThumbPress = getResources().getDrawable(R.drawable.ic_launcher);// 圆点图片

thumbHalfheight = mThumbPress.getIntrinsicHeight() / 2;

thumbHalfWidth = mThumbPress.getIntrinsicWidth() / 2;

mThumbPress.setBounds(-thumbHalfWidth, -thumbHalfheight, thumbHalfWidth, thumbHalfheight);

paddingOuterThumb = thumbHalfheight*2;

}

@Override

public void onDraw(Canvas canvas) {

/**

* 画最外层的大圆环

*/

paint.setColor(roundColor); //设置圆环的颜色

paint.setStyle(Paint.Style.STROKE); //设置空心

paint.setStrokeWidth(roundWidth); //设置圆环的宽度

paint.setAntiAlias(true); //消除锯齿

canvas.drawCircle(centerX, centerY, radius, paint); //画出圆环

/**

* 画文字

*/

paint.setStrokeWidth(0);

paint.setColor(textColor);

paint.setTextSize(textSize);

// paint.setTypeface(Typeface.DEFAULT); //设置字体

String textTime = getTimeText(progress);

float textWidth = paint.measureText(textTime); //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

// canvas.drawText(textTime, centerX - textWidth / 2, centerY + textSize/2, paint);

/**

* 画圆弧 ，画圆环的进度

*/

paint.setStrokeWidth(roundWidth); //设置圆环的宽度

paint.setColor(roundProgressColor); //设置进度的颜色

RectF oval = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius); //用于定义的圆弧的形状和大小的界限

paint.setStyle(Paint.Style.STROKE);

canvas.drawArc(oval, 270, 360 * progress / max, false, paint); //根据进度画圆弧

// 画圆上的两个点

paint.setStrokeWidth(pointWidth);

PointF startPoint = ChartUtil.calcArcEndPointXY(centerX, centerY, radius, 0, 270);

canvas.drawCircle(startPoint.x, startPoint.y, pointRadius, paint);

//paint.setStyle(Paint.Style.FILL_AND_STROKE);

PointF progressPoint = ChartUtil.calcArcEndPointXY(centerX, centerY, radius, 360 * progress / max, 270);

//canvas.drawCircle(progressPoint.x, progressPoint.y, pointRadius, paint);

// 画Thumb

canvas.save();

canvas.translate((float)(progressPoint.x+15*Math.sin(360 * progress / max*0.0174533f)), (float)(progressPoint.y-15*Math.cos(360 * progress / max*0.0174533f)));

canvas.rotate(360 * progress / max);

if (downOnArc) {

mThumbPress.draw(canvas);

} else {

mThumb.draw(canvas);

}

canvas.restore();

paint.setStrokeWidth(0);

paint.setColor(textColor);

paint.setTextSize(textSize);

// paint.setTypeface(Typeface.DEFAULT); //设置字体

// String textTime = getTimeText(progress);

// float textWidth = paint.measureText(textTime);

progress-=5;

canvas.rotate(360*(progress+5) / max, (float)(progressPoint.x+26f*Math.sin(360 * progress / max*0.0174533f)),(float)(progressPoint.y-26f*Math.cos(360 * progress / max*0.0174533f)));

canvas.drawText(textTime,(float)(progressPoint.x+26f*Math.sin(360 * progress / max*0.0174533f)),(float)(progressPoint.y-26f*Math.cos(360 * progress / max*0.0174533f)), paint);

canvas.rotate(-360*(progress+5) / max, progressPoint.x, progressPoint.y);

progress+=5;

}

private boolean downOnArc = false;

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

int x = (int) event.getX();

int y = (int) event.getY();

switch (action) {

case MotionEvent.ACTION_DOWN:

if (isTouchArc(x, y)) {

downOnArc = true;

updateArc(x, y);

return true;

}

break;

case MotionEvent.ACTION_MOVE:

if (downOnArc) {

updateArc(x, y);

return true;

}

break;

case MotionEvent.ACTION_UP:

downOnArc = false;

invalidate();

if (changeListener != null) {

changeListener.onProgressChangeEnd(max, progress);

}

break;

}

return super.onTouchEvent(event);

}

private int centerX, centerY;

private int radius;

private int paddingOuterThumb;

@Override

protected void onSizeChanged(int width, int height, int oldw, int oldh) {

centerX = width / 2;

centerY = height / 2;

int minCenter = Math.min(centerX, centerY);

radius = (int) (minCenter - roundWidth/2 - paddingOuterThumb); //圆环的半径

minValidateTouchArcRadius = (int) (radius - paddingOuterThumb*1.5f);

maxValidateTouchArcRadius = (int) (radius + paddingOuterThumb*1.5f);

super.onSizeChanged(width, height, oldw, oldh);

}

// 根据点的位置，更新进度

private void updateArc(int x, int y) {

int cx = x - getWidth() / 2;

int cy = y - getHeight() / 2;

// 计算角度，得出(-1->1)之间的数据，等同于(-180°->180°)

double angle = Math.atan2(cy, cx)/Math.PI;

// 将角度转换成(0->2)之间的值，然后加上90°的偏移量

angle = ((2 + angle)%2 + (90/180f))%2;

// 用(0->2)之间的角度值乘以总进度，等于当前进度

progress = (int) (angle * max/2);

if (changeListener != null) {

changeListener.onProgressChange(max, progress);

}

invalidate();

}

private int minValidateTouchArcRadius; // 最小有效点击半径

private int maxValidateTouchArcRadius; // 最大有效点击半径

// 判断是否按在圆边上

private boolean isTouchArc(int x, int y) {

double d = getTouchRadius(x, y);

if (d >= minValidateTouchArcRadius && d <= maxValidateTouchArcRadius) {

return true;

}

return false;

}

// 计算某点到圆点的距离

private double getTouchRadius(int x, int y) {

int cx = x - getWidth() / 2;

int cy = y - getHeight() / 2;

return Math.hypot(cx, cy);

}

private String getTimeText(int progress) {

int minute = progress / 60;

int second = progress % 60;

String result = (minute < 10 ? "0" : "") + minute + ":" + (second < 10 ? "0" : "") + second;

return result;

}

public synchronized int getMax() {

return max;

}

/**

* 设置进度的最大值

* @param max

*/

public synchronized void setMax(int max) {

if(max < 0){

throw new IllegalArgumentException("max not less than 0");

}

this.max = max;

}

/**

* 获取进度.需要同步

* @return

*/

public synchronized int getProgress() {

return progress;

}

/**

* 设置进度，此为线程安全控件，由于考虑多线的问题，需要同步

* 刷新界面调用postInvalidate()能在非UI线程刷新

* @param progress

*/

public synchronized void setProgress(int progress) {

if(progress < 0){

throw new IllegalArgumentException("progress not less than 0");

}

if(progress > max){

progress = max;

}

if(progress <= max){

this.progress = progress;

postInvalidate();

}

}

public int getCricleColor() {

return roundColor;

}

public void setCricleColor(int cricleColor) {

this.roundColor = cricleColor;

}

public int getCricleProgressColor() {

return roundProgressColor;

}

public void setCricleProgressColor(int cricleProgressColor) {

this.roundProgressColor = cricleProgressColor;

}

public float getRoundWidth() {

return roundWidth;

}

public void setRoundWidth(float roundWidth) {

this.roundWidth = roundWidth;

}

public static class ChartUtil {

/**

* 依圆心坐标，半径，扇形角度，计算出扇形终射线与圆弧交叉点的xy坐标

* @param cirX

* @param cirY

* @param radius

* @param cirAngle

* @return

*/

public static PointF calcArcEndPointXY(float cirX, float cirY, float radius, float cirAngle){

float posX = 0.0f;

float posY = 0.0f;

//将角度转换为弧度

float arcAngle = (float) (Math.PI * cirAngle / 180.0);

if (cirAngle < 90)

{

posX = cirX + (float)(Math.cos(arcAngle)) * radius;

posY = cirY + (float)(Math.sin(arcAngle)) * radius;

}

else if (cirAngle == 90)

{

posX = cirX;

posY = cirY + radius;

}

else if (cirAngle > 90 && cirAngle < 180)

{

arcAngle = (float) (Math.PI * (180 - cirAngle) / 180.0);

posX = cirX - (float)(Math.cos(arcAngle)) * radius;

posY = cirY + (float)(Math.sin(arcAngle)) * radius;

}

else if (cirAngle == 180)

{

posX = cirX - radius;

posY = cirY;

}

else if (cirAngle > 180 && cirAngle < 270)

{

arcAngle = (float) (Math.PI * (cirAngle - 180) / 180.0);

posX = cirX - (float)(Math.cos(arcAngle)) * radius;

posY = cirY - (float)(Math.sin(arcAngle)) * radius;

}

else if (cirAngle == 270)

{

posX = cirX;

posY = cirY - radius;

}

else

{

arcAngle = (float) (Math.PI * (360 - cirAngle) / 180.0);

posX = cirX + (float)(Math.cos(arcAngle)) * radius;

posY = cirY - (float)(Math.sin(arcAngle)) * radius;

}

return new PointF(posX, posY);

}

public static PointF calcArcEndPointXY(float cirX, float cirY, float radius, float cirAngle, float orginAngle){

cirAngle = (orginAngle + cirAngle) % 360;

return calcArcEndPointXY(cirX, cirY, radius, cirAngle);

}

}

private OnProgressChangeListener changeListener;

public void setChangeListener(OnProgressChangeListener changeListener) {

this.changeListener = changeListener;

}

public interface OnProgressChangeListener {

void onProgressChange(int duration, int progress);

void onProgressChangeEnd(int duration, int progress);

}

}