The custom drawview component of Android UI design series realizes the effect of digital signature (5)

Recently, there is a new requirement in the project. When the user needs to enter the payment password to pay after the transaction, he should ask the user to sign his own signature. When it comes to digital signature, he feels a little tall. Later, he thinks that the principle of digital signature is not too complex. The main implementation principle is to use the drawing principle of view, Display the user's finger movement track on the screen, then convert the track view displayed on the screen into a picture, and finally save the picture locally or upload it to the server... It's still the old rule. First look at the project directory:

The code comments of drawview are very clear. I'd better roughly describe the execution logic of drawview. Drawview inherits view, that is, it has all the functions of view. In order to realize picture drawing, OnDraw () method needs to be implemented. In order to realize the track drawing of fingers on the screen, track coordinates need to be obtained. Therefore, ontouchevent () method needs to be rewritten, focusing on ontouchevent () Method. Starting point when we starting our finger, we need to call path.reset () before we draw the starting point, to prevent path from redrawing. The moveTo method of path is to draw the starting point of the current touch event, and then we call inValidate () to refresh the boundary after we finish the path. When the finger moves, call the path. Quadto() method, which means adding new coordinate points to the path. After the finger moves, call the invalidate() method to refresh the interface. Finally, when the finger lifts up, draw the track in the current event cycle on the Sketchpad cachecanvas, and finally call the invalidate() method to refresh the interface, Therefore, once the finger movement track is drawn, when you want to draw the next time, you should repeat the above operations

Next, let's look at the use of drawview. First, let's look at the layout file:

At first glance, our customized drawview is not used in the layout file, but don't worry. I used the method of dynamically adding drawview in FrameLayout. Well, let's take a look at the code implementation in mainactivity:

There's nothing to explain about the code in mainactivity. I'm sure you can understand it at a glance. The most important thing is that bitmap's compress () method is used in the save method, which is to store the pictures in the file. After we sign, click Save signature button, and the signed pictures will be saved in the local file. Of course, if you want to upload them to the background server, it's not difficult, Just use an asynchronous operation to upload pictures

Note: when you run the program, you will see that China is really great! The characters of China and China are bold, because there is a demand in the project to make Chinese characters bold. I found some methods on the Internet, but they all have effects on English and numbers, and have no effect on Chinese temporarily. I also have no intention to look at the notes in the source code. There are bold text descriptions in the notes, so I clicked in, and found that the label in the notes is < TT > < / TT >, At that time, I wanted to estimate that the < TT > tag could achieve the BOLD effect of Chinese characters. Ha ha, people who don't pay attention to Kung Fu have tested the < TT > tag in < b > and it was effective. Ha ha, I was very happy at that time. Now I'm happy again, (* ^ ^ *) hee hee

OK, now let's run the program to see the effect picture:

Draw signature:

After clicking the Save button, enter the gallery and have a look:

Well, that's all for the explanation of digital signature. Thank you for reading.

Source code download: Android UI realizes the effect of digital signature

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.