今天要分享的一個效果是在一個頁面彈出視圖展示一個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掉。這里我也不是特別明白為什么會出現這個問題，也希望有人給我解答下。

總結

以上是生活随笔為你收集整理的html表格全屏显示,tableView滑动全屏显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。