Android custom view realizes the lottery function of QQ sports integral turntable

Because I occasionally pay attention to QQ sports and it's interesting to see the integral lottery interface of QQ sports, I tried to implement it with a user-defined view. I originally wanted to view some information of the interface through developer options. Later, I found that the integral lottery interface is displayed in WebView and should be implemented in JS code on H5 page. I don't care about it for the time being.

The custom view here aims at the situation inherited from the view. You can imagine canvas as a drawing board and paint as a brush. The process of customizing the view is actually similar to painting with a brush on the drawing board. Imagine the process of painting on the drawing board, how large a figure you want to draw (corresponding to the measurement onmeasure method of view), what kind of figure you want to draw, such as circle, square, etc (corresponding to the OnDraw method of view), after mastering some basic concepts of view (position parameters, touch events, sliding), measurement mode, event distribution mechanism, drawing process and so on, it is not complicated to customize the view.

No matter how complex the view is, it can be basically divided into small units, such as the following QQ motion points lottery screen, (QQ -- > dynamic -- > motion -- > I -- > points)

Here we only focus on the turntable of the lucky draw, because it is a screenshot without animation effect. You can check it on your mobile phone. The lottery interface looks complex, but it can be divided into several parts

1. The outermost ring, in which a small circle flashes

2. Inner rounded rectangle

3. Internal fillet card (including a picture or explanatory text)

Step 1: we want to inherit the view class. If we need custom attributes, we should implement the construction method with three parameters. Here, we name the custom view lotteryview

Some initialization operations can be done in the init method, such as the required color value, brush, paint, width and height information, etc. if there are custom attributes, they can also be processed in the init method.

Then you can set the width and height information of the view. Here, we set the view to square

Call the setmeasuredimension method, and set the width and height to mselftotalwidth. Here, our width and height are limited values, so we don't need to deal with different measurement modes. If it is other custom views, wrap should be supported_ The content attribute needs to be processed in the onmeasure method

Step 1: draw an outer ring with rounded corners

Draws a small circle in the outer ring

Step 2: draw the inner rounded rectangle, that is, the background of the area where the card is located

Step 3: Draw Internal small cards

After all the drawings are completed, you can process the click event in ontouchevent. How to determine that we are clicking on the area of the lottery? Here we use the method of comparing the location information, as follows

Save the coordinate information (left, top, right, bottom) of each small card in ArrayList < pair < pair < integer, integer > > > mcardpostioninfolist. When you click view, you can obtain the clicked x, y coordinates and

Compare the coordinate information saved in the list. If index = = 5, it means that you are clicking on the small card area where the lucky draw is located.

Code hosted in: https://github.com/aquarius520/LotteryView Welcome to star fork

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.