Three Popular progress bars for Android custom View

Three Popular progress bars for Android custom View
Overview:

You can use the onDraw () method of the custom View to draw many types of images. The progress box is only one of them.

Demo

This is a demo of simulated download.

Gradually filled circle progress box from the center

Demo1

Public class FirstProgressView extends View {private int width; private int height; private int progress; private int maxProgress = 100; private Paint mPaintBackGround; private Paint mPaintCurrent; private Paint mPaintText; public void setWidth (int width) {this. width = width;} public void setHeight (int height) {this. height = height;} public int getProgress () {return progress;} public void setProgress (int progress) {this. progress = progress; invalidate ();} public int getMaxProgress () {return maxProgress;} public void setMaxProgress (int maxProgress) {this. maxProgress = maxProgress;} public FirstProgressView (Context context) {super (context);} public FirstProgressView (Context context, AttributeSet attrs) {super (context, attrs ); mPaintBackGround = new Paint (); // define a new Paint brush to draw the background mPaintBackGround. setColor (Color. GRAY); // set the paint brush color mPaintBackGround. setAntiAlias (true); // if it is set to true, it indicates that the anti-sawtooth mPaintCurrent = new Paint (); // It is used to draw the Progress Chart mPaintCurrent. setColor (Color. GREEN); mPaintCurrent. setAntiAlias (true); mPaintText = new Paint (); // Paint brush mPaintText used to draw text. setColor (Color. BLACK); mPaintText. setAntiAlias (true); mPaintText. setTextAlign (Paint. align. CENTER); // set the text Layout mode: Central mPaintText. setTextSize (50); // set the text size. Here it is 50xp }@override protected void onDraw (Canvas canvas) {super. onDraw (canvas); // start from left: x coordinate of the center of the circle, y coordinate of the center of the circle, radius, Paint object (Paint brush) canvas. drawCircle (width/2, height/2,400, mPaintBackGround); canvas. drawCircle (width/2, height/2, progress * 400f/maxProgress, mPaintCurrent); // left start: text content, starting position x coordinate, starting position y coordinate, brush canvas. drawText (progress * 100f/maxProgress + %, width/2, height/2, mPaintText);} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); // The View layout width = getDefaultSize (rows (), widthMeasureSpec); // The View layout height = getDefaultSize (getSuggestedMinimumHeight (), heightMeasureSpec); // setMeasuredDimension (width, height );}}

Water Tank Type Water Injection progress Frame

Demo2

public class SecondProgressView extends View {    private int width;    private int height;    private int progress;    private int maxProgress = 100;    private Paint mPaintBackGround;    private Paint mPaintCurrent;    private Paint mPaintText;    public void setWidth(int width) {        this.width = width;    }    public void setHeight(int height) {        this.height = height;    }    public int getProgress() {        return progress;    }    public void setProgress(int progress) {        this.progress = progress;        invalidate();    }    public int getMaxProgress() {        return maxProgress;    }    public void setMaxProgress(int maxProgress) {        this.maxProgress = maxProgress;    }    public SecondProgressView(Context context) {        super(context);    }    public SecondProgressView(Context context, AttributeSet attrs) {        super(context, attrs);        mPaintBackGround = new Paint();        mPaintBackGround.setColor(Color.GRAY);        mPaintBackGround.setStyle(Paint.Style.STROKE);        mPaintBackGround.setStrokeWidth(20);        mPaintBackGround.setAntiAlias(true);        mPaintCurrent = new Paint();        mPaintCurrent.setColor(Color.BLUE);        mPaintCurrent.setAntiAlias(true);        mPaintText = new Paint();        mPaintText.setColor(Color.BLACK);        mPaintText.setAntiAlias(true);        mPaintText.setTextAlign(Paint.Align.CENTER);        mPaintText.setTextSize(50);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawRect(width / 2 - 200, height / 2 - 200, width / 2 + 200, height / 2 + 200, mPaintBackGround);        canvas.drawRect(width/2-190,height/2-190+(380-progress*380f/maxProgress),width/2+190,height/2+190,mPaintCurrent);        canvas.drawText(progress*100f/maxProgress+%,width / 2, height / 2,mPaintText);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);        setMeasuredDimension(width, height);    }}

Circle arc progress frame:

Demo3: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Vc3ryb25np1_vcd4ncjxwcmugy2xhc3m9 "brush: java;"> Public class ThirdProgressView extends View {private int width; private int height; private int progress; private int maxProgress = 100; private Paint mPaintBackGround; private Paint mPaintCurrent; private Paint mPaintText; public void setWidth (int width) {this. width = width;} public void setHeight (int height) {this. height = height;} public int getProgress () {return progress;} public void setProgress (int progress) {this. progress = progress; invalidate ();} public int getMaxProgress () {return maxProgress;} public void setMaxProgress (int maxProgress) {this. maxProgress = maxProgress;} public ThirdProgressView (Context context) {super (context);} public ThirdProgressView (Context context, AttributeSet attrs) {super (context, attrs ); mPaintBackGround = new Paint (); mPaintBackGround. setColor (Color. GRAY); mPaintBackGround. setStrokeWidth (60); mPaintBackGround. setStyle (Paint. style. STROKE); mPaintBackGround. setAntiAlias (true); mPaintCurrent = new Paint (); mPaintCurrent. setColor (Color. GREEN); mPaintCurrent. setStrokeWidth (60); mPaintCurrent. setStyle (Paint. style. STROKE); mPaintCurrent. setAntiAlias (true); mPaintText = new Paint (); mPaintText. setColor (Color. BLACK); mPaintText. setAntiAlias (true); mPaintText. setTextAlign (Paint. align. CENTER); mPaintText. setTextSize (50) ;}@ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); canvas. drawCircle (width/2, height/2,400, mPaintBackGround); RectF oval = new RectF (width/2-400, height/2-400, width/2 + 400, height/2 + 400); // start from the left is the RectF object, starting angle, ending angle, and whether to display the fan side (if true, a fan is drawn ), paint object canvas. drawArc (oval, 0, progress * 360f/maxProgress, false, mPaintCurrent); canvas. drawText (progress * 100f/maxProgress + %, width/2, height/2, mPaintText);} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); width = getDefaultSize (), widthMeasureSpec); height = getDefaultSize (rows (), heightMeasureSpec); setMeasuredDimension (width, height );}}

You need to load the custom View in the layout file. Here you can load a demonstration (the custom View is loaded in this way ):

The custom View of the main activity also needs to be declared and findViewById. Here we write a demo of simulated download, and the third type of custom View is loaded, other custom views are loaded in the same way.

Public class MainActivity extends Activity {private int progress; private Button mButtonStart; private ThirdProgressView mProgressView; private static final int DOWNLOAD_UPDATE = 0x99; // download private Handler mHandler = new Handler () {@ Override public void handleMessage (Message msg) {super. handleMessage (msg); // process msg switch (msg. what) {case DOWNLOAD_UPDATE: progress ++; if (progress <= 100) {mProgressView. setProgress (progress); sendEmptyMessageDelayed (DOWNLOAD_UPDATE, 100); // handler} break ;}}; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mButtonStart = (Button) findViewById (R. id. button_start); mProgressView = (ThirdProgressView) findViewById (R. id. progress_view_first); mButtonStart. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// send a delayed empty message to handler, and send mHandler after 1000 milliseconds. sendEmptyMessageDelayed (DOWNLOAD_UPDATE, 1000 );}});}}