实现简书个人中心UI效果

8月9日更新：
1、代码重构，三个的tableView分别解耦到三个控制器中管理
2、添加MJRefresh，点击右上角开关可动态添加／移除刷新控件，最新代码可到GitHub 上下载

这两天比较闲，简单实现了一下个人中心页面scrollView嵌套的效果，也就是下边这个页面,大家感受一下先：

首先讲下实现思路，很多人看到这个界面觉得是多个scrollView嵌套实现的，其实苹果不推荐scrollView的嵌套，特别是有同方向滚动行为的scrollView嵌套，因为系统也不知道你当前想要哪个scrollView滚动。那我就在想能不能想个办法绕过这个问题，最终我采取了这样的方案，底部一个横向滑动的scrollView，上边放着左中右三个tableView，这样就避开了scrollView同方向滑动冲突问题，每个tableView上都有个空白的headerView占位使用（看了下边的讲解就明白了），然后再在控制器view上方一个view做真实的headerView，放控制器的view上是为了不让它随任何一个tableView滑动而滑动，而是在某些时候改变其y值来制造和三个tableView共同滚动的假象！接下来请看具体讲解和代码实现：

控制器的view上是个横向滑动的scrollView，上边放着三个tableView,主要代码如下

// 底部横向滑动的scrollView
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:scrollView];
    scrollView.backgroundColor = [UIColor colorWithWhite:0.998 alpha:1];
    
    // 绑定代理
    scrollView.delegate = self;
    
    // 设置滑动区域
    scrollView.contentSize = CGSizeMake(3 * WZBScreenWidth, 0);
    scrollView.pagingEnabled = YES;
    self.scrollView = scrollView;

    // 创建三个tableView
    self.leftTableView = [self tableViewWithX:0];
    self.centerTableView = [self tableViewWithX:WZBScreenWidth];
    self.rightTableView = [self tableViewWithX:WZBScreenWidth * 2];

// 创建tableView
- (UITableView *)tableViewWithX:(CGFloat)x {
    
    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(x, 0, WZBScreenWidth, WZBScreenHeight - 0)];
    [self.scrollView addSubview:tableView];
    tableView.backgroundColor = [UIColor colorWithWhite:0.998 alpha:1];
    tableView.showsVerticalScrollIndicator = NO;
    
    // 代理&&数据源
    tableView.delegate = self;
    tableView.dataSource = self;
    
    // 创建一个假的headerView，高度等于控制器view上那个headerView的高度（这里暂且写死150+44）
    UIView *headerView = [[UIView alloc] initWithFrame:(CGRect){0, 0, WZBScreenWidth, 194}];
    
    tableView.tableHeaderView = headerView;
    return tableView;
}

然后为每个tableView创建一个假的headerView，高度等于控制器view上那个headerView的高度（这里暂且写死150+44），为什么这样做？因为我要在控制器的view上放一个headerView，这样就能方便的控制headerView的y值，使其达到预期的效果，这样也创造出了一个假象，就是其实上边的headerView跟三个tableView没有什么关系，只是在滑动的时候动态的改变headerView的y值，当tableView滑动到某个位置的时候，让其能够停留在这个位置。监听tableView滑动的代码下边会讲到。如图：

headerView分为两部分，一部分是上边的死数据，其实就是一个自定义view，上边几个label。下边部分是个类似segmeng的自定义控件，是用我之前写的WZBSegmentedControl实现的，具体请看干货！老司机工作中用到的自定义控件，总有一个适合你的（一），创建代码为：

// 创建segmentedControl
    WZBSegmentedControl *sectionView = [WZBSegmentedControl segmentWithFrame:(CGRect){0, 150, WZBScreenWidth, 44} titles:@[@"动态", @"文章", @"更多"] tClick:^(NSInteger index) {
        
        // 改变scrollView的contentOffset
        self.scrollView.contentOffset = CGPointMake(index * WZBScreenWidth, 0);
        
        
        // 刷新最大OffsetY
        [self reloadMaxOffsetY];
    }];
    
    // 赋值给全局变量
    self.sectionView = sectionView;
    
    // 设置其他颜色
    [sectionView setNormalColor:[UIColor blackColor] selectColor:[UIColor redColor] sliderColor:[UIColor redColor] edgingColor:[UIColor clearColor] edgingWidth:0];
    
    // 去除圆角
    sectionView.layer.cornerRadius = sectionView.backgroundView.layer.cornerRadius = .0f;
    
    // 加两条线
    for (NSInteger i = 0; i < 2; i++) {
        UIView *line = [UIView new];
        line.backgroundColor = WZBColor(228, 227, 230);
        line.frame = CGRectMake(0, 43.5 * i, WZBScreenWidth, 0.5);
        [sectionView addSubview:line];
    }

重点是下边的一些代理方法的监听：

一、正在滚动的时候(本demo定死了headerView的高度为150+44)

