前言
最近有不少朋友遇到了这样的需求:一个界面上有一个headerView
、一个toolbar
和一个tableview
,在tableview
向上滚动时,headerView
和toolbar
也向上移动,在headerView
完全消失时,toolbar
就固定在导航条下面,tableview
就固定在toolbar
下面。
对于这个需求,其实并不难实现。但是有很多朋友都不知道怎么做,找不到思路,而有的朋友有点思路,但是实现出来的效果很不理想,向上或者向下滚动一点点,整个headerView一下子就消失或者出现。
听一听我的思路吧:首先这里将headerView
,toolbar
,tableview
放在同一个view上,也就是controller的view上。初始状态下,将这三个view垂直方向摆放,正好放满,且一个接着一个放。
接下来,我们一起来学习吧!
学习ObjectiveC版
现在让我来讲讲我的思路。首先,向上滚动时,每次滚动都是很小的距离,但是每次获取到的contentOffset.y都不是移动的距离,而是当前tableview的偏移距离,因此我们需要计算出实际需要移动的距离。
现在我们需要一个变量来计算上一次移动后的偏移位置,在这一次新的偏移时,我们就可以计算出两者的差值,这个差值实际上就是视图需要移动的距离。现在我们假设上次偏移量为previousY
,而当前的回调到代理方法中所获取到的contentOffset.y
与previousY
的差值就是我们本次需要移动的距离。
向上滚动的情况:
向上滚动的条件是:contentOffset.y > 0
计算两次回调的滚动差:fabs(y - previousOffsetY)值:
CGFloat bottomY = self.headerView.bottomY - fabs(y - previousOffsetY);
当前headerView
的底部y值,减去实际需要移动的距离,就可以获取新的headerView.bottomY
值。
将下来就是更新别个两个视图的frame了,但是我们还需要注意边界,以防bottomY
值超出边界范围。
bottomY = bottomY >= 0 ? bottomY : 0;
self.headerView.bottomY = bottomY;
self.stickyView.y = self.headerView.bottomY;
self.tableView.frame = CGRectMake(0,self.stickyView.bottomY,scrollView.width,self.view.height - self.stickyView.bottomY);
然后我们还需要更新记录新的偏移量:
previousOffsetY = y;
这样就可以了吗?事实上还是有不足的地方,因为当我们一起不松手滑动,然后重复向上向下滑动,由于没有将previousOffsetY
,因此突然完全消失了或者突然完全出现了。那么,我们还需要在适当的时机还原值。
// 如果一直不松手滑动,重复向上向下滑动时,如果没有设置还原为0,则会出现马上到顶的情况。
if (previousOffsetY >= self.headerView.height) {
previousOffsetY = 0;
}
最后,我们向上滚动时的效果是可以实现了,但是这样会反复修改,因此我们可以稍微控制一下条件,当已经不再需要移动了,我们就不向下执行就可以了。
if (self.headerView.bottomY <= 0) {
return;
}
向下滚动的情况:
向下滚动的条件是: contentOffset.y < 0
对于向下滚动时,我们不需要记录上一次的偏移量,因为我们在向下滚动时,这个偏移值就是实际我们需要累加的值。也就是直接获取其值的绝对值,然后加上当前headerView.bottomY
的就可以计算出新的bottomY
值。
CGFloat bottomY = self.headerView.bottomY + fabs(y);
我们计算出的bottomY
,也要计算出其有效范围。
bottomY = bottomY <= self.headerView.height ? bottomY : self.headerView.height;
剩下的就是更新其他视图的frame
就可以了。
self.headerView.bottomY = bottomY;
self.stickyView.y = self.headerView.bottomY;
self.tableView.frame = CGRectMake(0,self.stickyView.bottomY,scrollView.width,self.view.height-self.stickyView.bottomY);
源代码
喜欢就Star:下载StickyUpDownDemo
学习Swift版
这里的逻辑跟ObjectiveC
版的是一样的,这里就不细说了。如果您没有学习过ObjectiveC
,就直接学习了Swfit
,若不太懂逻辑,可联系我。
这里只是放核心代码出来,应该是很容易懂的。
// MARK: - UIScrollViewDelegate
func scrollViewDidScroll(scrollView: UIScrollView) {
if scrollView === tableView {
if scrollView.contentOffset.x == 0 {
let y = scrollView.contentOffset.y
// 向上滚动
if y > 0 {
struct Diff {
static var previousY: CGFloat = 0.0
}
guard headerView.bottomY > 0.0 else {
return
}
var bottomY = headerView.bottomY - fabs(y - Diff.previousY)
bottomY = bottomY >= 0.0 ? bottomY : 0.0
headerView.bottomY = bottomY
stickyView.y = headerView.bottomY
tableView.frame = CGRectMake(0, stickyView.bottomY, tableView.width, self.view.height - stickyView.bottomY)
Diff.previousY = y
if Diff.previousY >= headerView.height {
Diff.previousY = 0
}
}
// 向下滚动
else if y < 0 {
if headerView.y >= 0 {
return
}
var bottomY = headerView.bottomY + fabs(y)
bottomY = bottomY <= headerView.height ? bottomY : headerView.height
headerView.bottomY = bottomY
stickyView.y = headerView.bottomY
tableView.frame = CGRectMake(0, stickyView.bottomY, tableView.width, self.view.height - stickyView.bottomY)
}
}
}
}
最后
本demo在开发中还是挺实用的,如果不想因为某个小功能而使用第三方库,那么可以学习自己去实现!