前言, 之前写了动手写一个快速集成网易新闻，腾讯视频，头条首页的ScrollPageView,显示滚动视图这篇文章, 有多个朋友问到怎么实现类似简书个人主页的滑块效果, 本着学习的目的,笔者去研究了一下,这里给出一种比较简单的实现方案(也可以使用UIScrollView来实现,不过略显麻烦,这里就省略了)
最终效果
简书个人主页效果.gif
注意!!! 实现这个效果github上的代码有更新,增加了一个代理方法来实现在切换页面的时候将滑块置顶(简书没有这个效果) , 请大家使用最新的代码
构思: 利用UITableView的自身的sectionView的浮动效果来实现.
设置tableView只有一个section并且只有一行row
设置这个section的View为segmentView,并且设置tableView.sectionHeaderHeight为segmentView的高度,来容纳滑块, 这样就可以实现在滚动tableView的时候实现滑块的浮动效果
添加显示滚动页面的contentView到这一个cell的contentView, 并且设置tableView.rowHeight为 显示滚动页面的contentView的高度
设置tableView的headView为自定义的
根据个人需要设置 segmentView, tableView, contentView的frame, 特别需要注意的是如果tableView是从storyBoard中连线得到的, 那么设置其他的frame就和demo中有差异,具体的大家自己去研究吧
利用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鼓励一下,欢迎关注, 欢迎交流
