Android Custom View Practice-high imitation Cheetah cleanup master custom memory Aperture ring scale Progress view

I. Overview

See the Cheetah Cleanup Master's memory openings ring proportion Progress is very interesting, so that is to realize the effect of this, so the anti-compiled cheetah cleanup

The master's app looked under, originally there are two pictures, so the brain over the next idea, using the top and bottom two graphs, rotating the above picture and using

Porterduffxfermode to set the appropriate rendering mode, you can achieve the effect. Let's take a look at our results.

Two

Three, Xfermode rendering mode introduction:

Xfermode affects how new colors are drawn on canvas-already-existing images
* Under normal circumstances, draw a new shape on the image, and if the new paint is not transparent, it will obscure the color below.
* If the new paint is transparent, it will be dyed to the following color

The following subclass of Xfermode can change this behavior:

AVOIDXFERMODE specifies a color and tolerance, forcing paint to avoid drawing on it (or just drawing on it).

Pixelxorxfermode a simple pixel XOR operation is applied when the existing color is overwritten.

Porterduffxfermode This is a very powerful conversion mode, using it, you can use any of the 16 porter-duff rules of the image composition to control how paint interacts with existing canvas images.

I have to mention the classic picture here:

The above 16 modes are described below:

From the above we can see that Porterduff.mode is an enumeration class with a total of 16 enumeration values:

1.porterduff.mode.clear

The drawing is not submitted to the canvas.
2.porterduff.mode.src

Show Top Draw picture
3.porterduff.mode.dst

Show Lower drawing pictures
4.porterduff.mode.src_over

Normal drawing shows that the upper and lower layers are drawn with overlapping covers.
5.porterduff.mode.dst_over

The upper and lower layers are displayed. The lower level is shown on the home.
6.porterduff.mode.src_in

Draw the intersection of two layers. Displays the upper layer.
7.porterduff.mode.dst_in

Draw the intersection of two layers. Displays the lower layer.
8.porterduff.mode.src_out

Draw the non-intersecting portion of the upper layer.
9.porterduff.mode.dst_out

Remove the layer to draw the non-intersecting part.
10.porterduff.mode.src_atop

Remove the non-intersecting part of the layer from the upper intersection section
11.porterduff.mode.dst_atop

Take the upper non-intersecting part and the lower part of the intersection
12.porterduff.mode.xor

XOR: Remove the two Layer intersection section
13.porterduff.mode.darken

Take two layers of all areas, the intersection part of the color deepened
14.porterduff.mode.lighten

Take two layers all, light the intersection part color
15.porterduff.mode.multiply

Take two layer intersection part overlay color
16.porterduff.mode.screen

Take two layers of all areas, the intersection part becomes transparent color

Iv. implementation of custom opening ring view

