实现淘宝商品页面，知乎小圆桌的滑块浮动切换页面的效果

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

最终效果

注意!!! 实现这个效果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,显示滚动视图这里面介绍的使用相同, 这里就不在赘述了

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

---

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

---

---

文章已更新, 移步这里