前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS 仿Excel 实现

iOS 仿Excel 实现

作者头像
赵哥窟
发布2021-06-01 20:39:29
9940
发布2021-06-01 20:39:29
举报
文章被收录于专栏:日常技术分享

今天有个需求需要实现Excel的效果:如图

image.png

提醒

这只是一个demo,没有考虑那么多需求,也只是提供一个学习的思路。有具体的需求可以修改代码,避免重复造轮子。

实现的思路

顶部的Header 最左侧[左上头]放的是一个UILabel,后面就放的是一个UICollectionView。

头部下面 头部下面整体是一个UITableView,然后每个Cell的Header部分也是UlLabel,后面也是一个UICollectionView

难的部分

左右滚动 左右滚动的时候左边Header和顶部Header最左边固定,其他部分跟随滚动

上下滚动 顶部Header固定,其他部分跟随滚动

滚动部分核心代码

整个滚动Demo就这部分难一点,其他的都很简单,看看都懂的。

代码语言:javascript
复制
- (void)scrollViewDidScroll:(UIScrollView*)scrollView
{
    if ([scrollView isKindOfClass:[UICollectionView class]]) {
        if (scrollView.contentOffset.y != 0) {
            scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x, 0);
        }
        NSLog(@"scroll %f",scrollView.contentOffset.x);
        
        self.topExcelCollectionView.contentOffset = scrollView.contentOffset;
        
        for (ExcelTableCell* cell in self.excelTableView.visibleCells) {
            for (UIView *view in cell.contentView.subviews) {
                if ([view isKindOfClass:[UICollectionView class]]) {
                    UICollectionView *collectionView = (UICollectionView *)view;
                    collectionView.contentOffset = scrollView.contentOffset;
                    self.cacheContentOffset = CGPointMake(scrollView.contentOffset.x, scrollView.contentOffset.y);
                }
            }
        }
        
    }else{
        self.topExcelCollectionView.contentOffset = self.cacheContentOffset;
        
        for (ExcelTableCell* cell in self.excelTableView.visibleCells) {
            for (UIView *view in cell.contentView.subviews) {
                if ([view isKindOfClass:[UICollectionView class]]) {
                    UICollectionView *collectionView = (UICollectionView *)view;
                    collectionView.contentOffset = self.cacheContentOffset;
                }
            }
            
        }
    }
    
}

Demo 下载地址

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 提醒
    • 实现的思路
      • 难的部分
        • 滚动部分核心代码
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档