1. 程式人生 > >iOS 仿淘寶,上拉進入詳情頁面

iOS 仿淘寶,上拉進入詳情頁面

//
//  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