android自定义View-欢迎页倒计时ProgressBar(配合RxJava2)

平常是使用其他app的时候发现欢迎页右上角或者其他部位会有一个倒计时的ProgressBar, 最近有空就自己实现了下。

大体上分为三个步骤， 首先是自定义属性，然后onDraw中绘制view，最后在使用的时候配合RxJava2实现progress刷新。

贴上代码实现：

1 attrs文件中：

<declare-styleable name="CustomProgressBar">
<attr name="maxProress" format="integer"/>
<attr name="currentProgress" format="integer"/>
<attr name="circleWidth" format="dimension"/>
<attr name="backgroundWidth" format="dimension"/>
<attr name="circleColor" format="color"/>
<attr name="backgroundColor" format="color"/>
<attr name="textColor" format="color"/>
<attr name="textSize" format="dimension"/>
</declare-styleable>

2 CustomProgressBar.java

public class CustomProgressBar extends View {
private String content = "跳过";
private int mMaxProgress = 100;
private int mCircleWidth = 3;
private int mTextSize = 45;
private int mBackgroundWidth = 100;
private int mCircleColor = 0xff0000;
private int mTextColor = 0xf0ffff;
private int mCurrentProgress = 0;
private int mStartAngel = 0;
private int mBackgroundColor = 0xcfcfcf;
private RectF rectF;
private Paint mBgPaint;
private Paint mProgressPaint;
private Paint mTextPaint;

private int swipeAngel = 0;
private Rect mTextRect;
private float mTextY;

public CustomProgressBar(Context context) {
this(context, null);
}

public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public CustomProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttrs(context, attrs, defStyleAttr);
}

private void initAttrs(Context context, AttributeSet attrs, int defStyleAttr) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyleAttr, 0);
int indexCount = typedArray.getIndexCount();
for (int i = 0; i < indexCount; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.CustomProgressBar_maxProress:
mMaxProgress = typedArray.getInt(attr, 100);
break;
case R.styleable.CustomProgressBar_circleColor:
mCircleColor = typedArray.getColor(attr, 0xff0000);
break;
case R.styleable.CustomProgressBar_textColor:
mTextColor = typedArray.getColor(attr, 0xff0000);
break;
case R.styleable.CustomProgressBar_circleWidth:
mCircleWidth = typedArray.getDimensionPixelSize(attr, 3);
break;
case R.styleable.CustomProgressBar_backgroundWidth:
mBackgroundWidth = typedArray.getDimensionPixelSize(attr, 10);
break;
case R.styleable.CustomProgressBar_currentProgress:
mCurrentProgress = typedArray.getInt(attr, 0);
break;
case R.styleable.CustomProgressBar_backgroundColor:
mBackgroundColor = typedArray.getColor(attr, 0xcfcfcf);
break;
case R.styleable.CustomProgressBar_textSize:
mTextSize = typedArray.getDimensionPixelSize(attr, 45);
break;
}
}
typedArray.recycle();
mBgPaint = new Paint();
mBgPaint.setColor(mBackgroundColor);
mBgPaint.setStyle(Paint.Style.FILL);
mBgPaint.setAntiAlias(true);
mBgPaint.setStrokeWidth(mBackgroundWidth / 2);

mProgressPaint = new Paint();
mProgressPaint.setColor(mCircleColor);
mProgressPaint.setStyle(Paint.Style.STROKE);
mProgressPaint.setAntiAlias(true);
mProgressPaint.setStrokeWidth(mCircleWidth);

mTextPaint = new Paint();
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setTypeface(Typeface.DEFAULT);
mTextPaint.setTextAlign(Paint.Align.LEFT);
mTextRect = new Rect();
mTextPaint.getTextBounds(content, 0, content.length(), mTextRect);

mTextY = mTextPaint.descent() - mTextPaint.ascent();

rectF = new RectF(5, 5, mBackgroundWidth - 5, mBackgroundWidth - 5);
mStartAngel = mCurrentProgress * 360 / 100 - 90;

}

//    @Override
//    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        setMeasuredDimension(mBackgroundWidth, mBackgroundWidth);
//    }

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float baseLine = getMeasuredHeight() / 2 + mTextPaint.getTextSize() / 2 - mTextPaint.getFontMetrics().descent;
//画背景
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBackgroundWidth / 2, mBgPaint);
//画进度
canvas.drawArc(rectF, mStartAngel, swipeAngel, false, mProgressPaint);

canvas.drawText(content, getWidth() / 2 - mTextRect.width() / 2, baseLine, mTextPaint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
if (listener != null) listener.onClick();
return true;
}
return super.onTouchEvent(event);
}

public void setProgress(int progress) {
if (progress > 100) progress = 100;
if (progress < 0) progress = 0;
swipeAngel = progress * 360 / mMaxProgress;
invalidate();
}

public void start() {
mCurrentProgress--;
if (mCurrentProgress < 0) mCurrentProgress = 0;
swipeAngel = mCurrentProgress * 360 / mMaxProgress;
invalidate();
}

public interface OnClickListener {
void onClick();
}

public void setOnClickListener(OnClickListener listener) {
this.listener = listener;
}

public OnClickListener listener;

}

3 代码中使用:

Observable.interval(400,30, TimeUnit.MILLISECONDS)
.take(100)
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<Long>() {
@Override
public void onSubscribe(Disposable d) {
}

@Override
public void onNext(Long aLong) {
mProgressBar.start();
}

@Override
public void onError(Throwable e) {

}

@Override
public void onComplete() {
setupWindowAnimations();
judgeTurn();
}
});

整体上感觉不难，是个简单的自定义view。 具体代码请查看我的github项目，还有更多精彩内容：
https://github.com/MrDeclanCoder/KotlinMVPRxJava2Dagger2GreenDaoRetrofitDemo

欢迎star！！欢迎fork！！