android两种圆形进度条

本例中用两种方法实现圆形进度条,一种是得到进度后计算出扇形面积,然后画出相应的扇形;另一种方法是根据进度计算水平的出面积,因为是水平的方式实现进度,所以不能直接画出,需要先画一个扇形,然后再在扇形上方画一个三角形的方式实现,话就不多说了,

其中效果图如下:



关键代码如下:

扇形进度条

@Override protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// mTempRect.set(0, 0, mDrawableSize, mDrawableSize);

// mTempRect.offset((getWidth() - mDrawableSize) / 2, (getHeight() - mDrawableSize) / 2);

// mTempRect.set(0, 0, mInnerSize, mInnerSize);

// mTempRect.offset((getWidth() - mInnerSize) / 2, (getHeight() - mInnerSize) / 2);

mTempRectF.set(-0.5f, -0.5f, mInnerSize + 0.5f, mInnerSize + 0.5f);

mTempRectF.offset((getWidth() - mInnerSize) / 2, (getHeight() - mInnerSize) / 2);

canvas.drawArc(mTempRectF, 0, 360, true, mCirclePaint);

canvas.drawArc(mTempRectF, -90, 360 * mProgress / mMax, true, mProgressPaint);

if (mAnimating) {

canvas.drawArc(mTempRectF, -90 + (360 * mAnimationProgress / mMax), mAnimationStripWidth,

true, mProgressPaint);

}

Paint paint =new Paint();

paint.setColor(Color.BLACK);

paint.setTextSize(18);

canvas.drawText(mProgress+"%", (getWidth() - mInnerSize/2) / 2, getHeight() / 2, paint);

Drawable iconDrawable = isChecked() ? mPinnedDrawable : mUnpinnedDrawable;

// iconDrawable.setBounds(mTempRect);

iconDrawable.draw(canvas);

// mShadowDrawable.setBounds(mTempRect);

// mShadowDrawable.draw(canvas);

}

水平进度条:

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

centerX = radius + circleWidth;

centerY = radius + circleWidth;

float realRadius = radius - circleWidth / 2;

float filledHeight = getFilledHeightByProgress();

float width = (float) (realRadius * Math.sin(mRadians));

/**

* 绘制圆环并填充

*/

mCirclePaint.setColor(circleBgColor);

mCirclePaint.setStrokeWidth(circleWidth);

mCirclePaint.setStyle(Paint.Style.FILL_AND_STROKE);

mCirclePaint.setAntiAlias(true);

canvas.drawCircle(centerX, centerX, radius, mCirclePaint);

/**

* 绘制扇形并填充

*/

mCirclePaint.setColor(filledColor);

mCirclePaint.setStyle(Paint.Style.FILL);

mCirclePaint.setAntiAlias(true);

mRectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);

canvas.drawArc(mRectF, mStartAngle, mSwipeAngle, true, mCirclePaint);

/**

* 填充三角形

*/

mTrianglePath = new Path();

mTrianglePath.moveTo(centerX, centerY);

mTrianglePath.lineTo(centerX - width, centerY + radius - filledHeight);

mTrianglePath.lineTo(centerX + width, centerY + radius - filledHeight);

mTrianglePath.lineTo(centerX, centerY);

mTrianglePath.close();

if (mProgress > 0 && mProgress < maxValue / 2) {

mTrianglePaint.setColor(circleBgColor);

mTrianglePaint.setStrokeWidth(2.0f);

mTrianglePaint.setStyle(Paint.Style.FILL_AND_STROKE);

canvas.drawPath(mTrianglePath, mTrianglePaint);

} else if (mProgress > maxValue / 2 && mProgress < maxValue) {

mTrianglePaint.setColor(filledColor);

mTrianglePaint.setStrokeWidth(2.0f);

mTrianglePaint.setStyle(Paint.Style.FILL_AND_STROKE);

canvas.drawPath(mTrianglePath, mTrianglePaint);

}

/**

* 绘制文字

*/

if (isShowText) {

mTextPaint.setColor(textColor);

mTextPaint.setTextSize(textSize);

String text = mProgress + mSuffix;

float textWidth = mTextPaint.measureText(text);

FontMetrics fontMetrics = mTextPaint.getFontMetrics();

float ascent = fontMetrics.ascent;

float descent = fontMetrics.descent;

float baseY = (ascent + descent) / 2;

canvas.drawText(text, centerX - textWidth / 2, centerY - baseY, mTextPaint);

}

}

上面两种方法是借鉴别人的Demo而来,被我稍加修改后整合到一起了,如果有问题欢迎一起研究讨论.

链接(一):http://www.eoeandroid.com/forum.php?mod=viewthread&tid=586214&highlight=%E8%BF%85%E9%9B%B7%2B%E5%9C%86%E5%BD%A2

链接(二):https://github.com/f2prateek/progressbutton

本例Demo下载地址:http://download.csdn.net/detail/txzdl/8971905