iOS实现座位布局及交互

最近做了一款新的产品，客户需求中有一项是要把公司的工位布局及使用状况实时的展示在移动端并进行预订、取消等操作。当时看到这个需求的时候蛮期待，因为觉得做起来应该挺有意思。相信大家在手机上买电影票的时候都会用到选座位那个界面，每次用到一些别的App上有意思的功能的时候，都会想一下要是我来做该怎么实现，当然那些都只是一些简单的构思，这次要用到实战了。先上个截图~

工位图.jpeg

需求描述

首先描述下产品需求，要求把整个办公室的布局都要同比例绘制在移动端，并用不同的颜色进行标注，整个布局页面要实现缩放、选中、取消等交互能力。仔细想一下其实这个要比电影院选座位还要复杂，因为这个会涉及到不同类型的布局，有办公室、会议室、工位等十几种类型。

技术难点

接下来我就简单说下开发过程中遇到的印象比较深的几个问题及解决方法：

一、如何把一个个工位放在他们该有的位置

经过和客户、产品的讨论沟通，最后得出一个解决办法就是把整个办公区域都用一个一个工位拼接起来，会议室、办公室其实都是用多个工位拼凑而成的，只是加了一个类型判断，当然这点就需要客户那边给出工位详细的相对坐标了。

二、如何实现缩放并进行交互

之前做过一个缩放图片并拖动查看的功能，然后我就想用scrollView来试一下，当然结果就是完美解决。我们可以通过如下设置来实现缩放功能

seatScrollView.maximumZoomScale = 2.5f;
seatScrollView.minimumZoomScale = 1.0f;
seatScrollView.multipleTouchEnabled = YES;

其中maximumZoomScale控制的是最大缩放比例；minimumZoomScale控制最小缩放比例；multipleTouchEnabled要设置为YES，否则我们进行缩放的时候scrollView只能响应屏幕上的第一个点击事件，完成之后就可以为所欲为的缩放了。

三、如何判断点击的是哪一个工位

这里我是把每一个工位都封装成了一个自定义imageView，因为我进行操作的时候是针对整个工位布局的图进行的，所有你要判断你点击的是哪个item。这里我用了一个比较“投机”的方法，就是判断点击点的location，然后获取一个宽高为1的rect来判断落在哪个item的frame中

CGPoint touchP = [tap locationInView:self];
for (GRStationImageView *itemView in self.stationsViewArr) {
    CGRect tempR = CGRectMake(touchP.x, touchP.y, 1, 1);
    if (CGRectIntersectsRect(itemView.frame, tempR)) {
        //预约、取消操作
    }else{
                
    }
}

四、准确监听scrollView的滚动事件

因为要实现像电影院选座位那样在滚动的时候要在左上角显示一个小地图并框出当前位置，停止滚动的时候隐藏起来。本来以为在scrollView的代理方法里边设置一下就好了，但真正做的时候发现总是找不到合适的时机。最开始设计如下：

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    self.smallLayoutView.hidden = NO;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    self.smallLayoutView.hidden = NO;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //手指滑动快停止的时候触发
    self.smallLayoutView.hidden = YES;
}
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    //调用setContentOffset: animated:方法滚动停止时触发
}

这样可以实现，但是会有瑕疵，因为DidEndDecelerating在滚动快停止没有停止的某个时机调用，停止之前会一直调用DidScroll:方法。这时就会出现小地图闪烁一下看着很难受。后来改了一下

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    self.smallLayoutView.hidden = NO;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    [NSObject cancelPreviousPerformRequestsWithTarget:self];
    [self performSelector:@selector(scrollViewDidEndScrollingAnimation:) withObject:nil afterDelay:2.0];
}
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    [NSObject cancelPreviousPerformRequestsWithTarget:self];
    self.smallLayoutView.hidden = YES;
}

其中cancelPreviousPerformRequestsWithTarget:的作用是取消performSelector:withObject:afterDelay: 即将实现的方法，这样scrollView只要在滚动就能每次注册selector从而实现小地图与滚动事件同步显示。

五、数据方面的处理

因为办公室、会议室是一个整体的，面积可能占用好多个工位面积，但其实他们还是一个一个工位色块拼凑到一起的，现在要给一整个区域加上边框就比较麻烦了。最开始的时候想着用循环遍历来解决，但是真到实现的时候才发现逻辑的复杂性，而且要一遍一遍的遍历严重影响了性能。最后我在请求数据的地方用一个字典分别记录下来每个不同会议室的最大x、y，最小x、y，在绘制工位的时候判断当前坐标来控制四个边的显示隐藏，这样只需要遍历一次就解决了问题，大大提高了运算性能。

NSString *gwMinX = [stationDic objectForKey:[NSString stringWithFormat:@"%@minX",model.gwsn]];
NSString *gwMinY = [stationDic objectForKey:[NSString stringWithFormat:@"%@minY",model.gwsn]];
NSString *gwMaxX = [stationDic objectForKey:[NSString stringWithFormat:@"%@maxX",model.gwsn]];
NSString *gwMaxY = [stationDic objectForKey:[NSString stringWithFormat:@"%@maxY",model.gwsn]];
if (gwMinX) {//最小x
    NSInteger minX = model.zsx < gwMinX.integerValue ? model.zsx : gwMinX.integerValue;
    [stationDic setObject:@(minX) forKey:[NSString stringWithFormat:@"%@minX",model.gwsn]];
}else{
    [stationDic setObject:@(model.zsx) forKey:[NSString stringWithFormat:@"%@minX",model.gwsn]];
}
if (gwMinY) {//最小y
    NSInteger minY = model.zsy < gwMinY.integerValue ? model.zsy : gwMinY.integerValue;
    [stationDic setObject:@(minY) forKey:[NSString stringWithFormat:@"%@minY",model.gwsn]];
}else{
    [stationDic setObject:@(model.zsy) forKey:[NSString stringWithFormat:@"%@minY",model.gwsn]];
}
if (gwMaxX) {//最大x
     NSInteger maxX = model.zsx > gwMaxX.integerValue ? model.zsx : gwMaxX.integerValue;
     [stationDic setObject:@(maxX) forKey:[NSString stringWithFormat:@"%@maxX",model.gwsn]];
}else{ 
     [stationDic setObject:@(model.zsx) forKey:[NSString stringWithFormat:@"%@maxX",model.gwsn]];
}
if (gwMaxY) {//最大y
     NSInteger maxY = model.zsy > gwMaxY.integerValue ? model.zsy : gwMaxY.integerValue;
     [stationDic setObject:@(maxY) forKey:[NSString stringWithFormat:@"%@maxY",model.gwsn]];
}else{
     [stationDic setObject:@(model.zsy) forKey:[NSString stringWithFormat:@"%@maxY",model.gwsn]];
}

最终效果如下图所示：

预览工位.gif

可能我这个不是最优方案，仅供大家参考，欢迎多提宝贵意见！