带波形进度的环形进度条实现

自定义环形进度条

我的博客首页,希望大家喜欢。

废话不多说，上自定义圆环代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import java.text.NumberFormat;

public class Draws extends View {

private Paint mPaint, mPaint2;
private Path mPath = new Path();
protected int mViewWidth, mViewHeight;
protected int mWidth, mHeight;
private float r, rArc, x;
private float percent = 0.5f;
private RectF rectF;
private PointF mPointF = new PointF(0, 0);

public Draws(Context context, AttributeSet attrs) {
    super(context, attrs);

    mPaint = new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setStrokeWidth(1);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setTextSize(40);

    mPaint2 = new Paint();
    mPaint2.setColor(Color.CYAN);
    mPaint2.setStrokeWidth(2);
    mPaint2.setStyle(Paint.Style.FILL);
}

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    mViewWidth = w;
    mViewHeight = h;

    mWidth = mViewWidth - getPaddingLeft() - getPaddingRight();
    mHeight = mViewHeight - getPaddingTop() - getPaddingBottom();

    r = Math.min(mWidth, mHeight) * 0.4f;

    rectF = new RectF(-r, -r, r, r);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.translate(mViewWidth / 2, mViewHeight / 2);

    mPaint.setStyle(Paint.Style.FILL);

    mPaint.setColor(Color.GREEN);

    canvas.drawCircle(0, 0, r + 4, mPaint);

    mPaint.setColor(Color.argb(220, 220, 220, 220));

    canvas.drawCircle(0, 0, r, mPaint);

• 绘制一个最外围的半个圆弧，为了美观，可以不写

  RectF oval = new RectF();
  oval.top = -r - 6;
  oval.left = -r - 6;
  oval.right = 126;
  oval.bottom = 126;
  mPaint.setColor(Color.WHITE);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeWidth(6);
  canvas.drawArc(oval, 180, 180, false, mPaint);
  

• 下面是准备绘制波形进度条的

  rArc = r * (1 - 2 * percent);//percent 0-1
  
  double angle = Math.acos((double) rArc / r);
  
  x = r * (float) Math.sin(angle);
  

• 给绘制中间的波形进度设置路径

  mPath.addArc(rectF, 90 - (float) Math.toDegrees(angle),
          (float) Math.toDegrees(angle) * 2);
  mPath.moveTo(-x, rArc);
  mPath.rQuadTo(x / 2, -r / 8, x, 0);
  mPath.rQuadTo(x / 2, r / 8, x, 0);
  

• 为了给不同的进度时显示不同的圆环背景颜色

  if (percent < 0.6)
  {
      mPaint2.setColor(Color.CYAN);
  }
  else if (percent < 0.8)
  {
      mPaint2.setColor(Color.BLUE);
  }
  else
  {
      mPaint2.setColor(Color.RED);
  }
  canvas.drawPath(mPath, mPaint2); //开始绘制波形进度
  mPath.rewind(); //回收路径设置
  
  
  /**
   * 画文字
   */
  NumberFormat numberFormat = NumberFormat.getPercentInstance();
  numberFormat.setMinimumFractionDigits(1);
  textCenter(new String[] { numberFormat.format(percent) }, mPaint,
          canvas, mPointF, Paint.Align.CENTER);
  

  }

      protected void textCenter(String[] strings, Paint paint, Canvas canvas,
           PointF point, Paint.Align align) {
  paint.setTextAlign(align);
  Paint.FontMetrics fontMetrics = paint.getFontMetrics();
  float top = fontMetrics.top;
  float bottom = fontMetrics.bottom;
  int length = strings.length;
  float total = (length - 1) * (-top + bottom)
          + (-fontMetrics.ascent + fontMetrics.descent);
  float offset = total / 2 - bottom;
  

• • 绘制圆环中间的文字，为了精确的控制显示的位置

    for (int i = 0; i < length; i++) {
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.WHITE);
        float yAxis = -(length - i - 1) * (-top + bottom) + offset;
        canvas.drawText(strings[i], point.x, point.y + yAxis, paint);
    }
    

    }

  • • 设置圆环的进度

      public void setProgress(float percent) {
      //percent是从0到1；
      if (percent != 0) {
          this.percent = percent;
      } else {
          this.percent = 0;
      }
      invalidate();
      }
      }
      

然后在xml文件里面引用即可

        <com.winorout.cashbook.Painting.Draws
            android:layout_marginTop="-80dp"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"/>

注意一下这里的包名，和你们的是不一样的，你们需要写你们自己的包名。