仿猫眼电影选座功能实现

作者: 哦呵呵y | 来源:发表于2017-12-08 18:23 被阅读100次

前言

高仿猫眼选票模块,因为公司业务需求,要对接猫眼电影,网上也没有很完整的库,所以就结合了ZFSeatsSelection以及其他几个库封装一个符合公司要求的电影选座模块。

在基础的选座功能上实现了情侣座的选择和是否落单的判断

实现效果

6fc722f7-8491-434a-8b07-c1aa35123add的副本.gif

实现方式

选座模块总体分为三块:

  1. 座位图,猫眼数据中会包含行列信息,将座位根据行列信息画到ScrollView
  2. 索引,根据总行数画出索引条,在视图缩放时根据座位图的最新高度调整索引条的大小、位置
  3. 小地图,将座位图截图放到小地图上,在移动、缩放时根据当前座位图显示范围经转换坐标、然后等比例缩放就有了小地图中红框的范围
    CGRect displayFrame = CGRectMake(self.contentOffset.x, self.contentOffset.y, self.width, self.height);
    CGRect contentDisplayFrame = CGRectIntersection(displayFrame, _contentView.frame);
    contentDisplayFrame = [self convertRect:contentDisplayFrame toView:_contentView];
    CGFloat scale = (_indicatorView.width - 6) / _contentView.width;
    [_indicatorView updateMiniIndicatorWithDisplayRect:(CGRect){
        contentDisplayFrame.origin.x * scale * self.zoomScale,
        contentDisplayFrame.origin.y * scale * self.zoomScale,
        contentDisplayFrame.size.width * scale * self.zoomScale,
        contentDisplayFrame.size.height * scale * self.zoomScale
    }];
  1. 接下来就是处理缩放选中等功能,借助系统UIScrollView的缩放功能可以很容易实现,注意要将座位图整体座位要缩放的单位,不要将索引、logo等其他不需要缩放的视图放到座位图上面
  2. 最后就是是否落单的判断,检查规则:
    1. 只检查同行
    1. 不检查情侣座位
    1. 只有一边有空座位则为不落单
    1. 两边都有空座且至少有一边为单个座位为落单

到此,整个功能就已经实现,代码已经发布到Github上面: YSSeatsPicker

相关文章

网友评论

  • 265c2c162587:你好,这个选坐小程序能用么
    265c2c162587:好的,谢谢
    哦呵呵y:可以,不过估计得稍微改一下,只是一个小demo,细节还得调一下

本文标题:仿猫眼电影选座功能实现

本文链接:https://www.haomeiwen.com/subject/hjcyixtx.html