Ring progress bar, circular progress bar

Ring progress bar, circular progress bar

Reference http://blog.csdn.net/jdsjlzx/article/details/42497135 for this article

First:

Custom Control: AttendanceProgressBar

The Code is as follows:

1 public class AttendanceProgressBar extends View {2 // Paint brush 3 private Paint mCirclePaint at the bottom of the ring; 4 // Paint brush 5 private Paint mRingPaint for the ring; 6 // Paint font 7 private Paint mTextPaint; 8 // Circular Color 9 private int mCircleColor; 10 // ring color 11 private int mRingColor; 12 // radius 13 private float mRadius; 14 // ring radius 15 private float mRingRadius; 16 // ring width 17 private float mStrokeWidth; 18 // center x coordinate 19 private int mXCe Nter; 20 // y coordinate of the Center 21 private int mYCenter; 22 // The length of the word 23 private float mTxtWidth; 24 // The height of the word 25 private float mTxtHeight; 26 // total progress 27 private int mTotalProgress = 100; 28 // current progress 29 private int mProgress = 80; 30 // font color 31 private int mTextColor; 32 // font size 33 private float mTextSize; 34 35 public AttendanceProgressBar (Context context, AttributeSet attrs) {36 super (context, attrs); 37 // obtain Custom Attributes Sex 38 initAttrs (context, attrs); 39 initVariable (); 40} 41 42 private void initAttrs (Context context, AttributeSet attrs) {43 TypedArray typeArray = context. getTheme (). obtainStyledAttributes (attrs, 44 R. styleable. attendanceProgressBar, 0, 0); 45 mRadius = typeArray. getDimension (R. styleable. attendanceProgressBar_radius, 80); 46 mStrokeWidth = typeArray. getDimension (R. styleable. attendanceProgressBa R_strokeWidth, 10); 47 mCircleColor = typeArray. getColor (R. styleable. attendanceProgressBar_circleColor, 0 xFFFFFFFF); 48 mRingColor = typeArray. getColor (R. styleable. attendanceProgressBar_ringColor, 0 xFFFFFFFF); 49 mTextColor = typeArray. getColor (R. styleable. attendanceProgressBar_textColor, 0xFF000000); 50 mTextSize = typeArray. getDimension (R. styleable. attendanceProgressBar_textSize, 80); 51 52 mRin GRadius = mRadius + mStrokeWidth/2; 53} 54 55 private void initVariable () {56 mCirclePaint = new Paint (); 57 mCirclePaint. setAntiAlias (true); 58 mCirclePaint. setColor (mCircleColor); 59 // mCirclePaint. setStyle (Paint. style. FILL); 60 mCirclePaint. setStyle (Paint. style. STROKE); 61 mCirclePaint. setStrokeWidth (mStrokeWidth); 62 63 mRingPaint = new Paint (); 64 mRingPaint. setAntiAlias (true); 65 mRingP Aint. setColor (mRingColor); 66 mRingPaint. setStyle (Paint. style. STROKE); 67 mRingPaint. setStrokeWidth (mStrokeWidth); 68 69 mTextPaint = new Paint (); 70 mTextPaint. setAntiAlias (true); 71 mTextPaint. setStyle (Paint. style. FILL); 72 mTextPaint. setColor (mTextColor); 73 // mTextPaint. setARGB (255,255,255,255); 74 // mTextPaint. setTextSize (mRadius/2); 75 mTextPaint. setTextSize (mTextSize); 76 Paint. fontM Etrics fm = mTextPaint. getFontMetrics (); 77 mTxtHeight = (int) Math. ceil (fm. descent-fm. ascent); 78 79} 80 81 @ Override 82 protected void onDraw (Canvas canvas) {83 84 mXCenter = getWidth ()/2; 85 mYCenter = getHeight ()/2; 86 87 // canvas. drawCircle (mXCenter, mYCenter, mRadius, mCirclePaint); 88 89 canvas. drawCircle (mXCenter, mYCenter, mRingRadius, mCirclePaint); 90 RectF oval = new RectF (); 91 oval. left = (mXCenter-mRingRadius); 92 oval. top = (mYCenter-mRingRadius); 93 oval. right = mRingRadius * 2 + (mXCenter-mRingRadius); 94 oval. bottom = mRingRadius * 2 + (mYCenter-mRingRadius); 95 canvas. drawArc (oval,-90, (float) mProgress/mTotalProgress) * 360, false, mRingPaint); // 96 // canvas. drawCircle (mXCenter, mYCenter, mRadius + mStrokeWidth/2, mRingPaint); 97 // String txt = MProgress + "%"; 98 String txt = "16/18"; 99 mTxtWidth = mTextPaint. measureText (txt, 0, txt. length (); 100 // canvas. drawText (txt, mXCenter-mTxtWidth/2, mYCenter + mTxtHeight/4, mTextPaint); 101 canvas. drawText (txt, mXCenter-mTxtWidth/2, mYCenter + mTxtHeight/4-dipToPx (10), mTextPaint); 102 txt = "Attendance"; 103 mTxtWidth = mTextPaint. measureText (txt, 0, txt. length (); 104 canvas. drawText (t Xt, mXCenter-mTxtWidth/2, mYCenter + mTxtHeight/4 + dipToPx (10), mTextPaint); 105} 106 107 public void setProgress (int progress) {108 mProgress = progress; 109 postInvalidate (); 110} 111 private int dipToPx (int dip) {112 float scale = getContext (). getResources (). getDisplayMetrics (). density; 113 return (int) (dip * scale + 0.5f * (dip> = 0? 1:-1); 114} 115 116 117}

View Code

Because it is a custom control, some control attributes are defined in the attr. xml file to set these attributes in the xml file.

The Code is as follows:

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="AttendanceProgressBar">        <attr name="radius" format="dimension"/>        <attr name="strokeWidth" format="dimension"/>        <attr name="circleColor" format="color"/>        <attr name="ringColor" format="color"/>        <attr name="textColor" format="color"/>        <attr name="textSize" format="dimension"/>    </declare-styleable></resources>

View Code

Finally, you can use

<com.ztd.lieyi.widget.AttendanceProgressBar                android:layout_gravity="center"                android:layout_width="100dp"                android:layout_height="100dp"                app:radius="45dp"                app:strokeWidth="5dp"                app:textSize="@dimen/text_16"                app:textColor="@color/color_333333"                app:circleColor="@color/color_d5ebfd"                app:ringColor="@color/color_2c9df7"/>

View Code

This is only a preliminary process. You can handle it as needed ~