iOS 仿淘寶,上拉進入詳情頁面
阿新 • • 發佈:2019-02-17
// // ViewController.m // 仿淘寶,上拉進入詳情 // // Created by Amydom on 16/11/22. // Copyright © 2016年 Amydom. All rights reserved. // #import "ViewController.h" @interface ViewController ()<UITableViewDelegate , UITableViewDataSource , UIScrollViewDelegate , UIWebViewDelegate> @property (nonatomic , strong)UITableView *tableView; @property (nonatomic , strong)UIWebView *webView; @property (nonnull , strong)UILabel *headLab; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; [self createView]; } - (void)createView{ _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain]; _tableView.delegate = self; _tableView.dataSource = self; _tableView.rowHeight = 60.f; [self.view addSubview:_tableView]; [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"]; UILabel *footLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 60)]; footLabel.text = @"繼續拖動,檢視圖文詳情"; footLabel.font = [UIFont systemFontOfSize:13]; footLabel.textAlignment = NSTextAlignmentCenter; _tableView.tableFooterView = footLabel; //注意:懶載入時,只有用 self 才能調其 getter 方法 [self.view addSubview:self.webView]; _headLab = [[UILabel alloc] init]; _headLab.text = @"上拉,返回詳情"; _headLab.textAlignment = NSTextAlignmentCenter; _headLab.font = [UIFont systemFontOfSize:13]; _headLab.frame = CGRectMake(0, 0, self.view.frame.size.width, 40.f); _headLab.alpha = 0.f; _headLab.textColor = [UIColor blackColor]; [_webView addSubview:_headLab]; [ _webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil]; } //懶載入 webView 增加流暢度 - (UIWebView *)webView{ //注意,這裡不用 self 防止迴圈引用 if (!_webView) { _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height)]; _webView.delegate = self; _webView.delegate = self; _webView.scrollView.delegate = self; [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]]; } return _webView; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return 15; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *indetifier = @"cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:indetifier]; cell.textLabel.text = @"Amydom"; return cell; } //監測 scroll 的偏移量 -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { CGFloat offsetY = scrollView.contentOffset.y; if([scrollView isKindOfClass:[UITableView class]]) // tableView介面上的滾動 { // 能觸發翻頁的理想值:tableView整體的高度減去螢幕本省的高度 CGFloat valueNum = _tableView.contentSize.height - self.view.frame.size.height; if ((offsetY - valueNum) > 40) { [self goToDetailAnimation]; // 進入圖文詳情的動畫 } } else // webView頁面上的滾動 { if(offsetY < 0 && -offsetY > 40) { [self backToFirstPageAnimation]; // 返回基本詳情介面的動畫 } } } // 進入詳情的動畫 - (void)goToDetailAnimation { [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{ _webView.frame = CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height); _tableView.frame = CGRectMake(0, -self.view.frame.size.height , self.view.frame.size.width, self.view.frame.size.height); } completion:^(BOOL finished) { }]; } // 返回第一個介面的動畫 - (void)backToFirstPageAnimation { [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{ _tableView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.bounds.size.height); _webView.frame = CGRectMake(0, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height); } completion:^(BOOL finished) { }]; } // KVO觀察 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{ if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"]) { [self headLabAnimation:[change[@"new"] CGPointValue].y]; }else { [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; } } // 頭部提示文字動畫 - (void)headLabAnimation:(CGFloat)offsetY { _headLab.alpha = -offsetY/60; _headLab.center = CGPointMake(self.view.frame.size.width/2, -offsetY/2.f); // 圖示翻轉,表示已超過臨界值,鬆手就會返回上頁 if(-offsetY > 40){ _headLab.textColor = [UIColor redColor]; _headLab.text = @"釋放,返回詳情"; }else{ _headLab.textColor = [UIColor blackColor]; _headLab.text = @"上拉,返回詳情"; } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end