CircleProgressbar ,圆形的Loading

CircleProgress,一个圆形的加载的progressbar，实现起来其实很简单，就是一个path，和pathMeather的使用

_1493447079.gif

github链接
很多的自定义View

如上图，gif图有点卡顿，使用方法如下：

其中属性如下

属性	功能
circleDuration	一圈的时间延迟
circleRadio	圆的半径大小
circleWidth	圆环的宽度

代码考入到工程就能使用

布局文件XML

在Activity里面的使用

    mProgressbar = (CircleProgressbar)findViewById(R.id.circleprogress);
    List mColorList=new ArrayList<>();
    mColorList.add(Color.GRAY);
    mColorList.add(Color.GREEN);
    mColorList.add(Color.BLUE);
    mColorList.add(Color.RED);
    mColorList.add(Color.YELLOW);
    mProgressbar.setColorList(mColorList);

其中有一个方法，mProgressbar.setColorList(mColorList);需要传入一个color的List集合,为progressbar的随机颜色。

CircleProgressbar的主要代码实现如下：

public class CircleProgressbar extends View {
private Path mPath;
private Paint mPaint;
private PathMeasure mPathMeasure;
private float mAnimatorValue;
private Path mDst;
private float mLength;
private int mRadio;
private List mColorList=new ArrayList<>();
private int mCircleWidth= 10;
private int mCirclerColor;
private int mCircleDuration=1500;
private Random mRandom=new Random();
private Handler handler=new Handler(){
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what){
            case 1:
                mCirclerColor=mColorList.get(mRandom.nextInt(mColorList.size())); //随机的颜色
                handler.sendEmptyMessageDelayed(1,mCircleDuration);
            break;
        };
    }
};
private ValueAnimator mValueAnimator;
private float mStop;
private float mStart;
private ValueAnimator mValueAnimatorEnd;
private int mCircleRadio;

public void setColorList(List mColorList) {
    this.mColorList = mColorList;
    handler.sendEmptyMessageDelayed(1,0);
    setAnim();
}

public CircleProgressbar(Context context) {
    super(context);
    init(context,null,0);
}

public CircleProgressbar(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context,attrs,0);
}

public CircleProgressbar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context,attrs,defStyleAttr);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int width;
    int height;
    width=mRadio*2+mCircleWidth;
    height=mRadio*2+mCircleWidth;
    setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? widthSize
            : width, (heightMode == MeasureSpec.EXACTLY) ? heightSize
            : height);
}

private void init(Context context, AttributeSet attrs, int defStyleAttr) {
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressbar, defStyleAttr, 0);

    int n = a.getIndexCount();

    for (int i = 0; i < n; i++) {
        int attr = a.getIndex(i);
        switch (attr) {
            case R.styleable.CircleProgressbar_circleDuration:
                mCircleDuration = a.getInt(attr,500);
                break;
            case R.styleable.CircleProgressbar_circleRadio:
                mCircleRadio = a.getInt(attr,25);
                break;
            case R.styleable.CircleProgressbar_circleWidth:
                mCircleWidth = a.getColor(attr, Color.GRAY);
                break;
        }
    }
    a.recycle();


    mRadio=dip2px(context,mCircleRadio);
    mPathMeasure = new PathMeasure();
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(mCircleWidth);
    mPaint.setColor(mCirclerColor);
    mPath = new Path();
    mPath.addCircle(mRadio+mCircleWidth/2, mRadio+mCircleWidth/2, mRadio, Path.Direction.CW);
    mPathMeasure.setPath(mPath, true);
    mLength = mPathMeasure.getLength();
    mDst = new Path();
}

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

    mPath.addCircle(mRadio+mCircleWidth/2, mRadio+mCircleWidth/2, mRadio, Path.Direction.CW);
    mPathMeasure.setPath(mPath, true);
    mPaint.setColor(mCirclerColor);

    mDst.reset();
    // 硬件加速的BUG
    mDst.lineTo(0,0);
    mStop = mLength * mAnimatorValue;
    mStart = (float) (mStop - ((0.5 - Math.abs(mAnimatorValue - 0.5)) * mLength));
    mPathMeasure.getSegment(mStart, mStop, mDst, true);
    canvas.drawPath(mDst, mPaint);
}

//停止progressbar
public void destoryProgressbar() {
    if(handler!=null&&mValueAnimator!=null){
        setVisibility(GONE);
    }
}

public void startProgressbar(){
    if(handler!=null&&mValueAnimator!=null){
        setVisibility(VISIBLE);
    }
}

//开始的动画
private void setAnim() {
    mValueAnimator = ValueAnimator.ofFloat(0, 1);
    mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mAnimatorValue = (float) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    mValueAnimator.setDuration(mCircleDuration);
    mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    mValueAnimator.start();
}

private void setEndAnim() {
    mValueAnimatorEnd = ValueAnimator.ofInt(mRadio,0);
    mValueAnimatorEnd.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            int value = (int) valueAnimator.getAnimatedValue();
            mRadio=value;
            invalidate();
        }
    });
    mValueAnimatorEnd.setDuration(mCircleDuration);
    mValueAnimatorEnd.setRepeatCount(ValueAnimator.INFINITE);
    mValueAnimatorEnd.start();
}

public static int dip2px(Context context, float dpValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dpValue * scale + 0.5f);
}

}

在onDraw里面

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

mPath.addCircle(mRadio+mCircleWidth/2, mRadio+mCircleWidth/2, mRadio, Path.Direction.CW);
mPathMeasure.setPath(mPath, true);
mPaint.setColor(mCirclerColor);

mDst.reset();
// 硬件加速的BUG
mDst.lineTo(0,0);
mStop = mLength * mAnimatorValue;
mStart = (float) (mStop - ((0.5 - Math.abs(mAnimatorValue - 0.5)) * mLength));
mPathMeasure.getSegment(mStart, mStop, mDst, true);
canvas.drawPath(mDst, mPaint);
}

用path路径画了圆，在圆的起始位置和结束的位置，让其位置发生改变，这里就需要用到pathMeather这个类了，在动画中有所体现

//开始的动画
private void setAnim() {
mValueAnimator = ValueAnimator.ofFloat(0, 1);
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        mAnimatorValue = (float) valueAnimator.getAnimatedValue();
        invalidate();
    }
});
mValueAnimator.setDuration(mCircleDuration);
mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
mValueAnimator.start();
}

如上就是PathMeather的使用mPathMeasure.getSegment(mStart, mStop, mDst, true)这一句是关键，不知道含义的可以上网查一查，有很多简介的。

颜色的随机赋值，就是使用了handler的延迟来做的。