Android custom view makes gorgeous verification code

No more nonsense. Let's show you the customized view effect picture first. If you think it's good, please continue reading.

How about this verification code? Is it very common? Let's do it ourselves to achieve this effect. Do it yourself and have plenty of food and clothing, ha ha~

1、 To customize a view

Custom view has always been regarded as the only way for Android to advance to a master. In fact, custom view is so simple. The real difficulty of custom view is how to draw difficult graphics, which requires good mathematical skills (I regret not learning mathematics ~), because drawing graphics often needs to calculate coordinate points and similar geometric transformations, etc. To customize a view, you only need the following steps:

Write a class to inherit the view class;

Reconstruction method of view;

Measure the size of the view, that is, override the onmeasure () method;

Redo the ondraw() method.

The third step is not necessary. Only when the system cannot determine the size of the custom view, we need to rewrite the onmeasure () method to complete the measurement of the size of the custom view, because if the user (Programmer) does not specify the exact size (width or height) when using our custom view, such as layout in the layout file_ Width or layout_ The height attribute value is wrap_ Content instead of match_ Parent or an exact value, the system does not know the size of the graphics drawn by our custom view in ondraw(), so we usually need to let our custom view support wrap_ Content, then we must override the onmeasure method to tell the system the size (width and height) of the view we want to draw.

In addition, if we need some special properties to customize the view, we also need custom properties. This article will cover custom properties and the above four steps.

2、 Implementation of custom view

To implement this verification code control, we need to analyze how to implement it. By looking at the above rendering, we can know that to achieve this effect, we first need to draw the verification code string, that is, the text part in the figure, then draw some interference points, and then draw interference lines. The analysis is completed. Next, we will realize this effect step by step according to the analysis results.

1. Inherit the view and override the construction method

Write a class to inherit view, and then reconstruct its construction method

View has three construction methods. Generally, the construction method with one parameter and two parameters calls the method with three construction parameters. The invocation of these three construction methods depends on the notes above the method. In this construction method, we first initialize the random verification code string and brush:

Here, we have completed the first two small steps in the step of customizing the view. The next step is to complete the third step, that is, rewrite onmeasure() to measure the size (width and height) of our customized view:

2. Rewrite onmeasure() to complete the measurement of view size

Method of measuring width:

Method of measuring height:

Note: in fact, the onmeasure () method will eventually call setmeasureddimension (int measurewidth, int measureheight); Set the measured width and height to complete the measurement, and what we need to do is to measure the width and height. The most important way to measure the width and height is to get the appropriate width and height when the user (Programmer) does not specify an accurate value (specific value or match_parent) for our control. Therefore, The above method of measuring width and height is basically a template method. What we need to do is to get an appropriate value of result. Here we don't need to pay attention to the value of result, because this value is an appropriate value calculated by the control (maybe not very appropriate).

After completing the measurement of the control, we have to complete the big step of drawing the control, that is, the core step of customizing the view, and rewrite the OnDraw () method to draw graphics.

3. Rewrite ondraw() to draw graphics

According to our above analysis, we need to draw the verification code text string, interference point and interference line. Since the interference point and interference line need coordinates and paths to be drawn, do some initialization of random interference point coordinates and interference line paths before drawing:

With this data, we can start drawing graphics.

(1) Draw verification code text string

Since the verification code text string is generated randomly, we need to use code to randomly generate this random verification code:

This code is the basis of Java. I believe everyone can understand it. It doesn't matter if you don't understand it. This code can be found anywhere on the Internet. In fact, I also search it directly from the Internet, hehe ~.

Android's 2D graphics API canvas provides the drawxxx() method to complete the drawing of various graphics, including the drawtext() method to draw text, the drawpostext() method to draw text on a given coordinate point, and the drawtextonpath() method to draw graphics on a given path. Carefully observe the above rendering and find that some of the text is not horizontal, that is, some are tilted, which can improve the recognition difficulty of our verification code. To achieve the text tilt effect, we can draw the text on a given path through drawtextonpath(). However, this method is difficult to achieve (coordinate points and paths are difficult to calculate), so, We can use the position transformation method rorate () and DrawText () provided by canvas to realize the text tilt effect.

This code draws each character in the verification code string through the for loop, rotates the canvas by a random positive and negative angle for each character drawn, and then draws the characters through the drawtext() method. The drawing starting point coordinates of each character vary according to the length and position of the characters. This is calculated by yourself, which may not be very appropriate here. It should be noted that every time we change the position of the canvas canvas, we first call the canvas.save () method to preserve the previously drawn graphics. After drawing, we call canvas.restore () to restore the position of the canvas, so that the next drawing of the graph will not be affected by the change of the position of the previous canvas.

(2) Draw interference points

Set a random color for the interference point brush, and then draw the point with canvas. Drawpoint() according to the coordinates of the randomly generated point.

(3) Draw interference line

Set the random color for the interference line brush, and then draw the Bezier curve with canvas. Drawpath () according to the random generation path, so as to draw the interference line.

4. Rewrite ontouchevent to customize the view event

This step is done here to complete some operations when we click our custom view, that is, customize the view event. Here, we need to change the text string of the verification code when the user clicks the verification code control.

OK, here we have basically completed the custom view. You may ask, is the custom view too extensible and too customizable? What about the agreed custom attributes? Where have you been. Don't worry. Let's customize our view properties.

5. Customize attributes to improve the customizability of custom views

(1) Define our attributes (sets) in the resource file attrs.xml

explain:

Define our attribute in the attr node in the attrs.xml file. To define the attribute, we need the name attribute to represent our attribute value, and the format attribute to represent the format of the attribute value. There are many formats. If the attribute value can have multiple formats, the formats are separated by "|";

The declare styleable node is used to define our custom attribute set. Its name attribute specifies the name of the attribute set. It can be arbitrary, but it is generally the name of the custom control;

If the attribute has been defined (such as layout_width), you can directly reference the attribute without specifying the format.

(2) When referencing custom attributes in the layout file, note that namespaces need to be introduced

To introduce a namespace, you only need to add xmlns: Lt=“ http://schemas.android.com/apk/res-auto "It's OK (LT replace it with your own namespace name), and the previous method of introducing namespace is xmlns: Custom =" http://schemas.android.com/apk/res/com.example.customview01 ", the package path after res refers to the package of the project`

(3) Get the value of the custom attribute in the constructor

OK, the custom attribute has been completed and the value has been obtained. Then we only need to use the custom attribute value when we draw it with ondraw(). The custom attribute is so simple ~. See here, it may be a little confused. Take a look at the complete code and sort it out.

Summary: it's better to draw graphics than customize the view here. The key lies in the calculation of coordinate points. The calculation of coordinates may not be very good here. The above is to share the gorgeous verification code made by Android custom view. I hope it will be helpful to you! If you have any good ideas or suggestions, I hope you can leave a message to me. Thank you very much ~.