ios监听ScrollView/TableView滚动的正确姿势
主要介绍
- 监测tableView垂直滚动的舒畅姿势
- 监测scrollView/collectionView横向滚动的正确姿势
1.监测tableView垂直滚动的舒畅姿势
通常我们用KVO或者在scrollViewDidScroll代理方法中监听ScrollView/TableView的contentOffset,比如监听TableView的contentOffset来设置导航栏的透明度或者拉伸顶部的图片。
![](https://github.com/XiFengLang/JPTransparentNavgationBar/raw/master/NavigationBarGifTwo.gif)
![](https://github.com/XiFengLang/JPTransparentNavgationBar/raw/master/NavigationBarGif.gif)
常见的姿势是在scrollViewDidScroll的代理方法中监听scrollView.contentOffset.y,会发现有导航栏时scrollView.contentOffset.y初始值可能会等于-64,如果再手动设置tableView.contentInset这个值又会改变,这个时候就需要计算出初始偏移量,然后再算偏移的差值,要是过几天再改下需求......重新计算
那有没有更舒畅的姿势?
有
首先定义2个成员属性,一个是监测范围的临界值,另一个用来记录scrollView.contentInset.top(重点)
// 监测范围的临界点,>0代表向上滑动多少距离,<0则是向下滑动多少距离
@property (nonatomic, assign)CGFloat threshold;
// 记录scrollView.contentInset.top
@property (nonatomic, assign)CGFloat marginTop;
// 这里设值-80,即向下滑动80,-80到0就是咱们重点监测的范围
self.threshold = -80;
然后在KVO回调或者scrollViewDidScroll代理方法中加上下面的代码。
需要理解的就是contentInset,四个值代表tableView的contentView上下左右距离边界的值,界面有导航栏时,系统会自动将tableView的contentView到顶部的距离设为64,即contentInset.top=64,如果导航栏透明就可以看到有空白区域。没有导航栏或者我们调用self.automaticallyAdjustsScrollViewInsets = NO时,tableView的contentInset.top就会变为0。通过下面的算法,我们就可以不用去刻意计算初始的偏移量,只要设置好临界值就行,newoffsetY 就是我们实际要监测的偏移。PS:手动设置tableView.contenInset需要在viewDidAppear中进行。
// 实时监测scrollView.contentInset.top, 系统优化以及手动设置contentInset都会影响contentInset.top。
if (self.marginTop != self.scrollView.contentInset.top) {
self.marginTop = self.scrollView.contentInset.top;
}
//CGFloat offsetY = [change[@"new"] CGPointValue].y;
CGFloat offsetY = scrollView.contentOffset.y;
// newoffsetY 便是我们想监测的偏移offset.y,初始值为0
// 向下滑动时<0,向上滑动时>0;
CGFloat newoffsetY = offsetY + self.marginTop;
if (newoffsetY >= self.threshold && newoffsetY <= 0) {
CGFloat progress = newoffsetY/self.threshold;
}
是骡子是马,拉出来溜溜,再看看效果图。
![](https://github.com/XiFengLang/JPTransparentNavgationBar/raw/master/NavigationBarGif.gif)
第一个页面(首页),上划变透明
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (self.marginTop != scrollView.contentInset.top) {
self.marginTop = scrollView.contentInset.top;
}
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat newoffsetY = offsetY + self.marginTop;
// 临界值150,向上拖动时变透明
if (newoffsetY >= 0 && newoffsetY <= 150) {
[self.navigationController.navigationBar jp_setNavigationBarBackgroundAlpha:1- newoffsetY/150];
}else if (newoffsetY > 150){
[self.navigationController.navigationBar jp_setNavigationBarBackgroundAlpha:0];
}else{
[self.navigationController.navigationBar jp_setNavigationBarBackgroundAlpha:1];
}
}
第二个界面仿知乎日报的效果,一生X命在他的文章仿写知乎日报 - 主页面补遗(Part 2)用另外的方法实现过。
![](http://upload-images.jianshu.io/upload_images/61177-4b26e023717bfaa5.gif?imageMogr2/auto-orient/strip)
简单说下我的思路
- tableView的y坐标为20,然后组头高度44,加起来刚好就是导航栏的高度。因为组头悬停在tableView的最上方,所以y坐标为20。
- 在navigationBar上面添加一个高度为20的view,放在状态栏下面,跟组头一样的颜色。navigationBar透明后view看上去会和组头连接起来。
- 在viewDidAppear方法里面计算第一个组头的frame,取y坐标。(最好在viewDidAppear方法里面,不然加了tableHeaderView可能会产生偏差)
- 然后在scrollViewDidScroll方法实现导航栏的透明以及切换titleView
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
HeaderFrame = [self.tableView rectForHeaderInSection:1];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (self.marginTop != scrollView.contentInset.top) {
self.marginTop = scrollView.contentInset.top;
}
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat newoffsetY = offsetY + self.marginTop;
if (newoffsetY >= 0 && newoffsetY <= 150) {
[self.navigationController.navigationBar jp_setStatusBarBackgroundViewAlpha:newoffsetY/150];
}else if (newoffsetY > 150){
[self.navigationController.navigationBar jp_setStatusBarBackgroundViewAlpha:1];
}
if (newoffsetY >= HeaderFrame.origin.y) {
self.refrshView.hidden = YES;
[self.navigationController.navigationBar setBackgroundColor:[[UIColor purpleColor] colorWithAlphaComponent:0]];
}else if (newoffsetY < HeaderFrame.origin.y){
[self.refrshView resetNavigationItemTitle:@"首页"];
self.refrshView.hidden = NO;
}
}
2.监测scrollView/collectionView横向滚动的正确姿势
先看效果图,下面的scrollView翻页后才移动上面的导航条,你会怎么实现?
![](https://raw.githubusercontent.com/XiFengLang/JPSlideBar/master/JPSlideBar/ExamplerImages/JPSlideBarGif02.gif)
首先想到的肯定是结束减速的代理方法:scrollViewDidEndDecelerating,但是滑动过快的时候是不会调用scrollViewDidEndDecelerating代理方法的,如果做过用3个界面+scrollView实现循环滚动展示图片,那么基本上都会碰到这么问题。如何准确的监听翻页?我的解决的思路如下
- 把原来减速后需要处理的代码整合到一个方法中,并且需传入scrollView的contentOffset,来确定当前的page/index。后面简称【方法A】
- 整个过程中主要留意三个代理方法,拖动后 开始减速-->结束减速-->开始拖动
- 正常滑动速度的时候,先调用scrollViewWillBeginDecelerating再调用scrollViewDidEndDecelerating,然后调用方法A
- 快速滑动的时候,先调用scrollViewWillBeginDecelerating,再调用scrollViewWillBeginDragging,不会调用scrollViewWillBeginDragging。咱们可以加个flag,来判断是否减速。没减速再调用方法A
// 开始减速的时候开始self.didEndDecelerating = NO;结束减速就会置为YES,如果滑动很快就还是NO。
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
self.didEndDecelerating = NO;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
self.didEndDecelerating = YES;
// 调用方法A,传scrollView.contentOffset
}
// 再次拖拽的时候,判断有没有因为滑动太快而没有调用结束减速的方法。
// 如果没有,四舍五入手动确定位置。这样就可以解决滑动过快的问题
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
if (!self.didEndDecelerating) {
// 先计算当期的page/index
CGFloat index = scrollView.contentOffset.x/self.screenWidth;
//再四舍五入推算本该减速时的scrollView的contentOffset。即:roundf(index)*self.screenWidth]
}
}
原文链接:http://www.jianshu.com/p/2172cca95cdc
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。