android仿照IOS AppStore下載進度條
下面有效果圖,本人也是在網上搜集進度條之後修改而成,不喜勿噴!
先上效果圖
public class TasksCompletedView2 extends View {
// 畫最外邊圓環的畫筆
private Paint mCirclePaint;
// 畫圓環的畫筆
private Paint mRingPaint;
//矩形畫筆
private Paint mRectPaint;
// 圓環顏色
private int mRingColor;
// 半徑
private float mRadius;
// 圓環半徑
private float mRingRadius;
// 圓環寬度
private float mStrokeWidth;
// 矩形寬度
private float rectWidth;
// 圓心x座標
private int mXCenter;
// 圓心y座標
private int mYCenter;
// 總進度
private int mTotalProgress = 100;
// 當前進度
private int mProgress;
// 最外層圓的寬度
private int mcircleWidth = 6;
public TasksCompletedView2(Context context, AttributeSet attrs) {
super(context, attrs);
// 獲取自定義的屬性
initAttrs(context, attrs);
initVariable();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
rectWidth = typeArray.getDimension(R.styleable.TasksCompletedView_myrectWidth, 15);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
mRingRadius = mRadius + mStrokeWidth / 2 - mcircleWidth/2;
}
private void initVariable() {
//最外層圓形畫筆
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mRingColor);
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setStrokeWidth(mcircleWidth);
//動態圓弧畫筆
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
//動態弧形的寬度
mRingPaint.setStrokeWidth(mStrokeWidth);
mRectPaint = new Paint();
mRectPaint.setAntiAlias(true);
mRectPaint.setColor(mRingColor);
mRectPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onDraw(Canvas canvas) {
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;
//畫出最外層的圓
canvas.drawCircle(mXCenter, mYCenter, mRadius+mcircleWidth, mCirclePaint);
//畫出裡面的矩形
canvas.drawRect(mXCenter-rectWidth, mYCenter-rectWidth, mXCenter+rectWidth, mYCenter+rectWidth, mRectPaint);
//動態畫圓環
if (mProgress > 0 ) {
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)mProgress / mTotalProgress) * 360, false, mRingPaint); //
}
}
public void setProgress(int progress) {
mProgress = progress;
postInvalidate();
}
}
在values下新建一個attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TasksCompletedView">
<attr name="radius" format="dimension"/>
<attr name="strokeWidth" format="dimension"/>
<attr name="myrectWidth" format="dimension"/>
<attr name="circleColor" format="color"/>
<attr name="ringColor" format="color"/>
</declare-styleable>
</resources>
這樣就完成了,如果要使用在layout中這樣就可
<com.snailws.taskscompleted.activity.TasksCompletedView2
android:id="@+id/tasks_view"
android:layout_width="55dp"
android:layout_height="55dp"
tc:radius="20dip"
tc:strokeWidth="5dip"
tc:myrectWidth="8dip"
tc:ringColor="@color/ring_color" />
最後主要有一些自定義屬性沒有用,可以自行修改,本人技術太菜,專案趕進度所以匆匆記錄一下