Use compose to realize the effect of selecting movie seats by panning tickets

Pay attention to the official account and learn more

This is a blog written last year

cause

The new year is coming , Watching movies is an essential entertainment in our new year , When watching the movie, did you ever think about how to realize the seat selection space , A good programmer , I thought about it , Today I will take you to study .

compose The series of drawing was completed two months ago , But only for api Proficiency , So today we are going to make a custom seat for imitation of the movie seats ui.

Effect view

Let's take a look at the implementation of Alipay client

We found that the main point of seat selection is the drawing of seats 、 The logic of seat selection 、 Two finger gesture zoom 、 Single finger long press and drag effect . So the key is to realize these effects

Having said that, let's release the results we have achieved in advance ：

To achieve the point

Draw seat

We can draw seats by ourselves drawRoundRect api To achieve , However, in order to increase the difficulty, we use path A seat made by splicing . The goal is also to facilitate the expansion of seats into other shapes in the future

structure path Code for ：

val path = Path().apply {
    
        moveTo(boundStart.x, boundStart.y + radius)
        addArc(// Draw the arc 
            Rect(Offset(boundStart.x + radius, boundStart.y + radius), radius),
            180f,
            90f,
        )
        lineTo(boundEnd.x - radius, boundStart.y)
        arcTo(
            Rect(Offset(boundEnd.x - radius, boundStart.y + radius), radius),
            270f,
            90f,
            false
        )
        lineTo(boundEnd.x, boundEnd.y - radius)
        arcTo(Rect(Offset(boundEnd.x - radius, boundEnd.y - radius), radius), 0f, 90f, false)
        lineTo(boundStart.x + radius, boundEnd.y)
        arcTo(Rect(Offset(boundStart.x + radius, boundEnd.y - radius), radius), 90f, 90f, false)
        close()
    }

drawpath：

drawPath(
        path,
        if (seat.type == 0) Color(0xfff4d9bd) else Color(0xffc3d9e9),
        style = Stroke(strokeWidth)// Use Stroke Can guarantee our path It is the effect of line makeup 
    )

Two finger operation gesture

The use of gestures can refer to the articles I have written before , Portal

Using two finger gestures requires the following two Modifier The operator ：

.graphicsLayer
.transformable(state = state)

The implementation code is as follows ：

 var scale by remember {
     mutableStateOf(1f) }
    var offset by remember {
     mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState {
     zoomChange, offsetChange, rotationChange ->
        scale *= zoomChange
        offset += offsetChange
    }
    Box(
        Modifier
            .fillMaxSize(),

        contentAlignment = Alignment.Center
    ) {
    
        The content part 
       ....
    }

Code ：https://github.com/ananananzhuo-blog/MovieSeatProject