12/1 of custom View learning, custom view learning 12

12/1 of custom View learning, custom view learning 12

Thanks to AigeStudio for providing the custom view (address http://blog.csdn.net/aigestudio). below is my understanding and demo after reading the Aige explanation. If there is something wrong, you are welcome to point out.

Here, you can customize the view of a circular level bar to enhance your understanding of the custom.

Ideas:
1. You need to draw a background circle, and then a progress circle covering the background circle.
2. Use a thread to create an animation for the Progress circle.
3. Return to the origin point when the progress circle reaches the perfection and give a callback.

Now let's draw a hollow circle.

Code block

/** Paint brush of the background circle */private paint Paint;/** Paint brush of the progress bar circle */private paint paint1;/** set the coordinate point of the matrix */private RectF rectF; /** screen height */private int width = 0;/** garden radius */private int circleRadius = 0; /** start coordinate of Y axis of garden */private int circleStartY = 20;/** start coordinate of Y axis of garden plus radius of garden * 2 */private int circleEndy = 0; /** I generally like to directly write three constructor methods for reference */public CircleView (Context context) {super (context); init (context);} public CircleVi Ew (Context context, AttributeSet attrs) {super (context, attrs); init (context);} public CircleView (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); init (context);}/** initialize paint brush */private void init (Context context) {Paint = new paint (); // reference paint1 = new Paint () in the layout xml; // reference paint in the layout xml. setAntiAlias (true); // you can specify the image watermark to be used. setColor (getResources (). getColor (R. Color. char_circlebackground); paint. setStyle (Style. STROKE); // set the center to empty the painting. setStrokeWidth (dip2px (context, 10); // you must first set the brush style SYROKE or FILL_AND_STROKE paint to set the brush shape to a circle. setStrokeCap (Paint. cap. ROUND); paint1.setAntiAlias (true); // you can specify the value of paint1.setColor (getResources (). getColor (R. color. char_circleplan); paint1.setStyle (Style. STROKE); paint1.setStrokeWidth (dip2px (context, 10); paint1.setStrokeCap (Pain T. cap. ROUND); width = (WindowManager) context. getSystemService (Context. WINDOW_SERVICE )). getdefadisplay display (). getWidth (); rows = width/4; circleEndy = circleStartY + circleRadius * 2; rectF = new RectF (width/2-circleRadius, circleStartY, width/2 + circleRadius, circleEndy ); // arc} @ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); // The first parameter is the circle size, which is controlled according to the matrix. The second parameter starts at which point and has been clockwise. Therefore, 90 is at the bottom. 0 is the rightmost. The third parameter is a canvas with a circle degree of 360. drawArc (rectF, 90,360, false, paint); // The level is 4/1, so it is 90 canvas. drawArc (rectF, 90, 90, false, paint1);}/** input dp, returns px */public float dip2px (Context context, float dpValue) {final float scale = context. getResources (). getDisplayMetrics (). density; return (float) (dpValue * scale + 0.5f );}

The effect is as follows:

The results have been drawn. But there is something missing. Now everything in the view is dead, so you have to make him alive and have an animation. After the full level, the system will automatically perform the anti-zero operation. So I added the following code:

/** Paint brush of the background circle */private paint Paint;/** Paint brush of the progress bar circle */private paint paint1;/** set the coordinate point of the matrix */private RectF rectF; /** screen height */private int width = 0;/** garden radius */private int circleRadius = 0; /** start coordinate of Y axis of garden */private int circleStartY = 20;/** start coordinate of Y axis of garden plus radius of garden * 2 */private int circleEndy = 0; /** initial progress */private float currentPorcent = 0;/** progress */private float maxPorcent = 0;/** full-level callback */public Rest OreCirclr rc;/** restore? */public boolean isRestore = false;/** I generally like to write three constructor methods directly to reference */public CircleView (Context context) {super (context); init (context);} public CircleView (Context context, AttributeSet attrs) {super (context, attrs); init (context );} public CircleView (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); init (context);}/** initialize paint brush */private Void init (Context context) {paint = new Paint (); // reference paint1 = new Paint () in the layout xml; // reference paint in the layout xml. setAntiAlias (true); // you can specify the image watermark to be used. setColor (getResources (). getColor (R. color. char_circlebackground); paint. setStyle (Style. STROKE); // set the center to empty the painting. setStrokeWidth (dip2px (context, 10); // you must first set the brush style SYROKE or FILL_AND_STROKE paint to set the brush shape to a circle. setStrokeCap (Paint. cap. ROUND); paint1.setAntiAlias (true); // set Anti-aliasing paint1.setColor (getResources (). getColor (R. color. char_circleplan); paint1.setStyle (Style. STROKE); paint1.setStrokeWidth (dip2px (context, 10); paint1.setStrokeCap (Paint. cap. ROUND); width = (WindowManager) context. getSystemService (Context. WINDOW_SERVICE )). getdefadisplay display (). getWidth (); circleRadius = width/4; circleEndy = circleStartY + circleRadius * 2; rectF = new RectF (width/2-circleR Adius, circleStartY, width/2 + circleRadius, circleEndy); // arc} @ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); // The first parameter is the circle size, which is controlled according to the matrix. The second parameter starts at which point and has been clockwise. Therefore, 90 is at the bottom. 0 is the rightmost. The third parameter is a canvas with a circle degree of 360. drawArc (rectF, 90,360, false, paint); // The level is 4/1, so it is 90 canvas. drawArc (rectF, 90, currentPorcent, false, paint1); if (currentPorcent = 0) {handler. postDelayed (drawRunnable, 0) ;}/ ** start the animation refresh interface */public void invalidateView () {handler. postDelayed (drawRunnable, 0);} private Handler handler = new Handler (); Runnable drawRunnable = new Runnable () {@ Override public void run () {If (! IsRestore) {// animation if (currentPorcent> = maxPorcent) {currentPorcent = maxPorcent; invalidate (); // remove the current Runnable handler. removeCallbacks (drawRunnable);} else {currentPorcent + = 5; // The animation speed is set to 5 currently. Debug handler. postDelayed (drawRunnable, (long) (1300/maxPorcent); invalidate () ;}if (currentPorcent = 360) {if (rc! = Null) {isRestore = rc. onRestoreCirclr (); handler. postDelayed (drawRunnable, 0) ;}} else {// after full level, the empirical animation returns 0 progress if (currentPorcent <= 0) {currentPorcent = 0; invalidate (); handler. removeCallbacks (drawRunnable);} else {currentPorcent-= 3; // The animation speed is currently 3. You can debug the handler at a speed of 0 based on experience values. postDelayed (drawRunnable, (long) (1300/maxPorcent); invalidate () ;}}}; public boolean isRestore () {return isRestore;} public void setRestore (boolean isRestore) {this. isRestore = isRestore;}/** sets the level progress, passes in the upgrade experience, and the current experience maxPorcent is the percentage of the current experience in the upgrade experience */public void setCirclePlan (int max, int current) {maxPorcent = (int) (float) 360/(float) max) * current);}/** incoming dp, returns px */public float dip2px (Context context, float dpValue) {final float scale = context. getResources (). getDisplayMetrics (). density; return (float) (dpValue * scale + 0.5f);}/** set the color of the garden line */public void setCircleColor (int color) {paint. setColor (color);}/** set the color of the Progress line */public void setCirclePlanColor (int color) {paint1.setColor (color);} public void setRc (RestoreCirclr rc) {this. rc = rc;} public interface RestoreCirclr {public boolean OnRestoreCirclr ();}

The calling code in mainActivity is as follows:

Private CircleView circleView;/** upgrade experience: 100 */private int max;/** current experience is 10 */private int current; /** experience plus 10 */private Button button_1; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main_activity); circleView = (CircleView) findViewById (R. id. circleView); button_1 = (Button) findViewById (R. id. button_1); button_1.setOnClickListener (this); max = 100; current = 10; circleView. setCirclePlan (max, current); // The progress bar is full. The number of upgrades is 100, and the number of current experiences is 10 circleView. setRc (new RestoreCirclr () {// callback after full level @ Override public boolean OnRestoreCirclr () {// if the return value is true after full level, the current = 0 is returned; return true ;}}) ;}@ Override public void onClick (View v) {switch (v. getId () {case R. id. button_1: current + = 10; circleView. setRestore (false); // The value of false indicates that circleView is added. setCirclePlan (max, current); circleView. invalidateView (); // refresh view break ;}}

:
Because I wrote my blog for the first time and won't make that kind of movable GIF image, the animation effect is invisible. If you are interested to see the animation effect can go (http://download.csdn.net/detail/u013895206/8431395) this address to download the source code.
This article describes how to customize the view. You are welcome to correct the error. Learn from each other. For the first time I wrote a blog, I hope you will have a lot of support. Bless your siblings in advance for a happy new year ..

Not complete to be continued ,,,