Android Elite Biography Series two view Drawing (one)

Iii. Drawing of the view

1. How to use: complete the drawing by inheriting the view and overriding its OnDraw () method. 

2. Specific implementation:

A. Define a canvas object that resembles a flower board, defined as follows:canvas canvas=new canvas (bitmap); 

b We can see that when we define a canvas object, we pass in a bitmap object, What is the role of this bitmap? In fact , Bitmap's role is to store all the pixel information drawn on the canvas. For example:    

Canvas.drawbitmap (Bitmap1,0,0,null);

Canvas.drawbitmap (Bitmap2,0,0,null);

Canvas mcanvas=new canvas (BITMAP2);

Mcanvas.drawxxx ();

The meaning of the above code is to load the BITMAP2 into another canvas object, and then use the canvas object elsewhere to draw the canvas object that loads the Bitmap2 . 

C. In fact, we do not draw directly on the cloth specified by the OnDraw () method, but rather by changing the bitmap and then letting the view redraw, thus showing the bitmap after the change .

3. Custom View's common functions:

Onfinishinflate (): callback after loading component from XML

Onsizechanged (): Callback when component size changes

Onmeasure (): Callback the method for measurement

OnLayout (): Callback the method to determine the location of the display

Ontouchevent (); callback when the monitor hears the touch event

4. Common ways to implement custom controls:

A. Extending an existing control

B. Implementing a new control by combining

C. Overriding a view to implement a new control

5. Extend the existing controls: Extend the textview and add multiple color backgrounds to the TextView; 

A. Define a class to inherit to TextView and add its constructor: One thing to note is that when you add a constructor, be sure to add it to the constructor that contains the attributset parameter, or the program will error because  The Attributset parameter acts as an external pass through which you can obtain the properties of a custom view. 

 Public class extends textview{    public  Drawtextview (context context) {        super( context);     }      Public Drawtextview (Context context, AttributeSet attrs) {        Super(context, attrs);    }}

B. Define two brushes and initialize the brush content:

Private Paint Mpaint1,mpaint2; // Initialize the brush content: color and style mpaint1=new  paint (); MPaint2=new  paint (); Mpaint1.setcolor ( Getresources (). GetColor (R.color.colorprimary)); Mpaint1.setstyle (Paint.Style.FILL); Mpaint2.setcolor ( Getresources (). GetColor (R.color.coloraccent)); Mpaint2.setstyle (Paint.Style.FILL);

C. Overriding the OnDraw function: note Here the difference between the Save function and the Restore function, which is to save the state of the canvas, and then after the OnDraw function, there are some actions on the canvas, such as rotation, where the text is added, and the latter is saved on the canvas after the operation.

protected voidOnDraw (canvas canvas) {//Draw Inner MatrixCanvas.drawrect (0,0, Getmeasuredwidth (), Getmeasuredheight (), mPaint1); //Drawing an outer matrixCanvas.drawrect (10,10,getmeasuredwidth () -10,getmeasuredheight ()-10, MPaint2); //Save the state of the canvasCanvas.save (); //Add text    Super. OnDraw (canvas); //Save the state of the canvas after it has been manipulatedCanvas.restore ();}

D. Referencing the custom TextView in the layout:

<main.view.com.drawmyview.DrawTextView    android:layout_width= "200DP"    android:layout_ Height= "50DP"    android:textsize= "20SP"    android:gravity= "center"    Android : Text= "@string/mytextview"/>

E. Achieving results:

3. Implement TextView text flashing:

A. Implementation effect :

B. Principle of implementation: Use the Shander renderer of the Paint object in Android to draw the text you want to display by setting an ever-changing lineargradient and using the paint object with that property.

C. Specific implementation process:

(1) Initialize some objects in the onsizechanged () method and set a lineargradient gradient renderer based on the broadband of the view:

protected voidOnsizechanged (intWintHintOLDW,intOLDH) {    Super. Onsizechanged (W, H, OLDW, OLDH); if(mviewwidth==0) {//Initially initialized to 0, so it will enter this if judgment statementMviewwidth=getmeasuredwidth ();//gets the current width        if(mviewwidth>0) {Mpaint=getpaint ();//Gets the Paint object for the current drawing TextView            /** Set a lineargradient gradient renderer * The 12th parameter is the starting point for setting the gradient, where the upper-left corner of the rectangle is set as the starting point * The 34th parameter is the end of the set gradient, the moment is set            The upper-right corner of the array is the end point * The fifth parameter is an int array, which represents the color of the gradient, where the blue-white-Blue * Sixth parameter is set to change the gradient color, the setting method is new float[]{0.25f,0.5f,0.75f}, * If set to empty, the color is evenly distributed, but it is important to ensure that the color array and position array size * The seventh parameter is tiled, CLMP to repeat the last color to the last, the other two own experience * */mlineargradient=NewLinearGradient (0,0,mviewwidth,0,New int[]{color.blue,color.white,color.blue},New float[]{0.25f,0.5f,0.75f}, Shader.TileMode.CLAMP); //to add a renderer to a paint objectMpaint.setshader (mlineargradient); Mgradientmatrix=NewMatrix (); }    }

(2) in the OnDraw () function, we move the gradient continuously through a matrix, which produces a dynamic flashing effect when the text is drawn:

protected voidOnDraw (canvas canvas) {Super. OnDraw (canvas); if(mgradientmatrix!=NULL){        //set the distance to move a matrixMtranslate+=mviewwidth/5; //after moving to the end, it will go back to the original position and move again        if(mtranslate>2*mviewwidth) {Mtranslate=-Mviewwidth; }        //set the movement of the MatrixMgradientmatrix.settranslate (mtranslate,0); //adding renderers to matricesMlineargradient.setlocalmatrix (Mgradientmatrix); //Delay 100msPostinvalidatedelayed (100); }}

Finally , it is referenced in the XML layout file:

< Main.view.com.drawmyview.MyTextView     Android:layout_margintop = "20DP"     android:text= "@string/textview2"    android:textsize= "30SP"     android:layout_gravity = "Center"     android:layout_width= "Wrap_content"    android:layout_height= " Wrap_content "/>

Android Elite Biography Series two view Drawing (one)