Android creates cool movie ticket online seat selection app online seat selection function

I don't know if you've ever used it. Taobao movie client (Taobao ticket) has bought movie tickets. Looking at the online seat selection function of various online seat selection apps, Taobao online seat selection function has the best user experience and is the most convenient to use. It's exaggerated to say that it has reached the stage of perfection. Let's see the effect below:

Effect analysis:

The whole control is divided into several parts: seat bitmap area, seat thumbnail area, line number area and screen area

1. The seat map can move and zoom freely. After zooming in and out, it will automatically rebound to the appropriate position, and the selected seat will automatically zoom in to the appropriate proportion.

2. The line number part zooms and moves up and down with the seat map, and the screen area moves and zooms left and right with the seat map.

3. When the finger is pressed, a thumbnail will appear. A red box on the thumbnail indicates the currently visible area and follows the movement of the thumbnail.

Knowledge points involved:

The drawing principle and event distribution mechanism of view are not mentioned. These are the basis. They are not intended to be introduced here. There are a lot of information in this regard on the Internet.

1. The matrix is used to move and scale through the matrix

2. Elastic movement and elastic scaling.

3. The use of gesture monitoring obtains the scaling amplitude through gesturedetector and scalegestuuredetector.

Coding implementation

Through the following core parts, other parts are implemented with similar ideas

1. Draw a seat map

2. Zoom and move of seat map

3. Automatic rebound and zoom of seat map

4. Implementation of thumbnail drawing

As for other parts, such as cinema screen, the line number on the left is consistent with the implementation idea of seat map.

1. Draw a seat map

The seat map is actually a two-dimensional matrix with the number of rows and columns. We only need to draw it according to the number of rows and columns plus a certain spacing.

The getseattype () method is used to judge whether the current seat is available, sold or selected, and draw different seat maps according to these states.

2. Zoom and move of seat map

The mobile zoom function is realized by matrirx. Matrix can be used to zoom, move, rotate and other transformations on pictures in Android. Matrix itself is a 3 * 3 matrix, and each value in the matrix represents a transformation attribute, as follows

It's actually an array of nine elements

Through matrix getValues(value); Specific values can be obtained.

Value [0] represents the scaled x value

Value [1] represents the x value of the chamfer

Value [2] represents the value of translation on the X axis

Value [3] represents the y value of the miter

The scaling on the y-axis represented by value [4]

Value [5] represents the value of the translation on the y-axis

The matrix class has some methods to change these values

Setscale (float SX, float sy, float Px, float py): sets the scaling scale on the x-axis and y-cycle. Px, py represents the center point of scaling.

Settranslate (float DX, float dy): sets the offset on the x-axis and y-circumference.

There are also two corresponding methods:

So what's the difference between post and set? The simple understanding is that set directly overwrites the previous value, while post transforms on the basis of the previous value. For example, now that you have moved 10 pixels to the left, when you use settranslate (5, 5), you will directly move 5 pixels, and when you use post, you will move 5 pixels on the basis of 10 and become 15.

The above is how to use the matrix. The canvas object has a drawbitmap method to receive a matrix, so you can use the matrix for transformation during drawing.

Implementation idea of translation and zoom of seat map:

There are two things to do to scale and move the bitmap

1. Gets the value of the translation and the scale of zoom in and out

Override the ontouchevent method to calculate and get the X and Y values of the move

Use the scalegestuuredetector class to help us obtain the zoom in and out scale. It is very simple to use. Create an object of scalegestuuredetector, and then call scalegestuuredetector in the ontouchevent method onTouchEvent(event); that will do

2. Pan and zoom the seat map according to the obtained values

After obtaining the translation value and scale, use matrix Postscale (x, y) and matrix After the corresponding transformation of posttrans (x, y), call the invalidate method of view to make the view redraw the matrix effective.

Only the core code is listed below, and some logic is omitted. Please check the complete code in GitHub.

Ontouchevent processing logic

On draw

3. Realization of automatic rebound and automatic zoom effect of seat map

Why automatically rebound? Because when you operate, it is possible to move the seat map out of the screen. When zooming, zoom the map smaller or larger. At this time, the program automatically moves you to a more appropriate position and a more appropriate zoom size through calculation. This has a good use experience.

Ideas for realizing automatic springback:

Motionevent is triggered when we move our fingers on the screen and lift them up ACTION_ Up event. At this time, we can obtain the current moving position through the matrix object. If the current moving value does not comply with our rules, we will move the seat map to the specified position according to the rules.

The movement rules are as follows (refer to the movement logic of the ticket washing client)

When the whole size of the seat map does not exceed the control size:

Slide to the left and automatically rebound to the right of the line number

Slide to the right and automatically rebound to the right

Slide up and down and automatically rebound to the top

When the whole size of the seat map exceeds the control size:

Slide to the left and rebound to the right, slide to the right and rebound to the left

Slide up and rebound to the bottom, slide down and rebound to the top

For the implementation of the above mobile rules, you can check the implementation of the autoscroll () method in the specific source code, which will not be posted here.

Moving and scaling involves a problem of elastic moving and scaling. The so-called elastic moving is the moving with animation effect. Because if you are currently in the position of 100100, you need to move to the position of 800100. If you directly move to the position of 800 instead of passing through, first move to 110 and then move to 120... It's been moving from 800 to 800. Then the moving effect will be very stiff. The brush will flash past, and the effect is very bad.

The realization idea of elastic mobility is:

For example, to move from 100100 to 800100, it is obvious that the x-axis needs to move 700 pixels. Then we divide the 700 pixel movement into 10 movements. Each movement 700 / 10 = 70 pixels. The interval between the two movements is 50 milliseconds, which is like frame animation. In this way, there will be a flexible animation effect.

The implementation code through handler is as follows:

The principle of elastic scaling is consistent with that of elastic movement

4. Implementation of thumbnail drawing

The thumbnail is a reduced version of the seat map. The width and height of the thumbnail is proportional to the width and height of the seat map, such as one fifth. Of course, this can be adjusted according to the effect. The reason why it must be a certain proportion of the seat map is that there is a dynamic red box on the thumbnail to represent the currently visible seat area. This red box needs to be moved according to the movement of the seat map. After the scale is determined, the red box can be moved according to the movement of the seat map. For example - if the current seat map moves up 100 pixels, the corresponding red box in the thumbnail moves down 100 / 4 = 250 pixels.

Drawing overview Code:

Draw the red box on the overview map

Control performance optimization

After a lot of hard work, I finally made the control. As a result, I didn't want to run the card. Especially when the number of rows is more than one, carton's ignorance is forced. At this time, we should optimize the performance, mainly from the following aspects:

1. Avoid creating objects in OnDraw, allocate memory, and put the creation of paint objects in the initialization function. This step is actually very important because we need paint objects when drawing with canvas, and different paint objects are often required in different places. In this way, there are more paint objects created, and the OnDraw method may be executed multiple times. Frequent creation of objects will cause GC and cause jamming. Of course, not only the paint object, but also the creation of other objects.

2. Avoid unnecessary drawing logic and draw only when necessary. This needs to be adjusted according to the drawing logic of the control, which is also very important.

3. The general principle is to do everything possible to control the execution of OnDraw method within 16ms, so there will be no card.

Finally, let's see the effect we have achieved

Source address:

GitHub address

The above is what Xiaobian introduced to you. Android creates a cool online seat selection app for movie tickets. I hope it will help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!