Easily realize the powerful Android scratch effect control (scratchview)

preface

There are some small development partners around me. There is such a habit. One day, when I suddenly see a beautiful custom control (animation) effect on an app, I will try my best to realize it myself. Of course, I also belong to this type of Sao Nian. When I see some effect, I feel itchy and ponder over the realization of the routine. Personally, I think this is a method of demand driven progress. When you rack your brain to achieve the effect you want, you will find that the deeper you understand the knowledge system of Android custom controls (animation), and over time, you can easily create various control (animation) effects. If one day, the product children's shoes hold a prototype (or face an app) and say to you, "XXXX, do you think we can achieve this effect?", Then you glanced at it and threw it back: "are you kidding, and what I can't achieve?". Do you feel a little excited? Well, it's almost time to get back to the point. This is my first article on custom controls, so I will update this type of articles one after another. I hope you can like it. (secretly spoilers, my next article is about the dry goods of performance optimization. Of course, I think they are very dry. I hope they will be sent out at that time. Don't make a face, ha ha!)

Realization effect

Having said so much, let's first show you the final implementation effect

The above is only a part of the basic implementation effect. You will see that there are many other controls below. What are they used for? Next, we will reveal everything for you.

Basic implementation

In daily life, we must be familiar with the scraping effect. Its principle is realized by adding scraping layers to the original patterns and words. If we want to see the patterns and words hidden behind the scraping layer, we must scrape the scraping layer. Knowing this routine, you can start sorting out the coding implementation ideas, and then work happily.

My initial implementation idea was to rewrite ImageView and textview, and then add layers on images and text with code respectively, so that the effect can be achieved. However, looking back, no, this implementation has great limitations. If it is implemented according to this idea, only pictures or words can exist under the scraping layer. What if the product manager requires both pictures and words? Two pictures are required? It is required to have both pictures and text, and the text is placed on the top (bottom, left and right) of the picture As we all know, in addition to the heart of sister paper, the most changeable in the world is the product manager and their needs. Therefore, we came up with another implementation idea, directly inherit the view to implement a scratch layer, so that the scratch layer does not have any dependence on the picture and text, and then place the scratch layer on the top layer in combination with the FrameLayout. You can put as many pictures and text as you want under the scratch layer and how the picture and text should be placed. At this point, the idea is clear and you can start coding happily.

Step 1: draw the scraping effect.

The idea of the above code is as follows:

Create a custom control scratchview inherited from view, and initialize various parameter settings in init() function. Such as the color of the scraping layer, etc; In order to facilitate setting, you need to separate the parameters into custom properties of the control, and provide a set method in the scratchview class for code calls. For example, the color attribute of the scraping layer is maskcolor, and its corresponding method in the class is setmaskcolor; In onsizechanged, the width and height of the view can be obtained by using the view that has been measured, and the canvas is used to initialize and generate the mmaskbitmap for scraping; In OnDraw, use canvas Drawbitmap will draw and display the generated mmaskbitmap initialized in onsizechanged to the interface to generate scraping layer; Add the following layout in the demo to see the following effect:

So far, we have achieved an implementation effect of scraping. At the same time, we can directly set the scraping color in XML layout and Java code. However, at this time, there is only a scratch layer, and the scratch effect is not realized. Next, continue to add the implementation code.

Step 2: realize the scraping effect.

The idea of the above code is as follows:

Initialize merasepaint and merasepath in init(), and set the xfermode of merasepaint to porterduff Mode. Clear is used to create the scraping effect in the back; Override the ontouchevent function to handle the touch event action_ DOWN 、 ACTION_ MOVE 、 ACTION_ Up and other three event types, and use merasepath to record the finger sliding track, then use mmaskcanvas to draw the sliding track onto the mmaskbitmap generated in the first step, and finally call invalidate() to cause the view to redraw to generate the scraping effect; In order to prevent the sliding from being too sensitive, we need to judge the sliding through the viewconfiguration provided by the system Getscaledtouchslip() obtains the minimum sliding distance considered by the system. When it is equal to or exceeds this distance, it is considered to be sliding, which is why I add DX > = mtouchslip | dy > = mtouchslip in erase(); In order to control the thickness of the scratch, just like the color of the scratch layer set earlier, a custom attribute erasesize is also defined for scratchview, which is controlled in XML. At the same time, call methods are provided in Java code; At this point, a basic scraping effect has been completed. Let's see how to achieve the effect.

The above two steps only complete the basic effect. Next, let's do some optimization.

Effect optimization

Step 1: add watermark

Many prize scraping effects will add their own logo on the scraping layer as a watermark effect (I don't know if it's appropriate to call it watermark? Anyway, it probably means that). Like the following Alipay.

In the first step of the basic implementation, we add the implementation code in the create scraper function, and also add a user-defined attribute and set method to call:

The results are as follows:

Of course, there are many other additions that can be added to the effect. For example, you can add the edge sawtooth effect of Alipay, etc.

Step 2 Optimization: add corresponding event listeners and improve some common functions.

Speaking of event monitoring, I think there is nothing better than the event completed by scraping. For developers who use this control, they must do corresponding operations after scraping, for example, prompt users to win the prize or continue to work hard. How to judge the completion of scraping? The implementation idea here is to asynchronously calculate the pixel information value in the scraped layer mmaskbitmap, and calculate the proportion of the number of transparent pixels in the total number of pixels. When this proportion exceeds a certain threshold, we think the scraping is completed. Why should we say that it is completed even if it exceeds a certain threshold? This is the same as scraping awards in real life. You don't need to scrape the scraping layer completely to get the results. Of course, how much is this ratio? We also need to pull it out to be dynamically settable. Then add the listener interface and set the listener API. The implementation code is as follows:

Let's see the final effect

Here, a complete scraping effect custom control implementation has been completed. However, there is another problem that needs to be thrown to everyone for common consideration, that is, in the implementation of judging whether the scraping is completed, my implementation method in the code will create a large number of int arrays, which will cause memory jitter.

At present, because I didn't think of any good plan, if you have good ideas, communicate together.

summary

This is the first time to write an article about custom controls. Do you understand the implementation idea? About custom controls, only reading the article can understand the ideas. Combined with the source code and hands-on debugging, plus the article, you will have a deeper experience. Children's shoes that need source code can go to https://github.com/D-clock/ScratchView Next, there are many articles about custom controls (animation). Please look forward to it.

Thanks for sharing.

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.