实现淘宝商品页面的滑块浮动切换页面的效果修改版

前言, 之前写了一篇文章, 实现类似淘宝商品界面的滑块效果, 不过很(##抱歉##)的是, 笔者当时没有测试TableView等的使用,大家反映TableView不能正常使用,(研究一段时间发现, 之前的做法不适结合合TableView使用) 这里就整理了下重新实现了, 比之前的确实要麻烦一点, 如果在你的项目中不需要结合TableView就可以简单的按照之前的方法实现.

最终效果

注意!!! 实现这个效果github上的代码有更新, 大家使用最新的代码

更新说明: 使每个页面在顶端滚动的偏移量不相互影响

构思: 利用监控和设置UIScrollView的偏移量来实现

.

1. 层级结构, 第一层为控制器的view, 第二层为contentView, 第三层为 headView和segmentView

2. 第二层的contentView,设置contentView的大小和控制器的view的大小一样, 来显示子控制器的view的内容, 需要设置他的子控制器view的tableView(collectionVie)的初始偏移量为segmentView和headView的高度之和,同时将segmentView和headView添加到view上面, 以实现tableView在滚动的时候segmentView和headView可以同步滚动

3. subview的添加顺序, 先添加contentView, 然后再添加segmentView和headView(因为contentView和view大小一样, 若是在后面添加就将segmentView和headView遮住了)

4. 同步滚动原理: 监控子控制器的scrollView的滚动偏移量(contentOffset.y), 根据偏移量的改变量来同步的调整segmentView和headView的frame, 这里的监控之前我是使用Closure来实现,但是后面需要更新tableView的偏移量有需要一个Closure, 所以就改为了delegate来实现.

5. 使segmentView浮动: 通过监控子控制器的scrollView的滚动偏移量(contentOffset.y), 根据偏移量的改变量来同步的调整segmentView和headView的frame, 当segmentView同步”滚动”到顶部的时候, 通过判断scrollView的滚动偏移量的范围来固定segmentView和headView的frame, 即达到浮动效果

6. 在segmentView和headView的frame随着scrollView滚动到下方原始位置的时候, 通过判断scrollView的滚动偏移量的范围来固定segmentView和headView的frame,

实现部分 , 代码量不大

1 属性部分, 这些懒加载方法里面设置了他们的相关属性, 其中的具体设置和