自定义环形进度条
我的博客首页,希望大家喜欢。
废话不多说,上自定义圆环代码:
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"/>
注意一下这里的包名,和你们的是不一样的,你们需要写你们自己的包名。