Android uses paint custom view to implement progress bar control example

preface

The three major processes of view: measurement, layout, drawing and custom. What does view learn? There are only two kinds: drawing text and drawing images.

We learned the basic usage of paint in the last article "the use of paint for Android drawing", but we haven't practiced the specific application. As can be seen from the title, this article is to lead readers to use paint to customize a progress bar control.

design sketch

The above figure is the effect diagram to be realized in this paper.

Implementation process

Since it is a custom control, the control in this article directly inherits the view, and then overrides the onmeasure and OnDraw methods of the view to implement it. Onmeasure is mainly used to measure the width / height of the control. OnDraw draws the interface to the screen.

From the perspective of effect, we need to customize some attributes, such as the color of progress bar, the color of circle border, the width of circle border and the size of text. For specific custom attributes, see the following code of attrs.xml:

Next, let's look at the most important part of this article, that is, custom view

Process: the user-defined attributes will be obtained during initialization, and then the width and height of the control will be measured in the onmeasure method. This method mainly handles the wrap of layoutparams_ Content, when wrap_ Content, the default width / height is set instead of allowing the control to occupy the whole screen. You need to call the setmeasureddimension method for measurement. Finally, the width / height of the control is measured, and the OnDraw method is called to draw the interface to the screen. Padding needs to be considered when drawing with OnDraw method. If padding is not done, padding will not work.

OnDraw drawing process: first draw a default big circle, then draw percentage text in the center of the circle, and finally draw a progress circle. The progress circle will cover the default big circle at the bottom, so as to display the progress.

After setting the brush, use canvas.drawcircle to draw the default big circle, set the brush again, and use canvas.drawtext to draw text; When drawing an arc, you need to define a rectangular area rectf and draw it through the canvas.drawarc method.

After drawing, how can users see the progress bar changing? In fact, the postinvalidate () method in the setprogress method will refresh the interface, and OnDraw will be called when refreshing the interface, so that the progress can be drawn to the screen, and the progress bar is constantly changing.

use

Use in XML

The activity code is as follows:

This completes a custom progress bar control, and uses paint to paint the interface in the OnDraw method. Readers can practice by themselves to deepen their understanding of paint.

summary

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.