Draw two views of the Android group-English notes series (1 ).

Draw two views of the Android group-English notes series (1 ).

3. view rendering

1. Usage: the drawing is completed by inheriting the view and rewriting its onDraw () method.

2. Specific implementation:

A. First define a Canvas object, which is similar to a Canvas. The definition method is as follows: canvas Canvas = new Canvas (bitmap );

B. We can see that when defining a Canvas object, we pass in a bitmap object. What is the role of this bitmap? In fact, bitmap is used 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 above Code indicates that bitmap2 is loaded into another Canvas object, and Canvas objects loaded with bitmap2 are used for plotting elsewhere.

C. In fact, we plot not directly on the cloth specified by the onDraw () method, but by changing bitmap and redrawing the view to display the bitmap after the change.

3. Common functions of custom view:

OnFinishInflate (): callback after loading components from xml

OnSizeChanged (): callback when the component size changes

OnMeasure (): calls back this method for measurement.

OnLayout (): calls back this method to determine the position of the display.

OnTouchEvent (); callback when listening to touch events

4. Common methods to implement custom controls:

A. extend existing controls

B. Implement new controls through combination

C. Rewrite view to implement brand new controls

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

A. define a class to inherit to TextView and add its constructor: note that when adding constructor, you must add it to the constructor containing the Attributset parameter. Otherwise, the program reports an error, because the Attributset parameter is used externally to obtain the attributes of a custom view.

public class DrawTextView extends TextView{    public DrawTextView(Context context) {        super(context);     }    public DrawTextView(Context context, AttributeSet attrs) {        super(context, attrs);    }}

B. Define two paint brushes and initialize the paint brushes:

Private Paint mPaint1, mPaint2; // initialize the Paint 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. col1_cent); mPaint2.setStyle (Paint. style. FILL );

C. override the onDraw function: Pay attention to the difference between the save Function and the restore function. The former is to save the canvas state. After the onDraw function is used, some operations will be performed on the canvas, for example, to add text, such as rotation, the latter is to save the canvas after the operation.

Protected void onDraw (Canvas canvas) {// draw the inner matrix canvas. drawRect (0, 0, getMeasuredWidth (), getMeasuredHeight (), mPaint1); // draw the external matrix canvas. drawRect (10, 10, getMeasuredWidth ()-10, getMeasuredHeight ()-10, mPaint2); // Save the canvas status canvas. save (); // Add the text super. onDraw (canvas); // Save the canvas status after the canvas is operated. restore ();}

D. reference 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. Implementation results:

3. Implement textview text flashing:

A. Implementation results:

B. Implementation principle: Use the Shander Renderer of the Paint object in Android to set an ever-changing LinearGradient and use the Paint object with this attribute to draw the text to be displayed.

C. Specific implementation process:

(1) initialize some objects in the onSizeChanged () method, and set a LinearGradient gradient Renderer Based on the bandwidth of the view:

Protected void onSizeChanged (int w, int h, int oldw, int oldh) {super. onSizeChanged (w, h, oldw, oldh); if (mViewWidth = 0) {// initialization starts with 0, therefore, the if judgment statement mViewWidth = getMeasuredWidth () will be entered; // obtain the current width if (mViewWidth> 0) {mPaint = getPaint (); // obtain the Paint object of the currently drawn textview. ** set a LinearGradient Renderer. * The first two parameters are the starting point for setting the gradient, here, the upper left corner of the rectangle is set as the starting point * The third four parameters are set as the ending point of the gradient. Here, the upper right corner of the matrix is set as the ending point * The Fifth parameter is an int array, indicates the gradient color. Here, the sixth parameter blue-white-blue * is selected to set the gradient color change. The setting method is new float [] {0.25f, 0.5f, 0.75f }, * if it is set to null, the color is evenly distributed, but you must ensure that the color array is the same as the size of the position array * The Seventh parameter is tiled, CLMP repeats the last Color to the end, and the other two will experience the **/mLinearGradient = new LinearGradient (, mViewWidth, 0, new int [] {Color. BLUE, Color. WHITE, Color. BLUE}, new float [] {0.25f, 0.5f, 0.75f}, Shader. tileMode. CLAMP); // Add the Renderer mPaint to the paint object. setShader (mLinearGradient); mGradientMatrix = new Matrix ();}}

(2) In the onDraw () function, the gradient effect is continuously translated by means of a matrix, so as to generate a dynamic flashing effect when drawing the text:

Protected void onDraw (Canvas canvas) {super. onDraw (canvas); if (mGradientMatrix! = Null) {// set the moving distance of the Matrix to mTranslate + = mViewWidth/5; // after moving to the end, it will return to the initial position and move it again if (mTranslate> 2 * mViewWidth) {mTranslate =-mViewWidth;} // sets the moving mGradientMatrix of the matrix. setTranslate (mTranslate, 0); // Add the Renderer mLinearGradient to the matrix. setLocalMatrix (mGradientMatrix); // latency: 100 ms postInvalidateDelayed (100 );}}

Finally, reference it 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" />