1. Initialize the brush, font color, size and other variables required for drawing

 PublicXcarcprogressbar (Context context, AttributeSet attrs,intdefstyleattr) {        Super(context, attrs, defstyleattr); //TODO auto-generated Constructor stubdegrees= 0; Paint=NewPaint (); //get custom attributes and default values from Attrs.xmlTypedArray TypedArray =context.obtainstyledattributes (Attrs, R.styleable.xcroundprogressbar); TextColor=Typedarray.getcolor (R.styleable.xcroundprogressbar_textcolor, color.red); TextSize= Typedarray.getdimension (R.styleable.xcroundprogressbar_textsize, 15); Max= Typedarray.getinteger (R.styleable.xcroundprogressbar_max, 100); Isdisplaytext=typedarray.getboolean (R.styleable.xcroundprogressbar_textisdisplayable,true);            Typedarray.recycle (); }

2. Draw in OnDraw ()

In the OnDraw () method, the Porterduffxfermode rendering mode is used to draw two open ring bitmap, and the angle of rotation of the foreground graph is calculated to achieve the effect.

First draw the bottom background map, then draw the progress foreground, and finally use the Porterduffxfermode rendering mode and the rotation angle ratio to do the foreground and background image mask processing.

@Overrideprotected voidOnDraw (canvas canvas) {//TODO auto-generated Method Stub        Super. OnDraw (canvas); intwidth =getwidth (); intHeight =getheight (); intCenterX = GetWidth ()/2;//Get center point x coordinate        intCenterY = GetHeight ()/2;//get the center point y coordinateBitmap Bitmap=bitmap.createbitmap (width, height, config.argb_8888); Canvas can=NewCanvas (bitmap); //draw the bottom background mapBmptemp =Utils.decodecustomres (GetContext (), R.DRAWABLE.ARC_BG); floatDstwidth = (float) width; floatDstheight = (float) height; intSrcwidth =bmptemp.getwidth (); intSrcheight =bmptemp.getheight (); Can.setdrawfilter (NewPaintflagsdrawfilter (0, Paint.anti_alias_flag| Paint.filter_bitmap_flag));//anti-aliasingBitmap BMPBG= Bitmap.createscaledbitmap (bmptemp, width, height,true); Can.drawbitmap (BMPBG,0, 0,NULL); //draw a progress foreground diagramMatrix matrixprogress =NewMatrix (); Matrixprogress.postscale (Dstwidth/Srcwidth, Dstheight/srcwidth); Bmptemp=Utils.decodecustomres (GetContext (), r.drawable.arc_progress); Bitmap bmpprogress= Bitmap.createbitmap (bmptemp, 0, 0, Srcwidth, Srcheight, matrixprogress,true); Degrees= Progress * 270/max-270; //matte processing foreground and background graphsCan.save ();        Can.rotate (degrees, CenterX, centery); Paint.setantialias (true); Paint.setxfermode (NewPorterduffxfermode (mode.src_atop)); Can.drawbitmap (bmpprogress,0, 0, paint);                Can.restore (); if((-degrees) >= 85) {            intPosX = 0; intPosY = 0; if((-degrees) >= 270) {PosX= 0; PosY= 0; } Else if((-degrees) >= 225) {PosX= CENTERX/2; PosY= 0; } Else if((-degrees) >= 180) {PosX=CenterX; PosY= 0; } Else if((-degrees) >= 135) {PosX=CenterX; PosY= 0; } Else if((-degrees) >= 85) {PosX=CenterX; PosY=CenterY; }                        if((-degrees) >= 225) {can.save (); Bitmap DST=bitmap. CreateBitmap (Bitmap,0, 0, CenterX, CenterX); Paint.setantialias (true); Paint.setxfermode (NewPorterduffxfermode (mode.src_atop)); Bitmap src= Bmpbg.createbitmap (BMPBG, 0, 0, CenterX, CenterX); Can.drawbitmap (SRC,0, 0, paint);                Can.restore ();                Can.save (); DST= Bitmap.createbitmap (bitmap, CenterX, 0, CenterX, height); Paint.setantialias (true); Paint.setxfermode (NewPorterduffxfermode (mode.src_atop)); SRC= Bmpbg.createbitmap (BMPBG, CenterX, 0, CenterX, height); Can.drawbitmap (SRC, CenterX,0, paint);            Can.restore (); } Else{can.save (); Bitmap DST=bitmap.createbitmap (Bitmap, PosX, PosY, Width-PosX, Height-PosY); Paint.setantialias (true); Paint.setxfermode (NewPorterduffxfermode (mode.src_atop)); Bitmap src=Bmpbg.createbitmap (BMPBG, PosX, PosY, Width-PosX, Height-PosY);                Can.drawbitmap (SRC, PosX, PosY, paint);            Can.restore (); }        }        //Draw a mask layer bitmapCanvas.drawbitmap (bitmap, 0, 0,NULL); //draw middle Progress percent stringPaint.reset (); Paint.setstrokewidth (0);        Paint.setcolor (TextColor);        Paint.settextsize (textSize);        Paint.settypeface (Typeface.default_bold); intPercent = (int) (((float) Progress/(float) max) * 100);//Calculate Percentage        floatTextWidth = Paint.measuretext (Percent + "%");//measure font width, need to center display        if(Isdisplaytext && percent! = 0) {Canvas.drawtext (Percent+ "%", CENTERX-TEXTWIDTH/2, CenterX+ TEXTSIZE/2-25, paint); }        //draw the title text at the bottom of the openingPaint.settextsize (TEXTSIZE/2); TextWidth=Paint.measuretext (title); Canvas.drawtext (title, CenterX-TEXTWIDTH/2, HEIGHT-TEXTSIZE/2, paint); }

3. Set the synchronous interface method of proportional progress, mainly for the proportion of refresh progress.

/*** Set Progress, this is a thread-safe control, due to the problem of multi-line, need to synchronize * Refresh interface call Postinvalidate () can be refreshed in non-UI thread *@authorcaizhiming*/      Public synchronized voidSetprogress (intprogress) {        if(Progress < 0){            Throw NewIllegalArgumentException ("Progress must more than 0"); }        if(Progress >max) {             This. Progress =progress; }        if(Progress <=max) {             This. Progress =progress;        Postinvalidate (); }    }

Five, source code download

Real Theme Park net :http://www.zhentiyuan.com

Download Now: http://download.csdn.net/detail/jczmdeveloper/9137411

Android Custom View Practice-high imitation Cheetah cleanup master custom memory Aperture ring scale Progress view