美文网首页View篇
自定义View - 仿QQ运动步数进度效果 (代码)

自定义View - 仿QQ运动步数进度效果 (代码)

作者: MrWang915 | 来源:发表于2017-05-18 09:47 被阅读28次

http://www.jianshu.com/p/4e0eb9bb09ab

packagecom.example.mrwang.paintcircu;

importandroid.content.Context;

importandroid.content.res.TypedArray;

importandroid.graphics.Canvas;

importandroid.graphics.Color;

importandroid.graphics.Paint;

importandroid.graphics.RectF;

importandroid.graphics.Typeface;

importandroid.util.AttributeSet;

importandroid.view.View;

/**

* Created by MrWang on 2017/5/15.

*/

public classRoundProgressBarextendsView {

intmMaxStep;//最大数值

intprogress;//当前进度值

intmRoundProgressColor;//半弧进度值

intmTextColor;//字体色值

intmRoundColor;//半弧底色

intmRadius;//半径

intcenterX;//x轴

intcenterY;//y轴

intmPercent;//百分比

floatmRoundWidth;//弧形宽度

PaintmPaint;

publicRoundProgressBar(Context context) {

this(context, null);

}

publicRoundProgressBar(Context context,AttributeSet attrs) {

this(context,attrs,0);

}

publicRoundProgressBar(Context context,AttributeSet attrs, intdefStyleAttr) {

super(context,attrs,defStyleAttr);

mPaint=newPaint();

TypedArray mTypedArray = context.obtainStyledAttributes(attrs,

R.styleable.RoundProgressBar);

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

mRoundColor= mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor,Color.WHITE);

mRoundProgressColor= mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor,Color.parseColor("#fd9426"));

mTextColor= mTypedArray.getColor(R.styleable.RoundProgressBar_textColors,Color.GREEN);

mRoundWidth= mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,5);

mMaxStep= mTypedArray.getInteger(R.styleable.RoundProgressBar_max,100);

mTypedArray.recycle();

}

@Override

protected voidonDraw(Canvas canvas) {

super.onDraw(canvas);

/**画背景圆弧*/

//int centerX = mViewWidth / 2;

//int centerY = mViewHeight / 2;

centerX= getWidth() /2;

centerY= getHeight() /2;

//设置圆弧画笔的宽度

mPaint.setStrokeWidth(mRoundWidth);

//设置为ROUND

mPaint.setStrokeCap(Paint.Cap.ROUND);

mPaint.setStrokeJoin(Paint.Join.ROUND);

//设置画笔颜色

mPaint.setColor(mRoundColor);

mPaint.setStyle(Paint.Style.STROKE);

//半径

mRadius= (int) (centerX-mRoundWidth);

RectF oval =newRectF(centerX-mRadius,centerY-mRadius,centerX+mRadius,centerY+mRadius);

//画背景圆弧

canvas.drawArc(oval,-180,180, true,mPaint);

/**画进度圆弧*/

mPaint.setColor(mRoundProgressColor);

//计算当前百分比

//float percent = (float) progress / mMaxStep;

//根据当前百分比计算圆弧扫描的角度

canvas.drawArc(oval,-180,180*progress/mMaxStep, true,mPaint);

/**画数字进度值* */

mPaint.setStrokeWidth(0);

mPaint.setColor(mTextColor);

mPaint.setTextSize(20);

mPaint.setTypeface(Typeface.DEFAULT_BOLD);//设置字体

//中间的进度百分比,先转换成float在进行除法运算,不然都为0

mPercent= (int) (((float)progress/ (float)mMaxStep) *100);

//画进度值显示位置  这里也可将"progress"直接当进度值

canvas.drawText(mPercent+"",getWidth() /2,getHeight() /2,mPaint);

}

//设置当前最大步数

public synchronized void setMaxStep(intmaxStep) {

if(maxStep <0) {

throw newIllegalArgumentException("maxStep不能小于0!");

}

this.mMaxStep= maxStep;

}

//设置进度

public synchronized void setProgress(intprogress) {

if(progress <0) {

throw newIllegalArgumentException("progress不能小于0!");

}

if(progress >mMaxStep) {

progress =mMaxStep;

}

if(progress <=mMaxStep) {

this.progress= progress;

//重新刷新绘制-> onDraw()

postInvalidate();

}

}

public synchronized intgetProgress() {

return progress;

}

public synchronized intgetMaxStep() {

return mMaxStep;

}

}

相关文章

网友评论

    本文标题:自定义View - 仿QQ运动步数进度效果 (代码)

    本文链接:https://www.haomeiwen.com/subject/zzydxxtx.html