iOS實(shí)現(xiàn)淘寶上拉進(jìn)入詳情頁(yè)交互效果

2020-07-26 03:05:00

字體：大中小

供稿：網(wǎng)友

前言

這篇文章主要給大家介紹的是利用iOS實(shí)現(xiàn)淘寶中上拉進(jìn)入詳情頁(yè)交互的效果，下面話不多說(shuō)，來(lái)看看詳細(xì)的實(shí)現(xiàn)過(guò)程。

實(shí)現(xiàn)分析

可以看到，該頁(yè)面是分為兩部分的，一部分是一開始就能看到的商品信息，然后我們上拉屏幕，屏幕不斷往上滾動(dòng)，滾動(dòng)到第一部分結(jié)束時(shí)可以看到底部有“繼續(xù)拖動(dòng)，查看圖文詳情”一行文本出現(xiàn)。繼續(xù)上拉到一個(gè)臨界點(diǎn)便觸發(fā)了翻頁(yè)，此時(shí)第二部分以動(dòng)畫的形式從底部涌出占滿整個(gè)屏幕。而且效果是該頁(yè)面整體上移了，即第一部分和第二部分都是上移的。

此時(shí)，第二部分占滿著整個(gè)屏幕，若我們下拉屏幕，則在屏幕頂部淡出“下拉，返回寶貝詳情”的文本提示，并且達(dá)到一個(gè)臨界值后文本變?yōu)椤搬尫牛祷貙氊愒斍椤保藭r(shí)松開手指，頁(yè)面又滾動(dòng)到第一部分的尾部。

實(shí)現(xiàn)方法

在自己寫的demo中，第一部分是個(gè)tableView，展示商品基本信息。第二部分是個(gè)webView，展示商品圖文詳情。

第一步首先加載需要的視圖。主要是第一部分的tableView和第二部分的webView，還有第二部分頂部顯示上拉返回文本提示的headLab。為了節(jié)省資源，其實(shí)可以在上拉觸發(fā)時(shí)再加載第二部分視圖的，但是這里僅作示例，所以并沒有懶加載。

- (void)loadContentView{  // first view  [self.contentView addSubview:self.tableView];  // second view  [self.contentView addSubview:self.webView];  UILabel *hv = self.headLab;  // headLab  [self.webView addSubview:hv];  [self.headLab bringSubviewToFront:self.contentView];}- (UILabel *)headLab{  if(!_headLab){    _headLab = [[UILabel alloc] init];    _headLab.text = @"上拉，返回詳情";    _headLab.textAlignment = NSTextAlignmentCenter;    _headLab.font = FONT(13);  }  _headLab.frame = CGRectMake(0, 0, PDWidth_mainScreen, 40.f);  _headLab.alpha = 0.f;  _headLab.textColor = PDColor_button_Gray;  return _headLab;}- (UITableView *)tableView{  if(!_tableView){    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, self.contentView.bounds.size.height) style:UITableViewStylePlain];    //  _tableView.contentSize = CGSizeMake(PDWidth_mainScreen, 800);    _tableView.dataSource = self;    _tableView.delegate = self;    _tableView.rowHeight = 40.f;    UILabel *tabFootLab = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, 60)];    tabFootLab.text = @"繼續(xù)拖動(dòng)，查看圖文詳情";    tabFootLab.font = FONT(13);    tabFootLab.textAlignment = NSTextAlignmentCenter;//    tabFootLab.backgroundColor = PDColor_Orange;    _tableView.tableFooterView = tabFootLab;  }  return _tableView;}- (UIWebView *)webView{  if(!_webView){    _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen)];    _webView.delegate = self;    _webView.scrollView.delegate = self;    [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];  }  return _webView;}

然后實(shí)現(xiàn)滾動(dòng)視圖UIScrollView的代理方法，在里面完成滾動(dòng)到達(dá)臨界值后，觸發(fā)翻頁(yè)動(dòng)畫的處理。包括了上拉翻到第二頁(yè)和下拉翻回第一頁(yè)兩部分，即要在該方法里通過(guò)判斷scrollView的類型做相應(yīng)的處理。

#pragma mark ---- scrollView delegate-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{  CGFloat offsetY = scrollView.contentOffset.y;  if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滾動(dòng)  {    // 能觸發(fā)翻頁(yè)的理想值:tableView整體的高度減去屏幕本省的高度    CGFloat valueNum = _tableView.contentSize.height -PDHeight_mainScreen;    if ((offsetY - valueNum) > _maxContentOffSet_Y)    {      [self goToDetailAnimation]; // 進(jìn)入圖文詳情的動(dòng)畫    }  }  else // webView頁(yè)面上的滾動(dòng)  {    NSLog(@"-----webView-------");    if(offsetY<0 && -offsetY>_maxContentOffSet_Y)    {      [self backToFirstPageAnimation]; // 返回基本詳情界面的動(dòng)畫    }  }}

再看看兩個(gè)翻頁(yè)的動(dòng)畫，其實(shí)很簡(jiǎn)單，就是移動(dòng)它們的位置。

// 進(jìn)入詳情的動(dòng)畫- (void)goToDetailAnimation{  [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{    _webView.frame = CGRectMake(0, 0, PDWidth_mainScreen, PDHeight_mainScreen);    _tableView.frame = CGRectMake(0, -self.contentView.bounds.size.height, PDWidth_mainScreen, self.contentView.bounds.size.height);  } completion:^(BOOL finished) {  }];}// 返回第一個(gè)界面的動(dòng)畫- (void)backToFirstPageAnimation{  [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{    _tableView.frame = CGRectMake(0, 0, PDWidth_mainScreen, self.contentView.bounds.size.height);    _webView.frame = CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen);  } completion:^(BOOL finished) {  }];}

然后還有個(gè)在第二頁(yè)下拉時(shí)屏幕頂部的文本提示的動(dòng)畫呢。這個(gè)我我們通過(guò)KVO來(lái)監(jiān)聽webView的scrollView的偏移量，只要其偏移量發(fā)生變化，便會(huì)實(shí)時(shí)執(zhí)行KVO的代理方法，然后我們?cè)诜椒▋?nèi)根據(jù)其偏移量的變動(dòng)完成動(dòng)畫即可（隨著偏移量變大字體變得非透明，達(dá)到某個(gè)臨界點(diǎn)后，字體變?yōu)榧t色，文本內(nèi)容也變?yōu)椤搬尫牛祷卦斍椤保?/p>

開始監(jiān)聽webView滾動(dòng)的偏移量

  // 開始監(jiān)聽_webView.scrollView的偏移量  [_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];

在KVO的代理方法里，根據(jù)偏移量完成提示文本的動(dòng)畫

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{  if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"])  {    NSLog(@"----old:%@----new:%@",change[@"old"],change[@"new"]);    [self headLabAnimation:[change[@"new"] CGPointValue].y];  }else  {    [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];  }}

提示文本的動(dòng)畫的實(shí)現(xiàn)代碼：

// 頭部提示文本動(dòng)畫- (void)headLabAnimation:(CGFloat)offsetY{  _headLab.alpha = -offsetY/60;  _headLab.center = CGPointMake(PDWidth_mainScreen/2, -offsetY/2.f);  // 圖標(biāo)翻轉(zhuǎn)，表示已超過(guò)臨界值，松手就會(huì)返回上頁(yè)  if(-offsetY>_maxContentOffSet_Y){    _headLab.textColor = [UIColor redColor];    _headLab.text = @"釋放，返回詳情";  }else{    _headLab.textColor = PDColor_button_Gray;    _headLab.text = @"上拉，返回詳情";  }}

實(shí)現(xiàn)的最終效果：