美文网首页ios开发整理iOS猛码计划
iOS: 如何简单舒服的实现新浪微博个人主页效果

iOS: 如何简单舒服的实现新浪微博个人主页效果

作者: 刘奶奶去买榴莲和牛奶 | 来源:发表于2018-07-10 16:51 被阅读140次

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

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

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

    但是懒人懒办法, 有一个最简单有效的方法就是把TableVIewPanGesture添加到最底层的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

    相关文章

      网友评论

      • FindCrt:猜想是因为scrollView的驱动靠的是pan手势的addTarget:action:,手势移到其他view上还是把事件推给scrollView

      本文标题:iOS: 如何简单舒服的实现新浪微博个人主页效果

      本文链接:https://www.haomeiwen.com/subject/bqynyftx.html