fresco自定义进度条ProgressBarImage

第一种：继承drawable

public class ImageLoadingDrawable extends Drawable{

private Paint mRingBackgroundPaint;
private int mRingBackgroundColor;
// 画圆环的画笔
private Paint mRingPaint;
// 圆环颜色
private int mRingColor;
// 半径
private float mRadius;
// 圆环半径
private float mRingRadius;
// 圆环宽度
private float mStrokeWidth;
// 圆心x坐标
private int mXCenter;
// 圆心y坐标
private int mYCenter;
// 总进度
private int mTotalProgress = 10000;
// 当前进度
private int mProgress;

public ImageLoadingDrawable(){
initAttrs();
}

private void initAttrs() {
mRadius = 16;
mStrokeWidth = 4;
mRingBackgroundColor = 0xFFadadad;
mRingColor = 0xFF0EB6D2;
mRingRadius = mRadius + mStrokeWidth / 2;
initVariable();
}

private void initVariable() {
mRingBackgroundPaint = new Paint();
mRingBackgroundPaint.setAntiAlias(true);
mRingBackgroundPaint.setColor(mRingBackgroundColor);
mRingBackgroundPaint.setStyle(Paint.Style.STROKE);
mRingBackgroundPaint.setStrokeWidth(mStrokeWidth);

mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
mRingPaint.setStrokeWidth(mStrokeWidth);
}

@Override
public void draw(Canvas canvas) {
drawBar(canvas,mTotalProgress,mRingBackgroundPaint);
drawBar(canvas,mProgress,mRingPaint);
}

private void drawBar(Canvas canvas, int level, Paint paint) {
if (level > 0 ) {
Rect bound= getBounds();
mXCenter = bound.centerX();
mYCenter = bound.centerY();
RectF oval = new RectF();
oval.left = (mXCenter - mRingRadius);
oval.top = (mYCenter - mRingRadius);
oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
canvas.drawArc(oval, -90, ((float) level / mTotalProgress) * 360, false, paint); //
}
}

@Override
protected boolean onLevelChange(int level) {
mProgress = level;
if(level > 0 && level < 10000) {
invalidateSelf();
return true;
}else {
return false;
}
}

@Override
public void setAlpha(int alpha) {
mRingPaint.setAlpha(alpha);
}

@Override
public void setColorFilter(ColorFilter cf) {
mRingPaint.setColorFilter(cf);
}

@Override
public int getOpacity() {
return DrawableUtils.getOpacityFromColor(this.mRingPaint.getColor());
}
}

主要是重写onLevelChange，然后在里面调用invalidateSelf()，而调用invalidateSelf()时，会重绘，调用draw(Canvas canvas)

但是这种方式要自己通过Canvas自己画，有一定的复杂和难度。那就在想是否可以通过一张美工提供的loading图片实现呢？

第二种：使用AnimationDrawable

AnimationDrawable animationDrawable = new AnimationDrawable();
Drawable drawable = mActivity.getResources().getDrawable(R.drawable.loading);
if(drawable != null){
animationDrawable.addFrame(drawable,200);
animationDrawable.setOneShot(false);
}
GenericDraweeHierarchyBuilder hierarchyBuilder = new GenericDraweeHierarchyBuilder(mActivity.getResources());
hierarchyBuilder
.setProgressBarImage(animationDrawable)
.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE)
.setFailureImage(mActivity.getResources().getDrawable(R.drawable.empty_photo));
photoView.setHierarchy(hierarchyBuilder.build());

R.drawable.loading是一个xml文件，一般情况下使用AnimationDrawable 需要很多帧图片构成加载动画，这里使用一张图片即可搞定。

loading.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/spinner_76_inner"
android:pivotX="50%"
android:pivotY="50%"
/>

得到AnimationDrawable 之后只要设置给GenericDraweeHierarchy，然后将其配置给SimpleDraweeView就好了