Android uses canvas to draw circular progress bar effect

preface

Android custom controls often use canvas to draw 2D graphics. Before optimizing your custom control skills, you must master the canvas drawing mechanism. This paper explains the canvas drawing mechanism from the following three aspects:

Canvas canvas brush paint sample circular progress bar

Canvas

First, let's take a look at the definition of canvas class on the Android official website:

The Canvas class holds the “draw” calls。 To draw something,you need 4 basic components: A Bitmap to hold the pixels,a Canvas to host the draw calls(writing into the bitmap),a drawing primitive(eg,Rect,Path,text,Bitmap),and a paint(to describe the colors and styles for the drawing).

In short, 2D drawing for Android must be supported by the canvas class, which is located under the "Android. Graphics. Canvas" package. We can understand canvas as a piece of memory allocated by the system for drawing (PS: the real memory is the bitmap it contains).

Canvas provides two constructors:

Canvas (): create an empty canvas object. Canvas (Bitmap bitmap): create a canvas with a bitmap as the background. Usually, we will use the second constructor method containing bitmap parameters or directly use the canvas provided by the system in the OnDraw method.

Since canvas is mainly used for drawing, it provides many corresponding draw methods to facilitate drawing on canvas objects. Several common draw methods are introduced:

Void drawRect (rectf, rect, paint paint): the area to be painted. The parameter is rectf. Void drawOval (rectf oval, paint paint): draws an inscribed ellipse of a rectangle. Void drawcircle (float CX, float cy, float radius, paint paint): paint a circle. CX and CY are the coordinates of the center of the circle, and radius is the radius length. Void drawarc (rectf oval, float startangle, float sweep angle. Boolean usecenter, paint paint): it is also based on the inscribed ellipse of the rectangle. Where startangle is the starting angle, sweepangle is the arc size, usecenter is true, a fan line is drawn, and false, it is only an arc. (PS: when startangle is 0, it is the 3 o'clock direction of the circular clock). Void drawpath (path, paint paint): draw a line according to a given path. Void drawbitmap (Bitmap bitmap, rect SRC, rect DST, paint paint): map. The parameter bitmap is the bitmap object to be painted. The parameter SRC refers to the source area of the bitmap (generally null), DST is the target area of the bitmap, and paint is the brush. It can be null. Void drawLine (float startx, float starty, float stopx, float stopy, paint paint): draw a line according to the given start and end points. Void drawpoint (float x, float y, paint paint): draw points according to the given coordinates. Void DrawText (string text, float x, paint paint): draws text according to the given coordinates. Where x is the x-axis coordinate of the beginning of the text and Y is the y-axis coordinate of the vertical end of the text.

Brush paint

As can be seen from the canvas. Drawxxx () methods listed above, there is a parameter of type paint, which can be understood as a "brush". Through this brush, you can draw on the canvas. It is located under the "Android. Graphics. Paint" package and is mainly used to set the drawing style, including brush color.

Paint provides a lot of methods to set the painting style. Only some common functions are listed here:

Setargb (int a, int r, int g, int b): sets the ARGB color. SetColor (int color): sets the color. Setalpha (int a): sets the transparency. Setantialias (Boolean AA): sets whether anti aliasing is enabled. Setshader: sets the fill effect of paint. Setstrokewidth (float width): sets the stroke width of paint. Setstyle (paint. Style style): sets the fill style of paint. Settextsize (float textsize): sets the text size when drawing text.

Custom round progress bar

Here, take a custom circular progress bar as an example. Let's first look at the rendering:

Through the rendering, we first abstract the custom attributes as follows:

The fill color inside the ring. The background color of the circle progress bar. The color of the circle progress bar. Circle radius. The width of the circle progress bar. The angle at which the progress bar starts. The color of the middle text. The size of the middle text. Whether the middle text needs to be displayed.

In Android, you can create a resources source file in the RES / values / directory of the project and declare a specific attribute set through declare styleable.

The sample attribute set is as follows (RES / values / attrs_round_progress_bar. XML):

Custom attributes can be obtained through typedarray array in the constructor of custom view. We customize a circular view to achieve the effect shown in the figure above (roundprogressbar. Java):

In the layout file of mainactivity.java, you can call the circular progress bar as follows:

Where xmlns: round = " http://schemas.android.com/apk/res-auto It is the namespace writing method of importing custom view attribute added in Android studio.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.