前言, 之前写了动手写一个快速集成网易新闻，腾讯视频，头条首页的ScrollPageView,显示滚动视图这篇文章, 有多个朋友问到怎么实现类似简书个人主页的滑块效果, 本着学习的目的,笔者去研究了一下,这里给出一种比较简单的实现方案(也可以使用UIScrollView来实现,不过略显麻烦,这里就省略了)

最终效果

简书个人主页效果.gif

注意!!! 实现这个效果github上的代码有更新,增加了一个代理方法来实现在切换页面的时候将滑块置顶(简书没有这个效果) , 请大家使用最新的代码

构思: 利用UITableView的自身的sectionView的浮动效果来实现.

1. 设置tableView只有一个section并且只有一行row

2. 设置这个section的View为segmentView,并且设置tableView.sectionHeaderHeight为segmentView的高度,来容纳滑块, 这样就可以实现在滚动tableView的时候实现滑块的浮动效果

3. 添加显示滚动页面的contentView到这一个cell的contentView, 并且设置tableView.rowHeight为 显示滚动页面的contentView的高度

4. 设置tableView的headView为自定义的

5. 根据个人需要设置 segmentView, tableView, contentView的frame, 特别需要注意的是如果tableView是从storyBoard中连线得到的, 那么设置其他的frame就和demo中有差异,具体的大家自己去研究吧

6. 利用UIScrollViewDelegate 这里的代理可以监控tableView的滚动, 在滚动的时候就可以做一些事情, 比如使navigationBar渐变, 或者像简书一样改变头像的属性

实现部分

1 属性部分, 这些懒加载方法里面设置了他们的相关属性, 其中的具体设置和动手写一个快速集成网易新闻，腾讯视频，头条首页的ScrollPageView,显示滚动视图这里面介绍的使用相同, 这里就不在赘述了

属性.png

2 tableView的设置

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "简书个人主页"
        
        addChildVcs()
        
        // 这个是必要的设置
        automaticallyAdjustsScrollViewInsets = false
        
        // 设置tableView的headView
        tableView.tableHeaderView = setTableViewHeadView()
        tableView.tableFooterView = UIView()
        // 设置cell行高为contentView的高度
        tableView.rowHeight = contentView.bounds.size.height
        // 设置tableView的sectionHeadHeight为segmentViewHeight
        tableView.sectionHeaderHeight = CGFloat(segmentViewHeight)
        view.addSubview(tableView)
    }

3 tableView的DataSource设置

// 返回一行
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
 // 设置cell的内容为显示滚动视图的contentView
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .Default, reuseIdentifier: "cellId")
        
        cell.contentView.subviews.forEach { (subview) in
            subview.removeFromSuperview()
        }
        
        cell.contentView.addSubview(contentView)
        
        return cell
    }
   // 设置sectionHeadView, 实现滑块的浮动效果
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        
        return topView
    }
    

4 tableView的滚动代理方法 -- demo中没有具体使用

// MARK:- UIScrollViewDelegate 这里的代理可以监控tableView的滚动, 在滚动的时候就可以做一些事情, 比如使navigationBar渐变, 或者像简书一样改变头像的属性
extension Vc7Controller: UIScrollViewDelegate {
    func scrollViewDidScroll(scrollView: UIScrollView) {
        
    }
}

5 ContentViewDelegate的代理实现

// MARK:- ContentViewDelegate
extension Vc7Controller: ContentViewDelegate {
    var segmentView: ScrollSegmentView {
        return topView
    }
    
    // 监控开始滚动contentView的时候, 这里将滚动条滚动至顶部(简书没有这个效果,但其他的有---这里拒绝广告)
    func contentViewDidBeginMove() {
        tableView.setContentOffset(CGPoint(x: 0.0, y: headViewHeight), animated: true)
    }
    
}

源码地址, 如果您觉得有帮助,不妨给个star鼓励一下,欢迎关注, 欢迎交流

文章已更新, 移步这里