【瞎搞iOS开发02】监听ScrollView/TableVie
主要介绍###
- 监测tableView垂直滚动的舒畅姿势
- 监测scrollView/collectionView横向滚动的正确姿势
1.监测tableView垂直滚动的舒畅姿势####
通常我们用KVO或者在scrollViewDidScroll代理方法中监听ScrollView/TableView的contentOffset，比如监听TableView的contentOffset来设置导航栏的透明度或者拉伸顶部的图片。
JKNavigationController
常见的姿势是在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;
}
是骡子是马，拉出来溜溜，再看看效果图(图已毁)。
第一个页面（首页），上划变透明
- (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）用另外的方法实现过。
来自一生X命
简单说下我的思路
- 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;
}
}
JKNavigationController
2.监测scrollView/collectionView横向滚动的正确姿势####
先看效果图，下面的scrollView翻页后才移动上面的导航条，你会怎么实现？
iamge
首先想到的肯定是结束减速的代理方法：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]
}
}
文章用到的2个Demo，相关的类都已经封装好，可以直接用。
