今天要分享的一个效果是在一个页面弹出视图展示一个tableview，然后手指滑动tableview时，视图随着tableview偏移量增加而慢慢增加，到达临界时，全屏显示，然后再次向下滑动时，当偏移量到达临界点，视图逐渐缩小，最终恢复正常大小，页面效果可以参考高德导航界面。

这里贴上效果图

这是高德导航的效果

2DB81CA4986551A919D73A39C5303500.png

208F6135CA04A1942510F569FFECD843.png

我们实现的效果

51854156044B1B06EA213DFE9034E90F.png

8DA4ADD53A6CEC99E1394C516DCCBBA3.jpg

5009C1C6540087365188D3114C841E31.jpg

现在我们开始实现这个效果。

要实现这个效果我们最容易想到的就是给tableview的偏移量进行监听。

[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

然后实现监听的方法

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context

{

if ([keyPath isEqualToString:@"contentOffset"])

{

CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];

NSLog(@"offset:%f",offset.y);

if (offset.y < KDeviceHeight/3-20) {

if (offset.y+_tableView.height <= _tableView.contentSize.height) {

[self.upButton setImage:[UIImage imageNamed:@"house_icon_up"] forState:UIControlStateNormal];

CGRect rect = self.frame;

rect.origin.y = KDeviceHeight/3-offset.y;

rect.size.height = KDeviceHeight/3*2+offset.y;

self.frame = rect;

CGRect rec1 = self.tableView.frame;

rec1.size.height = KDeviceHeight/3*2+offset.y-44;

self.tableView.frame = rec1;

}

}else if(offset.y >= KDeviceHeight/3-20 && offset.y <= KDeviceHeight){

self.frame = CGRectMake(0,20, KDeviceWidth, KDeviceHeight-20);

self.tableView.frame = CGRectMake(0, 44, KDeviceWidth, self.height-44);

[self.upButton setImage:[UIImage imageNamed:@"house_icon_down"] forState:UIControlStateNormal];

}

else{

return;

}

}

}

这个效果应该是挺简单的一个效果，实现起来也并不复杂。

这样就基本实现了这效果。

tips：

这里再讲一下，做这个效果遇到的坑。

1、

if (offset.y+_tableView.height <= _tableView.contentSize.height)

这个判断的作用:是为了在tableview滑动距离不够的时候，不使它滑动，如果不做这个判断，会导致的问题是：数据量少，tableview可滑动的高度不够，在执行滑动方式是会导致剧烈的上下抖动，非常影响体验。做这个判断就是为了消除这个影响，在它的contentSize足够的时候才使他滑动。

2、

else if(offset.y >= KDeviceHeight/3-20 && offset.y <= KDeviceHeight){

self.frame = CGRectMake(0,20, KDeviceWidth, KDeviceHeight-20);

self.tableView.frame = CGRectMake(0, 44, KDeviceWidth, self.height-44);

[self.upButton setImage:[UIImage imageNamed:@"house_icon_down"] forState:UIControlStateNormal];

}

else{

return;

}

这个部分的作用是：

else if(offset.y >= KDeviceHeight/3-20 && offset.y <= KDeviceHeight)

这个判断是当tableview滑动到达临界点是全屏，不再滑动。本来代码到这里就结束了，后来给产品测试的时候发现个问题，就是当tableview数据量特别多的时候，快速滑动时有可能滑动不流畅甚至会卡住不懂的情况。为了解决这个bug，我的做法是让滑动超过某个值(这个值随意只要大于临界值就可以)，tableview全屏后就不再执行监听偏移的方法了，给他return掉。这里我也不是特别明白为什么会出现这个问题，也希望有人给我解答下。