[iOS]scrollView嵌套多个tableView仿新浪微博个人主页实现

前言

实际开发过程中，总会使用到新浪微博个人主页这种页面形式。下面是我的实现思路和过程。

页面介绍讲解

图一默认状态

图二置顶状态

如 图一默认状态 个人主页我们分成两大区域绿色（A）和红色（B+C）区域； 绿色区域A我们叫他Header，红色区域我们叫他Body;其中较为复杂的Body分为segement栏（B）和类似tableView的（C）组成，而且B很明显类似一个UIPageViewController。

分解思路：

（1）Header可以根据项目需要自己写 View,非常简单，不多做介绍

（2）Body本次调研使用WMPageController实现

（3）声明实例化一个UIScrollView*类型的containerScrollView属性作为superView添加Header和Body，使ABC可以作为一个整体滑动；

交互过程和痛点

（1）滑动tableViewC时分两种情况图一默认状态和图二置顶状态

（2）图一默认状态时滑动tableViewC，tableView不会滑动（tableView的contentOffset不会改变）

（3）直到segement栏（B）滑动到导航栏底部时，tableViewC才真正可以滑动（contentOffset大于0）。

（4）在(3)至此之后，再将手指下滑页面，当tableViewC的contentOffset回归0，segement栏（B）开始偏离导航栏。

上面是交互过程并不复杂，但是将过程(1)(2)(3)仅用手指一次完成(保持连续性)是这次需求的痛点：

【1】如果手指一开始在C上滑动，那么滑动手势会被C的tableView所拦截，ABC不会作为一个整体更随便宜，而我们是需要B和导航栏相接时才让C的tableView开始响应滑动事件！这是多数人做这个需求时候遇到的第一大难题！

【2】为了解决【1】很多人会先让C的tableView的scrollEnabled为NO,等到B和导航栏相接时才让C的tableView的scrollEnabled为YES；那你就顺利进入了另一个坑，还是"将过程(1)(2)(3)仅用手指一次完成(保持连续性)"这个问题，当你手指在C的tableView上开始往上滑动，等到B和导航栏相接时才让C的tableView的scrollEnabled从NO变成YES的过程中会出现另一个问题，scrollEnabled状态切换会导致手势的中断。所以这种方法不可行。

解决方法

懂得多的同学可能知道协议@protocol UIGestureRecognizerDelegate <NSObject>有一个方法。返回一个BOOL可以用来决定是否响应多个手势，默认返回是NO。我们创建一个UIScrollView的子类MultiResponseScrollView,然后遵循协议，并时下如下代码，注意返回值YES；

/**
 同时识别多个手势
 
 @param gestureRecognizer gestureRecognizer description
 @param otherGestureRecognizer otherGestureRecognizer description
 @return return value description
 */
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}
复制代码

前面提到声明的实例containerScrollView，我们就让他的类型从UIScrollView改成MultiResponseScrollView。然后你就可以发现：在图一默认状态状态时，手指在C的tableView上开始往上滑动时，containerScrollView竟然也收到了滑动的手势，所以结果是 C的tableView和containerScrollView一起在滑动。(到这里如果没有接触过上面这个协议方法的同学建议可以开始写一写代码了，光看不写是不行的，对说的就是你！)

哈哈哈到这里，我们已经实现了这个交互的一半的效果了，而另一半的工作就是要解决:

【1】上面（在segement栏（B）还没和导航栏相接时）只让containerScrollView滑动而不是C的tableView也跟着一起滑动。

【2】再进一步的说，当图二置顶状态再将手指下滑页面，先让containerScrollView不滑动直到tableViewC的contentOffset回归0。 【3】当tableViewC的contentOffset回归0，再让containerScrollView响应滑动，ABC整体下移。

以上三步距可以在UIScrollViewDelegate的-scrollViewDidScroll:中实现。

好了，到这里我已经提供了最大痛点的解决思路，本来是想下面写上部分代码实现，但是时间原因（忙啊！我也没办法ಥ_ಥ）和为了让各位自己练手（笑），暂且就先不写了哈哈哈哈。如果你有疑问欢迎在下面回复我。如果点赞人数多或者问题回复比较多的话我后面考虑抽时间整理一份页面框架的工具代码。

转载于:https://juejin.im/post/5b98d2055188255c7f5e98bb