android两种圆形进度条

来源：互联网发布：亚马逊读书软件编辑：程序博客网时间：2024/06/14 19:23

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

其中效果图如下:

关键代码如下:

扇形进度条

@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

0 0