第十二篇、OC_仿淘宝商品详情页的翻页
// // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 GFB Network Technology Co.,Ltd. All rights reserved. // #import "GFBProductViewController.h" #define kScreentW [UIScreen mainScreen].bounds.size.width #define kScreentH [UIScreen mainScreen].bounds.size.height #define _maxContentOffSet_Y 30 #define offsetY_maxContentOffSet_Y -30 @interface GFBProductViewController ()<UITableViewDelegate,UITableViewDataSource,UIWebViewDelegate> @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, strong) UIWebView *webView; @property (nonatomic, strong) UIView *contentView; @property (nonatomic, strong) UILabel *mesLabel; @property (nonatomic, assign) CGFloat startOffsetY; @end @implementation GFBProductViewController - (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]; // 开始监听_webView.scrollView的偏移量 [_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil]; } - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)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]; } } // 头部提示文本动画 - (void)headLabAnimation:(CGFloat)offsetY { _mesLabel.alpha = -offsetY/60; _mesLabel.center = CGPointMake(kScreentW/2, -offsetY/2.f); // 图标翻转,表示已超过临界值,松手就会返回上页 if(-offsetY>_maxContentOffSet_Y){ _mesLabel.textColor = [UIColor redColor]; _mesLabel.text = @"释放,返回详情"; }else{ _mesLabel.textColor = [UIColor redColor]; _mesLabel.text = @"上拉,返回详情"; } } - (UIView *)contentView { if (! _contentView) { _contentView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreentW, kScreentH)]; [self.view addSubview:_contentView]; } return _contentView; } - (UILabel *)headLab { if(!_mesLabel){ _mesLabel = [[UILabel alloc] init]; _mesLabel.text = @"上拉,返回详情"; _mesLabel.textAlignment = NSTextAlignmentCenter; _mesLabel.font = [UIFont systemFontOfSize:13]; } _mesLabel.frame = CGRectMake(0, 0, kScreentW, 40.f); _mesLabel.alpha = 0.f; _mesLabel.textColor = [UIColor redColor]; return _mesLabel; } - (UITableView *)tableView { if(!_tableView){ _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreentW, 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, kScreentW, 60)]; tabFootLab.text = @"继续拖动,查看图文详情"; tabFootLab.font = [UIFont systemFontOfSize: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, kScreentW, kScreentH)]; _webView.delegate = self; _webView.scrollView.delegate = self; [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]]; } return _webView; } - (void)viewDidLoad { [super viewDidLoad]; [self setUpUI]; } #pragma mark---Private Methods 私有方法 - (void) setUpUI { [self loadContentView]; } #pragma mark-UITableViewDatasource Methods - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 30; } -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *ID = @"ID"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; if (! cell) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID]; } cell.textLabel.text = @"商品测试"; return cell; } #pragma mark--UITableViewDelegate Methods - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // 测试跳转 UIViewController *vc = [UIViewController new]; vc.view.backgroundColor = [UIColor whiteColor]; [self.navigationController pushViewController:vc animated:YES]; } // 进入详情的动画 - (void)goToDetailAnimation { [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{ _webView.frame = CGRectMake(0, 0, kScreentW, kScreentH); _tableView.frame = CGRectMake(0, -self.contentView.bounds.size.height, kScreentW, self.contentView.bounds.size.height); } completion:^(BOOL finished) { }]; } // 返回第一个界面的动画 - (void)backToFirstPageAnimation { [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{ _tableView.frame = CGRectMake(0, 0, kScreentW, self.contentView.bounds.size.height); _webView.frame = CGRectMake(0, _tableView.contentSize.height, kScreentW, kScreentH); } completion:^(BOOL finished) { // 滑动回顶部 [_webView.scrollView setContentOffset:CGPointZero]; }]; } #pragma mark ---- scrollView delegate -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { self.startOffsetY = scrollView.contentOffset.y; } -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { CGFloat offsetY = scrollView.contentOffset.y; if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滚动 { // 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度 CGFloat valueNum = _tableView.contentSize.height -kScreentH; if ((offsetY - valueNum) > _maxContentOffSet_Y) { [self goToDetailAnimation]; // 进入图文详情的动画 } } else // webView页面上的滚动 { NSLog(@"-----webView-------"); if (_startOffsetY < offsetY) { // 如果webView向上滑动则返回 return; } if(offsetY_maxContentOffSet_Y) { [self backToFirstPageAnimation]; // 返回基本详情界面的动画 } } } - (void)dealloc { [self.webView.scrollView removeObserver:self forKeyPath:@"contentOffset" context:nil ]; } @end