iOS 模仿简书个人页的滑动

2016-08-23 本文已影响3550人天空中的球

作为简书的用户，个人页面肯定是常进入的，昨天在群里听朋友讨论说，这个页面实现有点绕，我很好奇，同时貌似我们后期也会有类似的需求，特此先学习模仿下。

简书个人主页

第一阶段

我第一个思路就是：

最底层是一个 UIScrollerView
上部是一个 HeaderView 加一个自定义选择器
下部是一个 UIScrollerView
下部的 UIScrollerView 中再套三个 UITableView

但是大致做出后，就立马就遇到几个问题：

1、下部 SubTableView 和最外层的 UIScrollerView 的效应重叠，就是在底部的时候，想滑动里面的最底层的 ScrollerView 的时候，外面那个却滑动啦
2、还有一个就是下部 UIScrollerView 中三个 SubUITableView 滑动起来乱走。
3、传值的不方便，如果是死的还好
4、是否外面需要刷新呢？简书这边是没有刷新的

ScrollerView 中的 subTableView 乱滑动

当然最主要是解决前面两个问题：

如何当在底部的时候不滑动下面的subTableView？
方法是从scrollViewDidScroll 滑动中判断位置，然后设置是否可以滑动

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 CGFloat maxMoveY = kHeaderViewHeight - kHeaderTitleHeight; // 最大滑动距离
    // 判断其位置 让其底部是否可以滑动
    if (self.backScrollView.contentOffset.y >= maxMoveY ) {
        self.trendsTableView.scrollEnabled = YES;
        self.articleTableView.scrollEnabled = YES;
        self.moreTableView.scrollEnabled = YES;
    }
    else {
         self.trendsTableView.scrollEnabled = NO;
         self.articleTableView.scrollEnabled = NO;
         self.moreTableView.scrollEnabled = NO;
    }
     
    // 当滑到头部时，不让其subTableView 滑动
    if (self.trendsTableView.contentOffset.y < 0) {
        self.trendsTableView.scrollEnabled = NO;
    }
    if (self.articleTableView.contentOffset.y < 0) {
        self.articleTableView.scrollEnabled = NO;
    }
    if (self.moreTableView.contentOffset.y < 0) {
        self.moreTableView.scrollEnabled = NO;
    }
 }

当然这里面还要判断诸多咯，（判断底部横向ScrollerView），此处只是针对上述那个问题而做的。

如何不出现 SCrollerView 乱动呢？
方法是 KVO 出发，通过 contentOffset 判断，当位置超出界限就停止滑出。

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(__unused id)object
                        change:(NSDictionary *)change
                       context:(void *)context { 
        CGFloat offsetX              = self.bottomScrollerView.contentOffset.x;
        CGFloat offsetY              = self.bottomScrollerView.contentOffset.y;
        CGFloat contentMaxWidth      = self.bottomScrollerView.contentSize.width - SCREEN_WIDTH;
        CGFloat contentMaxHeight     = self.bottomScrollerView.contentSize.height - kHeaderTitleHeight - kNavBarHeight;
        
        if (offsetX < 0 ) {
            [self.bottomScrollerView setContentOffset:CGPointMake(0, offsetY)];
        }
        
        if (offsetY < 0) {
            [self.bottomScrollerView setContentOffset:CGPointMake(offsetX, 0)];
        }

        if (offsetX >contentMaxWidth) {
            [self.bottomScrollerView setContentOffset:CGPointMake(contentMaxWidth, offsetY)];
        }
        
        if (offsetY > contentMaxHeight) {
            [self.bottomScrollerView setContentOffset:CGPointMake(offsetX, contentMaxHeight)];
        }

}

不过实际中，只需要判断左右不超出界限，基本就可以啦，继续尝试...

self.bottomScrollerView.bounces = NO; // 记住设置无反弹

这个是否有反弹效果，跟具体设置有关，像上面那样设置死了，为了不防止不错先错误，需要设置为NO，目前此处只是思路，后续继续优化中。

第二阶段

上述已经实现的差不多啦，到目前来说，目前来说最大的问题就是当底部的subTableView 滑到上面后，要整体一起滑动下来，单纯滑动subTableView 不好弄，需要拖动 headerView 才可以滑动下来。

ScrollView 不连贯

此时，用一个鸡贼的方法，当其滑动到那个位置直接切换成为最外层 ScrollerView 滑动的状态：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 CGFloat maxMoveY = kHeaderViewHeight - kHeaderTitleHeight; // 最大滑动距离
    if (self.trendsTableView.contentOffset.y < 0) {
        self.trendsTableView.scrollEnabled = NO;
        [self.backScrollView setContentOffset:CGPointMake(0, maxMoveY - 1)];
    }
    if (self.articleTableView.contentOffset.y < 0) {
        self.articleTableView.scrollEnabled = NO;
        [self.backScrollView setContentOffset:CGPointMake(0, maxMoveY - 1)];
        
    }
    if (self.moreTableView.contentOffset.y < 0) {
        self.moreTableView.scrollEnabled = NO;
        [self.backScrollView setContentOffset:CGPointMake(0,maxMoveY - 1)];
    }
}

这样下来，大致确实是效果实现啦，但是上述那个问题会有一个停顿，感觉怪怪的，这里面有好多非系统的方法，还有诸多临界条件的判断，想着是否可以改善一下啦，特别是头部滑动和整体滑动的连贯性啦，是否最外层 View 直接可以用 UICollectionView 或 UITableView 呢。

第三阶段

对比他人写的，在网上走了一圈，发现了几个已经写好的，个人觉的实现的蛮好的，而且它们都一致的采用 UICollectionView 为最底部的方法，而且封装好啦

HHHorizontalPagingView
SwipeTableView
ZJScrollPageView: 功能很多，其中有一个就是简书个人页的这种，不错

重点看了HHHorizontalPagingView 的源码，它们也有类似的处理方法解决我遇到的问题，其中一点用 hitTest 的方法，让其做自己需要实现的事件，是可以在后期这样的问题中用的：

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView *view = [super hitTest:point withEvent:event];
    if ([view isDescendantOfView:self.headerView] || [view isDescendantOfView:self.segmentView]) {

    }
    return view;
}

isDescendantOfView: 方法来判定一个视图是否在其父视图的视图层中，然后做相应的处理。

用 UICollectionView 后，header 和 cell 的连接自然是没有那个卡顿的，所以最后实现是将上面那个 ScrollerView 换成 UICollectionView 来做。

刚开始直接用UICollectionView 来写，我感觉传值老麻烦的，但是看完他们这边封装实现的后，发现他们都是将具体的 subTableView 抽离出来后，这样更很直接传值也码洋麻烦。同时对比自己和他们写的比较，发现自己缺少从封装角度出发来实现，当然是否每一个需求实现都需要从封装的角度出发呢？封装抽取思想。。。

总的说来，如何去实现，还是看自己项目的具体的需求，传值是一个接口还是三个接口？是否有刷新？这个真看情况而定，如想直接用，用上述两个封装好的之一，也是OK的。

备注：

https://github.com/weijingyunIOS/HHHorizontalPagingView
https://github.com/Roylee-ML/SwipeTableView

iOS 模仿简书个人页的滑动

第一阶段

第二阶段

第三阶段

备注：

猜你喜欢

热点阅读

iOS 模仿 简书个人页的滑动

第一阶段

第二阶段

第三阶段

备注：

猜你喜欢

热点阅读

iOS 模仿简书个人页的滑动