Android custom control Series 3: How to draw

Android custom control Series 3: How to draw

In the previous chapter, we talked about how to define attributes and how to define the width and height, so that the simple shape or outline of the component is displayed, or the size of the canvas has been defined, the solution is how to make a splash on the canvas.

Components (except container components) are actually drawn by using the Paint and basic graphics (circles, rectangles, and straight lines) provided by the system) you can create a complete component. The following describes in detail how to draw and some tips:

 

1. How to obtain colors

   In general, the components to be implemented are designed by the artist or some image styles found on the Internet. In this way, you need to remove the colors. Otherwise, if you want to see the color code with the naked eye, you can only know the color of the video.

   In this way, we need to simply learn the simple usage of Photoshop, and use the straw:

    

   Transparency can be set for color encoding in Android, for example, 0x00XXXXXX --- 0 xFFXXXXXX. 0x indicates the hexadecimal format. Then the two digits are transparent. 00--FF (0--255) has a total of 256 levels. 00 indicates completely transparent, and FF indicates completely opaque.

    

   2. How to draw

   Override onDraw method:

   1.@Override2.protected void onDraw(Canvas canvas) {3.super.onDraw(canvas);4./// The image to be drawn5.}

   Each time the page needs to be refreshed or re-painted, or when the page needs to display components, onDraw will be called. In this case, we can draw the components (using the Paint brush) onto the canvas.

   Canvas is a canvas with the same size as the component.

   Note: Each time onDraw is called, the canvas is clean, blank, and transparent. It does not record the previously drawn canvas.

    

   3. Basic Methods of painting and Canvas:

   Paint:

   VoidSetARGB (int a, int r, int g, int B)Set the Paint object color. Parameter 1 is the alpha transparent channel.

   VoidSetAlpha (int)Sets the alpha opacity in the range of 0 ~ 255

   VoidSetAntiAlias (boolean aa)// Whether the image is anti-sawtooth

   VoidSetColor (int color)// Set the Color. Here, the Color class defined in Android contains some common Color definitions.

   VoidSetFakeBoldText (boolean fakeBoldText)// Set the pseudo-bold text

   VoidSetLinearText (boolean linearText)// Set linear text

   PathEffectSetPathEffect (PathEffect effect)// Set the path effect

   RasterizerSetRasterizer (Rasterizer rasterizer) // sets the grating.

   ShaderSetShader (Shader shader)// Set the shadow.

   VoidSetTextAlign (Paint. Align align)// Set text alignment

   VoidSetTextScaleX (float scaleX)// Set the text zoom factor, and 1.0f is the original

   VoidSetTextSize (float textSize)// Set the font size

   TypefaceSetTypeface (Typeface typeface)// Set the font. Typeface includes the font type, width, skew, and color.

   VoidSetUnderlineText (boolean underlineText)// Set the underline

   Canvas:

   Void drawRect (RectF rect, Paint paint) // use the paint brush to Paint the area. Parameter 1 is a RectF area.
   
   Void drawPath (Path path, Paint paint) // draw a Path. Parameter 1 is the Path object.
   
   VoidDrawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)// Texture. Parameter 1 is our regular Bitmap object. Parameter 2 is the source region (here it is bitmap). Parameter 3 is the target region (the position and size of the canvas should be included ), parameter 4 is the Paint brush object. Because of the possibility of scaling and stretching, the performance will be greatly compromised when the original Rect is not equal to the target Rect.
   
   VoidDrawLine (float startX, float startY, float stopX, float stopY, Paint paint)// Draw a line. The X-axis position of the starting point of the parameter, Y-axis position of the starting point of the parameter, X-axis horizontal position of the three ending points of the parameter, Y-axis vertical position of the parameter, and the last parameter is the Paint brush object.
   
   VoidDrawPoint (float x, float y, Paint paint) // specifies a painting point. The parameter is a horizontal x axis, the parameter is a vertical y axis, and the third parameter is a Paint object.
   
   Void drawText (String text, float x, float y, Paint paint)// Render text. In addition to the above description, the Canvas class can also depict text. Parameter 1 is String text, parameter 2 x axis, parameter 3 Y axis, and parameter 4 is the Paint object.
   
   VoidDrawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint) // draw text in the Path, relative to the second parameter above is the Path object

    

   4. Simple Example

   01. /**02.* Draw borders03.*/04.private void onDraw(Canvas canvas){ 05.super.onDraw(canvas);06.// Create a paint brush07.Paint paint = new Paint();08.paint.setColor(0xFF817F7F);// Set the paint brush color09.RectF rectF = new RectF(0, 0, 200 , 200);// Create a rectangle10. 11.// Draw a rectangle12.canvas.drawRect(rectF, paint);// Draw a rectangle to the canvas using a paint brush13. 14.// Draw text15.paint.setTextSize(24);// Set the text font size16.canvas.drawText(View Source Community, 0, 0, paint);// Note that the upper left corner of the text is not aligned with the upper left corner of the canvas.17. 18.// Draw text and align19.int top = 20;20.int left = 30;21.FontMetricsInt fontMetrics = paint.getFontMetricsInt();22.int txtHeight = fontMetrics.bottom - fontMetrics.ascent;23.canvas.drawText(text, left, top-fontMetrics.ascent, paint);// In this way, the upper left corner of the text is aligned with the upper left corner of the canvas. The text center line is involved here. You can refer to other articles.24.}

   In addition, if you want to refresh or redraw a component, that is, when onDraw is called again, you can use the invalidate () method.