Android Custom Ring Progress Bar
- 2021-12-12 09:45:11
- OfStack
Android custom ring progress bar for your reference, the specific content is as follows
The requirement is to realize a circular progress bar with progress in the middle, and realize one by yourself
package com.djt.aienglish.widget;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import com.djt.aienglish.R;
/**
* @author qiu
* @date 2020/3/12 13:51
*/
public class CirclePgBar extends View {
private int mHeight = 0;
private int mWidth = 0;
// A brush for drawing rings
private Paint mRingPaint;
// Brush background color for drawing rings
private Paint mRingPaintBg;
// A brush for drawing fonts
private Paint mTextPaint;
// Ring color
private int mRingColor;
// Ring background color
private int mRingBgColor;
// Radius
private float mRadius;
// Ring radius
private float mRingRadius;
// Ring width
private float mStrokeWidth;
// Center of Circle x Coordinates
private int mXCenter;
// Center of Circle y Coordinates
private int mYCenter;
// The length of a word
private float mTxtWidth;
// Height of words
private float mTxtHeight;
// Total progress
private int max = 100;
// Current progress
private int progress;
private String text;
public CirclePgBar(Context context, AttributeSet attrs) {
super(context, attrs);
// Get custom properties
initAttrs(context, attrs);
initVariable();
}
/**
* Attribute
*/
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.TasksCompletedView, 0, 0);
mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_circleWidth, 0);
mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);
mRingBgColor = typeArray.getColor(R.styleable.TasksCompletedView_ringBgColor, 0xFFFFFFFF);
text = typeArray.getString(R.styleable.TasksCompletedView_text);
max = typeArray.getInteger(R.styleable.TasksCompletedView_max, 0);
progress = typeArray.getInteger(R.styleable.TasksCompletedView_progress, 0);
}
/**
* Initialize brush
*/
private void initVariable() {
// Outer circular arc background
mRingPaintBg = new Paint();
mRingPaintBg.setAntiAlias(true);
mRingPaintBg.setColor(mRingBgColor);
mRingPaintBg.setStyle(Paint.Style.STROKE);
mRingPaintBg.setStrokeWidth(mStrokeWidth);
// Outer arc
mRingPaint = new Paint();
mRingPaint.setAntiAlias(true);
mRingPaint.setColor(mRingColor);
mRingPaint.setStyle(Paint.Style.STROKE);
mRingPaint.setStrokeWidth(mStrokeWidth);
//mRingPaint.setStrokeCap(Paint.Cap.ROUND);// Set the line emitting style, which has a circle Be well-behaved
// Middle word
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(mRingColor);
invalidate();
}
// Measurement
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// Actual measured width and height
mHeight = getMeasuredHeight();
mWidth = getMeasuredWidth();
if (mWidth > mHeight) {
mRadius = mHeight / 2;
} else {
mRadius = mWidth / 2;
}
// Radius
mRingRadius = mRadius - mStrokeWidth / 2;
// Text width and height measurement
mTextPaint.setTextSize(mRadius / 2);
Paint.FontMetrics fm = mTextPaint.getFontMetrics();
mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
}
/**
* Draw a picture
*/
@Override
protected void onDraw(Canvas canvas) {
mXCenter = mWidth / 2;
mYCenter = mHeight / 2;
// Outer circular arc background
RectF rectBg = new RectF(mXCenter - mRingRadius, mYCenter - mRingRadius, mXCenter + mRingRadius, mYCenter + mRingRadius);
canvas.drawArc(rectBg, 0, 360, false, mRingPaintBg);
// Outer arc // Progress
if (progress > 0) {
RectF oval = new RectF(mXCenter - mRingRadius, mYCenter - mRingRadius, mXCenter + mRingRadius, mYCenter + mRingRadius);
canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, mRingPaint);
}
// Font
if(!TextUtils.isEmpty(text)) {
mTxtWidth = mTextPaint.measureText(text, 0, text.length());
canvas.drawText(text, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);
}
}
/**
* Setting progress
*
* @param progress
*/
public void setProgress(int progress) {
this.progress = progress;
postInvalidate();// Redraw
}
/**
* Set the maximum value
*
* @param max
*/
public void setMax(int max) {
this.max = max;
postInvalidate();
}
/**
* Set text content
*
* @param text
*/
public void setText(String text) {
this.text = text;
postInvalidate();
}
}
Don't forget to add the default configuration attribute in attr. xml under value
<!-- Arc progress bar -->
<declare-styleable name="TasksCompletedView">
<attr name="circleWidth" format="dimension" />
<attr name="ringColor" format="color" />
<attr name="ringBgColor" format="color" />
<attr name="text" format="string" />
<attr name="progress" format="integer" />
<attr name="max" format="integer" />
</declare-styleable>