[iOS]实现多方向拖拽EXCEL表格中遇到的问题

之前在写一个类似于Excel表格页面时,一种方式是可以实现可以上下左右及斜角联动,另一种方式只可以上下左右联动。之所以提及这两种方式主要是在开发过程中第一种遇到了内存占用大问题,所以最终用了第二种方式实现Excel表格页面。 Demo传送门,若有实现同样需求的可以作为参考。

效果图.jpeg

思路:

第一种方式:左边用一个搭一个tableView显示每行标题,顶部物料编码用一个UIView显示,顶部用一个collectionView填列标题,中间用一个srollerView再将tableview放其上填满

#pragma mark - 右侧详情页面

- (void)loadDetailView {
    _detailScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(kAverageTableViewWidth, topConllectionCellH, kAverageTableViewWidth*2, kScreenHeight)];
    _detailScrollView.tag           =   DetailScrollViewTag;
    _detailScrollView.bounces       =   false;
    _detailScrollView.delegate      =   self;
    _detailScrollView.showsVerticalScrollIndicator      =  false;
    _detailScrollView.showsHorizontalScrollIndicator    =  false;
    _detailScrollView.contentSize   =   CGSizeMake(7*kAverageTableViewWidth, self.systransInquirystockArrays.count*rowHight);
    _detailScrollView.backgroundColor = [UIColor grayColor];
    
    
    _detailTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kAverageTableViewWidth*7, self.systransInquirystockArrays.count*rowHight) style:UITableViewStylePlain];
    _detailTableView.dataSource = self;
    _detailTableView.delegate = self;
    _detailTableView.tag = MidTableViewTag;
    _detailTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    
    [self.view addSubview:_detailScrollView];
    
    [_detailScrollView addSubview:_detailTableView];
}

上面代码主要是中间详情的内容视图,因为我这里的有七列,所以将scrollerView 的滚动范围设成

_detailScrollView.contentSize   =   CGSizeMake(7*kAverageTableViewWidth, self.systransInquirystockArrays.count*rowHight);

宽为七列宽,高度为请求回来的数组有多少数组将其成以设定tableViewCell的高度有多少。同时将tableView Frame设置成等同于scrollerView的尺寸,四个控件在代理方法拖拽的处理如下:

/**
 
 判断拖动的view的tag进行联动
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (_currentScrollViewTag == TitleTableViewTag) {
        CGFloat offSetX = _beforeScrollViewTag == TopIconListViewTag ? _topIconListView.contentOffset.x : _detailScrollView.contentOffset.x;
        _detailScrollView.contentOffset = CGPointMake(offSetX, _titleTableView.contentOffset.y);
        _topIconListView.contentOffset = CGPointMake(offSetX, 0);
        return;
    }
    if (_currentScrollViewTag == DetailScrollViewTag) {
        _titleTableView.contentOffset = CGPointMake(0, _detailScrollView.contentOffset.y);
        _topIconListView.contentOffset = CGPointMake(_detailScrollView.contentOffset.x, 0);
        return;
    }
    if (_currentScrollViewTag == TopIconListViewTag) {
        CGFloat offSetY = _beforeScrollViewTag == TitleTableViewTag ? _titleTableView.contentOffset.y : _detailScrollView.contentOffset.y;
        _detailScrollView.contentOffset = CGPointMake(_topIconListView.contentOffset.x, offSetY);
        _titleTableView.contentOffset = CGPointMake(0, _detailScrollView.contentOffset.y);
        return;
    }
}

可以看到中间详情tableView在代理方法中没做任何处理,详情tableView是跟随着scrollerView动的。
这样就实现了拖拽上下左右及斜角方向时四个控件的联动联动。但这样有不足之处,当请求下来的数据不大时还好,但行数一旦达到上千行时,明显内存会占用很大

第一种方式.png
第二种方式.png

可以对比两图第一种方式当我 加载大量数据时,相对于第二种方式出现了严重的内存占用问题。起初没发觉是因为我加载的数据不多,当有人出现全查时就会有这种情况出现,我检查了内存是否存在泄漏及cell的复用的情况都没问题,但仔细看代码才发现我这种方案是有问题的,因为我把中间详情tableView的Frame设置成等同于scrollerView的尺寸,当全查时即高度等于cell的高度乘以1000,当加载tableView时把全部cell加载出来,每个cell有近10个对象创建,将相当于上万个对象在占用内存,当滑动到最后一个时才会启用cell的回收机制,还好都是一些label,若是每个cell中有图片后果可想而知。

第二种方式:同样是搭建如上所搭建的方式,但srollerView的滑动范围改成如下

_detailScrollView.contentSize   =   CGSizeMake(7*kAverageTableViewWidth, kScreenHeight);

中间详情的tableview的Frame改成如下:

 _detailTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kAverageTableViewWidth*7, kScreenHeight)

拖拽的策略改成如下:

/**
 
 判断拖动的view的tag进行联动
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (_currentScrollViewTag == TitleTableViewTag) {
        //上一次点的是头部视图,内容试图的偏移量等于头部视图的偏移量,不然内容视图的偏移量等于本身的偏移量
        CGFloat offSetTableViewX = _beforeScrollViewTag == TopIconListViewTag ? _topIconListView.contentOffset.x : _detailTableView.contentOffset.x;
        _detailTableView.contentOffset = CGPointMake(offSetTableViewX, _titleTableView.contentOffset.y);
        return;
    }
    if (_currentScrollViewTag == MidTableViewTag) {
        _titleTableView.contentOffset = CGPointMake(0, _detailTableView.contentOffset.y);
        return;
    }
    if (_currentScrollViewTag == DetailScrollViewTag) {
        _topIconListView.contentOffset = CGPointMake(_detailScrollView.contentOffset.x, 0);
        return;
    }
}

当前拖拽中间详情tableview时,若是上下方向,识别的是中间详情的tableview,偏移量赋给左边行标题的tableview,若是左右方向时,识别的是tableview下的scrollerView的偏移量赋给头部的collectionView。当点击左边行标题的tableview如上代码注释。
这样的方案只创建看得见的cell,cell消失后就会启动cell的复用机制,所以内存不会怎么占用。但这样斜角拖拽方向没有实现。但上面最终竟然认可第二种方案,原因是斜角拖拽会有一种错乱感,虽然就这样去解决不是很好,以后再尝试在即保证内存优化的情况下实现第一种方式的excel表格吧。能力有限,有错求指正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容