今天要分享的一個效果是在一個頁面彈出視圖展示一個tableview，然后手指滑動tableview時，視圖隨著tableview偏移量增加而慢慢增加，到達(dá)臨界時，全屏顯示，然后再次向下滑動時，當(dāng)偏移量到達(dá)臨界點(diǎn)，視圖逐漸縮小，最終恢復(fù)正常大小，頁面效果可以參考高德導(dǎo)航界面。

這里貼上效果圖

這是高德導(dǎo)航的效果

2DB81CA4986551A919D73A39C5303500.png

208F6135CA04A1942510F569FFECD843.png

我們實(shí)現(xiàn)的效果

51854156044B1B06EA213DFE9034E90F.png

8DA4ADD53A6CEC99E1394C516DCCBBA3.jpg

5009C1C6540087365188D3114C841E31.jpg

現(xiàn)在我們開始實(shí)現(xiàn)這個效果。

要實(shí)現(xiàn)這個效果我們最容易想到的就是給tableview的偏移量進(jìn)行監(jiān)聽。

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

然后實(shí)現(xiàn)監(jiān)聽的方法

- (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;

}

}

}

這個效果應(yīng)該是挺簡單的一個效果，實(shí)現(xiàn)起來也并不復(fù)雜。

這樣就基本實(shí)現(xiàn)了這效果。

tips：

這里再講一下，做這個效果遇到的坑。

1、

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

這個判斷的作用:是為了在tableview滑動距離不夠的時候，不使它滑動，如果不做這個判斷，會導(dǎo)致的問題是：數(shù)據(jù)量少，tableview可滑動的高度不夠，在執(zhí)行滑動方式是會導(dǎo)致劇烈的上下抖動，非常影響體驗(yàn)。做這個判斷就是為了消除這個影響，在它的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)

這個判斷是當(dāng)tableview滑動到達(dá)臨界點(diǎn)是全屏，不再滑動。本來代碼到這里就結(jié)束了，后來給產(chǎn)品測試的時候發(fā)現(xiàn)個問題，就是當(dāng)tableview數(shù)據(jù)量特別多的時候，快速滑動時有可能滑動不流暢甚至?xí)ㄗ〔欢那闆r。為了解決這個bug，我的做法是讓滑動超過某個值(這個值隨意只要大于臨界值就可以)，tableview全屏后就不再執(zhí)行監(jiān)聽偏移的方法了，給他return掉。這里我也不是特別明白為什么會出現(xiàn)這個問題，也希望有人給我解答下。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。