Android Custom Circle Progress and display percent example control (pure code implementation)

Source: Internet
Author: User
Tags drawtext

First of all, thank the company can give me free time to stabilize my technology, let me continue to explore research, here is grateful.
Not to mention the implementation function, see the effect
This is a continuation of the last levelDiscolorationthe progress bar has a brand newControl, theory of realization principle
1. Analysis control: The control is basically a circle-inline circle;

2. Schedule calculation: In fact, the second-grade primary math problem: current progress/total = percentage;

3. Intermediate time: Oh, pure flicker, do not explain (current time).

Theory is always too far from the practice gap, not to talk about, do not boast, paste code:

Package Com.spring.progressview;import Java.text.simpledateformat;import Java.util.date;import Android.annotation.suppresslint;import Android.content.context;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.paint.align;import Android.graphics.paint.style;import Android.graphics.rect;import Android.graphics.rectf;import Android.util.attributeset;import android.view.view;/**** * Circle Progress Control * @author Spring Sky * email:[email protected] *: http://download.csdn.net/detail/vipa1888/7637905 */public class Roundprogressview extends View {/** outermost color value */private int moutroundcolor = COLOR.ARGB (60, 255, 255, 255),/** center circle color value */private int mcenterroundcolor = COLOR.ARGB (255, 255, 255, 2 55);/** Progress color */private int mprogressroundcolor = COLOR.ARGB (255, 255, 255, 255)/** Progress background color */private int Mprogressroundbgcolor = Color.argb (100, 255, 255, 255);/** progress bar width */private int mprogresswidth = 5;private int[] Colors = {C Olor. white,color.red};/*** Font FacialColor */private int mtextcolor = COLOR.RGB (118, 181,);p rivate float mpencenttextsize = 65;private int mwidth,mheight;private int mpaddingx;private float mprogress = 0.5f;private float Mmax = 1.0f;/** * Time display format */private SimpleDateFormat MDateForma t = new SimpleDateFormat ("HH:mm:ss. S ");p rivate paint mpaint = new paint ();p ublic Roundprogressview (context context, AttributeSet attrs, int defstyle) {super ( Context, attrs, defstyle); init ();} Public Roundprogressview (context context, AttributeSet Attrs) {Super (context, attrs); init ();} Public Roundprogressview (Context context) {super (context); init ();} public void init () {} @SuppressLint ("Drawallocation") @Overrideprotected void OnDraw (canvas canvas) {Super.ondraw ( Canvas); mwidth = GetWidth (); mheight = GetHeight (); if (Mwidth > Mheight) {mpaddingx = (mwidth-mheight)/2;mwidth = Mheight;} Mpaint.setantialias (TRUE); Anti-aliasing Mpaint.setstyle (Style.fill); Mpaint.setcolor (Moutroundcolor); RECTF Oval = new RECTF (new Rect (MPADDINGX, 0, Mwidth+mpaddingx, mheight)); CanvAs.drawarc (oval, 0, N, True, mpaint); int halfwidth = Mwidth/6;mpaint.setcolor (Mprogressroundbgcolor); Mpaint.setstrokewidth (mprogresswidth); Mpaint.setstyle (style.stroke); oval = new RECTF (new Rect (HALFWIDTH+MPADDINGX, Halfwidth, Halfwidth*5+mpaddingx, halfwidth*5)); Canvas.drawarc (oval, 0, N, False, Mpaint); Mpaint.setcolor ( Mprogressroundcolor); Canvas.drawarc (oval, 360*mprogress/mmax, false, mpaint); halfwidth = MWIDTH/4; Mpaint.setstyle (Style.fill); Mpaint.setcolor (mcenterroundcolor); oval = new RECTF (new Rect (HALFWIDTH+MPADDINGX, Halfwidth, Halfwidth*3+mpaddingx, halfwidth*3)); Canvas.drawarc (oval, 0, N, False, Mpaint); Mpaint.reset (); Mpaint.settextsize (mpencenttextsize); Mpaint.setcolor (Mtextcolor); Mpaint.setstyle (Style.fill); Mpaint.settextalign (Align.center); String number = (int) (Mprogress*100/mmax) + ""; Canvas.drawtext (number, MWIDTH/2+MPADDINGX, mheight/2+mpencenttextsize /3, Mpaint), float textWidth = mpaint.measuretext (number), Mpaint.settextsize (MPENCENTTEXTSIZE/2); Canvas.drawtext ("% ", mwidth/2+mpaddingx+textwidth/2+5, MHEIGHT/2-MPENCENTTEXTSIZE/8, Mpaint); Mpaint.settextsize (MPENCENTTEXTSIZE/2 ); Canvas.drawtext (Mdateformat.format (New Date (System.currenttimemillis ())), Mwidth/2+mpaddingx, mHeight/2+ Halfwidth/4*3, mpaint);} public void Setmax (float mmax) {This.mmax = Mmax;} public void setprogress (float mprogress) {this.mprogress = Mprogress;invalidate ();} public float Getmax () {return mmax;} public float getprogress () {return mprogress;}}



Although there are just less than 200 lines of code, but there are some basic functions inside, I have to simply explain
1. Color.argb (60, 255, 255, 255); This is to get a color, and set his transparency, the first parameter is transparency, between 0~255, the other RGB, hehe, do not explain, own to engage.
2. The following two methods, which are the methods of the brush, are important

mpaint. SetStyle (Style. STROKE); This is the original display of hollow things

Mpaint. Setstrokewidth (mprogresswidth); This is the outermost width of the hollow.
For example: DrawArc is to draw a circle, then, we set the above two methods, is to draw a hollow circle, the width of the circle is Mprogresswidth
3. When you draw a circle, start the degree and the end of the degree must be controlled well.
4. If you do not understand, please learn more: Canvas and paint related methods and APIs, it is highly appreciated.


The purpose of this blog is to share, I also hope to provide you with some ideas, I hope you have good controls are shared out, greatly appreciated.

Well, blog posted out, there must be a lot of people to demo, in order to prevent the spider crawling and lost, address please see the code on the note point.
reprint Please indicate the author's source: Spring Sky .














Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.