今天要分享的一个效果是在一个页面弹出视图展示一个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掉。这里我也不是特别明白为什么会出现这个问题，也希望有人给我解答下。
网友评论