php实现猫眼电影院选座思路,高仿猫眼电影选座(选票)模块

前言:

高仿猫眼选票模块,看着猫眼app选票模块做的如此之帅,网上又没比较好的库,自己手痒痒了就开始模仿起来了,最终用了几天时间实现了,也封装好了一套选座模块。

上图看效果先:

5996f1f656e7f0c57931419be77ac06c.gif

7b3df2e9e9034ceec3923a1b9405a575.gif

69148125036efef4250dc45cc9f50c15.gif

01f7e78e29d6dc574703871382b6fe60.gif

1)画座位图其实不是很难一般数据都会给坐标,将坐标对应座位画出来就可以了,主要是开场动画要设置默认大小,还有座位图的数量也不是固定的,所以在初始化座位图的时侯就默认算出了整个座位图的大小-(instancetype)initWithSeatsArray:(NSMutableArray *)seatsArray maxNomarWidth:(CGFloat)maxW seatBtnActionBlock:(void (^)(id))actionBlock{

if (self = [super init]) {

self.actionBlock = actionBlock;

ZFSeatsModel *seatsModel = seatsArray.firstObject;

NSUInteger cloCount = [seatsModel.columns count];

if (cloCount % 2) cloCount += 1;//偶数列数加1 防止中线压住座位

CGFloat seatViewW = maxW - 2 * ZFseastsRowMargin;

CGFloat seatBtnW = seatViewW / cloCount;

if (seatBtnW > ZFseastMinW_H) {

seatBtnW = ZFseastMinW_H;

seatViewW = cloCount * ZFseastMinW_H;

}

//初始化就回调算出按钮和自身的宽高

CGFloat seatBtnH = seatBtnW;

self.seatBtnWidth = seatBtnW;

self.seatBtnHeight = seatBtnH;

self.seatViewWidth = seatViewW;

self.seatViewHeight = [seatsArray count] * seatBtnH;

//初始化座位

[self initSeatBtns:seatsArray];

}

return self;

}

2)画侧边的索引条 主要就是算出总共有多少列,有没走到之类的 将座位列号根据每个竖向坐标直接画进索引条就可以了

//画索引条

- (void)drawRect:(CGRect)rect {

NSDictionary *attributeName = @{NSFontAttributeName: [UIFont systemFontOfSize:10],NSForegroundColorAttributeName : [UIColor whiteColor]};

CGFloat NuomberTitleH = (self.height - 2 * 10) / self.indexsArray.count;

[self.indexsArray enumerateObjectsUsingBlock:^(ZFSeatsModel *seatsModel, NSUInteger idx, BOOL *stop) {

CGSize strsize =  [seatsModel.rowId sizeWithAttributes:attributeName];

[seatsModel.rowId drawAtPoint:CGPointMake(self.width * 0.5 - strsize.width  * 0.5,10 + idx * NuomberTitleH + NuomberTitleH  * 0.5 - strsize.height  * 0.5) withAttributes:attributeName];

}];

}

3)中线启示也是自定义一个view画一条线线上是label,每次随座位图上下滚动,重新设置自身高度重绘该线条就能达到效果-(void)setHeight:(CGFloat)height{

[super setHeight:height];

[self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect {

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(context, 1.0);

CGContextSetStrokeColorWithColor(context, [UIColor darkGrayColor].CGColor);

CGFloat lengths[] = {6,3};

CGContextSetLineDash(context, 0, lengths,2);

CGContextMoveToPoint(context, 0, 0);

CGContextAddLineToPoint(context, 0, self.bounds.size.height);

CGContextStrokePath(context);

}

4)每次座位图滚动的时候随着偏移量的变化更新其他所有控件的坐标就能达到某一方向跟随scrollview滚动方向移动- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

// 更新applogo

if (scrollView.contentOffset.y <= scrollView.contentSize.height - self.height +ZFseastsColMargin + 15) {

self.maoyanLogo.y = CGRectGetMaxY(self.seatView.frame) + 35;

self.maoyanLogo.centerX = self.seatView.centerX;

}else{

self.maoyanLogo.centerX = self.seatView.centerX;

self.maoyanLogo.y = scrollView.contentOffset.y + self.height - self.maoyanLogo.height;

}

//更新hallLogo

self.hallLogo.y = scrollView.contentOffset.y;

//更新中线

self.centerLine.height = CGRectGetMaxY(self.seatView.frame) + 2 * ZFSmallMargin;

if (scrollView.contentOffset.y 

self.centerLine.y = self.seatView.y - ZFseastsColMargin + ZFCenterLineY;

}else{

self.centerLine.y = scrollView.contentOffset.y + ZFCenterLineY;

self.centerLine.height = CGRectGetMaxY(self.seatView.frame) - scrollView.contentOffset.y - 2 * ZFCenterLineY + ZFseastsColMargin;

}

// 更新索引条

self.rowindexView.x = scrollView.contentOffset.x + ZFseastMinW_H;

//更新indicator大小位置

[self.indicator updateMiniIndicator];

if (!self.indicator.hidden || self.seatScrollView.isZoomBouncing)return;

self.indicator.alpha = 1;

self.indicator.hidden = NO;

}

如果该模块有帮到你,或者从中学到了一些知识请麻烦给个星,谢谢啦!

猫眼电影选座是一个使用Vue编写的电影移动端锁座页面,类似于淘票票和猫眼的功能。该项目经过了超过百个影厅的测试,并包含了座位生成、座位预览生成、座位留空检测、座位智能选择最优座位算法、自适应影厅大小、座位左侧导航栏的过道等功能。 此项目是基于Vue编写的一个智能选座移动客户端。作者在公司需要实现H5端的购票平台时,第一次接触到Vue,并将其用于开发这个选座项目。作者在GitHub和码云上分享了项目代码,包括后端录入数据、接口和前端展示,供大家讨论和完善。 你可以点击[这里](https://github.com/zenghao0219/seat-select)查看项目的GitHub地址,也可以点击[这里](https://gitee.com/xollipop/seat-select)查看项目的码云地址。 如果你想预览该项目的演示,请使用手机访问[这里](demo链接)。该项目还包括座位生成、座位预览生成、座位留空检测、座位智能选择最优座位算法、自适应影厅大小、座位左侧导航栏的过道检测、普通座位的选择逻辑和情侣座位的选择逻辑等功能。 以下是项目的部分截: (如果有截的话,请插入截并进行描述)<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [seat-select:类似猫眼,淘票票,目前最流畅的vue选座移动端,座位选座,情侣座,座位留空检测,智能选座算法,座位...](https://download.csdn.net/download/weixin_42116604/19140192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用vue编写猫眼、淘票票、美团的智能选座移动客户端 (一)](https://blog.csdn.net/solanel/article/details/93620267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值