类似于新浪微博个人主页的UI效果在iOS中是很常见的, 实现的难度就在于既可以左右滑动, 也可以上下滑动.

通常的做法是在一个横向滚动的ScrollView上添加几个竖向的TableVIew, 最后加一个HeaderView在ScrollView的superView上, 这么做的话会有一个问题就是HeaderView无法竖向滑动.

有看到其它博客说给HeaderView加一个滑动手势, 来模拟TableView的滑动, 但是就缺少了ScrollView回弹的弹簧动画, 再后来有自己来实现弹簧动画的思路, 大佬果然棒棒哒, 什么困难都可以克服 😄

但是懒人懒办法, 有一个最简单有效的方法就是把TableVIew的PanGesture添加到最底层的superView上就可以了, 我们只需要对他做一些控制.

- (void)_buildIndex {
    NSInteger index = (NSInteger)(_mainScrollView.contentOffset.x / self.width);
    index = MIN(_tableViews.count - 1, index);
    index = MAX(0, index);
    [self removePanGestureForIndex:_index];
    _index = index;
    [self addPanGestureForIndex:_index];
    _currentIndex = index;
    if (self.currentIndexDidChange) {
        self.currentIndexDidChange(_currentIndex);
    }
}

- (void)addPanGestureForIndex:(NSInteger)index {
    if (index < _tableViews.count && index >= 0) {
        UITableView *tb = _tableViews[index];
        [self addGestureRecognizer:tb.panGestureRecognizer];
    }
}

- (void)removePanGestureForIndex:(NSInteger)index {
    if (index < _tableViews.count && index >= 0) {
        UITableView *tb = _tableViews[index];
        [self removeGestureRecognizer:tb.panGestureRecognizer];
    }
}

最终实现效果如下:

Demo.gif

GitHub传送门

这里还有另外一位大佬写的一个库, 实现思路是相同的 HJTabViewController