使用Compose实现淘票票选择电影座位的效果

关注公众号学习更多知识

这是一篇去年就写好的博客

起因

新年要来了，看电影是我们新年中必不可少的娱乐项目，那么看电影的时候你是否有想过选座位的空间是如何实现的呢，座位优秀的程序员，我就想到了，今天就带你研究。

compose的绘制系列在两个月前就已经学习完成了，但是仅限于api的熟练，因此今天打算做一个仿淘票票选电影座位的自定义ui。

效果查看

先看一下支付宝客户端的实现吧

我们发现选座位的主要点就是座位的绘制、选择座位的逻辑、双指手势缩放、单指长按后拖动效果。所以关键就是这几个效果的实现

说到这里了提前把我们实现的效果也放出来吧：

实现要点

绘制座位

本身绘制座位我么可以使用drawRoundRect api来实现，不过为了增加难度本例中我们使用path拼接而成的座位。这样做的目标也是为了方便将来将座位扩展成其它形状

构建path的代码：

val path = Path().apply {moveTo(boundStart.x, boundStart.y + radius)addArc(//绘制圆弧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)//使用Stroke可以保证我们的path绘制出来是线妆的效果)

双指操作手势

手势的使用可以参考之前我写过的文章，传送门

使用双指手势需要使用如下两个Modifier操作符：

.graphicsLayer
.transformable(state = state)

实现代码如下：

 var scale by remember { mutableStateOf(1f) }var offset by remember { mutableStateOf(Offset.Zero) }val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->scale *= zoomChangeoffset += offsetChange}Box(Modifier.fillMaxSize(),contentAlignment = Alignment.Center) {内容部分....}

代码：https://github.com/ananananzhuo-blog/MovieSeatProject

使用Compose实现淘票票选择电影座位的效果相关推荐

【028】仿猫眼、淘票票的电影后台管理和售票系统系统（含后台管理）（含源码、数据库、运行教程）
文章目录 1.项目概要介绍 2.用户运行界面截图 3.后台管理员界面截图 4.后端启动教程 5.前端启动教程 6.源码获取 1.项目概要介绍前言:这是基于Vue+Node+Mysql的模仿猫眼.淘票 ...
电影票务大排行：猫眼第一，淘票票、格瓦拉分列二、三位！
5月23日,2017UBDC全域大数据峰会,将在北京举行. [友盟+]特别策划UBDC前奏"U君侃数据"系列,榜单会不断放出,欢迎关注. 电影作为大众娱乐的先头兵,和互联网的一大入 ...
python爬虫——爬取淘票票正在热映电影
今天正好学习了一下python的爬虫,觉得收获蛮大的,所以写一篇博客帮助想学习爬虫的伙伴们. 这里我就以一个简单地爬取淘票票正在热映电影为例,介绍一下一个爬虫的完整流程. 首先,话不多说,上干货--源 ...
python利用tkinter制作GUI界面，爬取淘票票国庆中秋双节时下热映电影
淘票票电影热榜网址: https://dianying.taobao.com/showList.htm?spm=a1z21.6646273.city.2.4ed46d6ekOc3wH&n_s= ...
利用爬虫实现淘票票「看过的电影」自动更新至Hexo博客
使用到的技术及工具: Python.Js.CSS.Bootstrap.Docker.nginx 额外需要的: VPS 效果预览:Tangerinew. 1. 编写爬虫前的准备工作项目的大概流程: 登 ...
Node.js 淘票票院线电影爬虫
Node.js 淘票票院线电影爬虫环境 node.js v12.16.3 axios@0.20.0 cheerio@1.0.0-rc.3 npm安装 npm install axios cheeri ...
淘票票总裁：中国电影能带动至少2000亿元供应链市场
原标题淘票票总裁李捷:中国电影能带动至少2000亿元供应链市场记者谢若琳 2019年2月份,中国内地电影票房突破111亿元,高于去年同期的101亿元,再创全球影史单市场.单月的票房新高.内地市场 ...
微信小程序（PHP服务端）之仿淘票票，制作电影购票程序
微信小程序(PHP服务端)之仿淘票票,制作购票程序前言一.业务流程二.效果图总结前言这学期对PHP进行了学习,就编程而言,和常用的java开发思路都大同小异,但是PHP的部署是真的方便,这 ...
猫眼、淘票票两虎相争：下沉市场、服务、内容成决胜关键
近年来,我国电影市场火热非常,由前瞻产业研究院发布的<中国电影产业市场前瞻与投资战略规划分析报告>数据显示,去年我国电影总票房为559.11亿元,同比增长13.45%,中国成全球第二大电影 ...