如果发现是tableView在滑动，判断滑动偏移量是否大于150，如果不大于150，则同步三个tableView的偏移量为当前tableView的偏移量，这样做是让三个tableView看起来像是在同步移动，然后改变headerView的y值（让headerView也往上走）。如果偏移量大于等于150，则让headerView的y值等于-150，就相当于停留在这个位置了。如果发现当前滚动的是底部横向那个scrollView，则需要同步segment的偏移量，代码如下：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    // 如果当前滑动的是tableView
    if ([scrollView isKindOfClass:[UITableView class]]) {
        
        CGFloat contentOffsetY = scrollView.contentOffset.y;
        
        // 如果滑动没有超过150
        if (contentOffsetY < 150) {
            
            // 让这三个tableView的便宜量相等
            self.leftTableView.contentOffset = self.centerTableView.contentOffset = self.rightTableView.contentOffset = scrollView.contentOffset;
            
            // 改变headerView的y值
            CGRect frame = self.headerView.frame;
            CGFloat y = -self.rightTableView.contentOffset.y;
            frame.origin.y = y;
            self.headerView.frame = frame;
            
            // 一旦大于等于150了，让headerView的y值等于-150，就停留在上边了
        } else if (contentOffsetY >= 150) {
            CGRect frame = self.headerView.frame;
            frame.origin.y = -150;
            self.headerView.frame = frame;
        }
    }
    
    if (scrollView == self.scrollView) {
        // 改变segmentdControl
        [self.sectionView setContentOffset:(CGPoint){scrollView.contentOffset.x / 3, 0}];
        return;
    }
}

这一步做完之后其实是不够严谨的，事实证明scrollViewDidScroll:这个代理方法调用的并不足够频繁，导致一些bug，就是三个tableView并没有同步，可能其中一个tableView滑了上去，而另外两个还没有跟上去。这时候如果左右滑动，就会暴露这个问题，如图：

二、解决办法就是在开始左右滑动的时候，同步一下三个tableView的偏移量

// 开始拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    if (scrollView == self.scrollView) {
        
        // 刷新最大OffsetY
        [self reloadMaxOffsetY];
    }
}

// 刷新最大OffsetY，让三个tableView同步
- (void)reloadMaxOffsetY {
    
    // 计算出最大偏移量
    CGFloat maxOffsetY = MAXValue(self.leftTableView.contentOffset.y, self.centerTableView.contentOffset.y, self.rightTableView.contentOffset.y);
    
    // 如果最大偏移量大于150，处理下每个tableView的偏移量
    if (maxOffsetY > 150) {
        if (self.leftTableView.contentOffset.y < 150) {
            self.leftTableView.contentOffset = CGPointMake(0, 150);
        }
        if (self.centerTableView.contentOffset.y < 150) {
            self.centerTableView.contentOffset = CGPointMake(0, 150);
        }
        if (self.rightTableView.contentOffset.y < 150) {
            self.rightTableView.contentOffset = CGPointMake(0, 150);
        }
    }
}

这时候，就解决了那个bug，基本功能也完成了，接下来解释一下位于导航栏上的头像处理：

为了能让头像自由的放大／缩小，并动态改变其y值，达到预期效果，我用了两个view实现，一个是底部普通的view做导航栏titleView，然后再在这个view上放imageView展示头像，然后监听scrollViewDidScroll:方法，一边改变imageView的大小，一边改变y值，就实现了简书的那种效果，注意最大和最小的边界值，代码如下：

// 加载头部头像
    UIView *avatarView = [[UIView alloc] initWithFrame:(CGRect){0, 0, 35, 35}];
    avatarView.backgroundColor = [UIColor clearColor];
    
    UIImageView *avatar = [[UIImageView alloc] initWithFrame:(CGRect){0, 26.5, 35, 35}];
    avatar.image = [UIImage imageNamed:@"demo1"];
    avatar.layer.masksToBounds = YES;
    avatar.layer.cornerRadius = 35 / 2;
    [avatarView addSubview:avatar];
    self.navigationItem.titleView = avatarView;
    avatar.transform = CGAffineTransformMakeScale(2, 2);
    
    self.avatar = avatar;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    // 处理顶部头像
    CGFloat scale = scrollView.contentOffset.y / 80;
    
    // 如果大于80，==1，小于0，==0
    if (scrollView.contentOffset.y > 80) {
        scale = 1;
    } else if (scrollView.contentOffset.y <= 0) {
        scale = 0;
    }
    
    // 缩放
    self.avatar.transform = CGAffineTransformMakeScale(2 - scale, 2 - scale);
    
    // 同步y值
    CGRect frame = self.avatar.frame;
    frame.origin.y = (1 - scale) * 8;
    self.avatar.frame = frame;
}

打完收工，最后附上源码：JianShuMianPage 欢迎star

我的更多文章：老司机带你飞

请不要吝惜，随手点个喜欢或者关注一下吧！您的支持是我最大的动力😊！
您可以关注我以便及时查看我的最新文章，如果您对本篇文章有任何疑问，请随时私信我，您还可以加入我们的群，大家庭期待您的加入！