商品詳情頁是很多app都會涉及到的，天貓詳情頁向上滑動的時候會有一種視覺差效果是如何實現(xiàn)的呢？TableView和webView又是如何實現(xiàn)切換的？其實原理也較為簡單，下面我們來具體看看實現(xiàn)的思路和代碼

Qinz

先看看效果：

gif

1.首先我們需要創(chuàng)建三個視圖，一個是容器視圖bigView,一個是tableView,還有一個是webView,下面的bottomHeight表示的是最下面“加入購物車”和“立即購買”視圖的高度

-(void)layout:(CGFloat)bottomHeitht{

    self.bottomHeight = bottomHeitht;
    
    self.frame = CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT- bottomHeitht);
    self.backgroundColor = [UIColor whiteColor];
    
    self.bigView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, (kSCREEN_HEIGHT-bottomHeitht)*2)];
    self.bigView.backgroundColor = [UIColor whiteColor];
    
    self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT- bottomHeitht)];
    self.tableView.backgroundColor = [UIColor whiteColor];
    
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    
    self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, kSCREEN_HEIGHT-bottomHeitht, kSCREEN_WIDTH, kSCREEN_HEIGHT - bottomHeitht)];
    _webView.backgroundColor = [UIColor clearColor];
    
    self.webView.scrollView.delegate = self;
    
    [self addSubview:_bigView];
    [_bigView addSubview:_tableView];
    [_bigView addSubview:_webView];

}

2.下面我們來看一張圖解釋上面代碼的布局

1.png

3.視圖差就是下面一小段代碼實現(xiàn)的，注釋里面已經(jīng)寫明視覺差形成的原因了

#pragma mark -- UIScrollViewDelegate 用于控制頭部視圖滑動的視差效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (_isConverAnimation) {
        CGFloat offset = scrollView.contentOffset.y;
        if (scrollView == _tableView){
            //重新賦值，就不會有用力拖拽時的回彈
            _tempScrollView.contentOffset = CGPointMake(_tempScrollView.contentOffset.x, 0);
            if (offset >= 0 && offset <= kSCREEN_WIDTH) {
                //因為tempScrollView是放在tableView上的，tableView向上速度為1，實際上tempScrollView的速度也是1，此處往反方向走1/2的速度，相當于tableView還是正向在走1/2，這樣就形成了視覺差！
                _tempScrollView.contentOffset = CGPointMake(_tempScrollView.contentOffset.x, - offset / 2.0f);
            }
        }
    }else{}
}

4.上面代碼的isConverAnimation是是否需要視圖差動畫，這里的_tempScrollView是一個UIScrollView的對象,用于將TableView的頭部視圖放在上面，看下面的代碼：

-(void)setMsgView{
    
    //添加頭部和尾部視圖
    UIView*headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_WIDTH)];
    headerView.backgroundColor = [UIColor blueColor];
    _tempScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_WIDTH)];
    [headerView addSubview:_tempScrollView];
    TableHeaderView*tableHeaderView = [TableHeaderView tableHeaderView];
    tableHeaderView.frame = headerView.frame;
    [_tempScrollView addSubview:tableHeaderView];
    _tableView.tableHeaderView = headerView;
    OnPullMsgView*pullMsgView = [OnPullMsgView onPullMsgView];
    UIView*footView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, KmsgVIewHeight)];
    pullMsgView.frame = footView.bounds;
    [footView addSubview:pullMsgView];
    _tableView.tableFooterView = footView;
    //設(shè)置下拉提示視圖
    DownPullMsgView*downPullMsgView = [DownPullMsgView downPullMsgView];
    UIView*downMsgView = [[UIView alloc]initWithFrame:CGRectMake(0, -KmsgVIewHeight, kSCREEN_WIDTH, KmsgVIewHeight)];
    downPullMsgView.frame = downMsgView.bounds;
    [downMsgView addSubview:downPullMsgView];
    [_webView.scrollView addSubview:downMsgView];
}

5.最后再來看上拉和下拉效果的實現(xiàn)，就是在滾動的代理中監(jiān)聽偏移量改變bigView的fram來實現(xiàn)

#pragma mark -- 監(jiān)聽滾動實現(xiàn)商品詳情與圖文詳情界面的切換
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    
    WS(b_self);
    
    CGFloat offset = scrollView.contentOffset.y;
    if (scrollView == _tableView) {
        if (offset > _tableView.contentSize.height - kSCREEN_HEIGHT + self.bottomHeight + KendDragHeight) {
            [UIView animateWithDuration:0.4 animations:^{
                b_self.bigView.transform = CGAffineTransformTranslate(b_self.bigView.transform, 0, -kSCREEN_HEIGHT +  self.bottomHeight + KnavHeight);
            } completion:^(BOOL finished) {
                if (b_self.scrollScreenBlock) {
                    b_self.scrollScreenBlock(NO);
                }
                
            }];
        }
    }
    if (scrollView == _webView.scrollView) {
        if (offset < - KendDragHeight) {
            [UIView animateWithDuration:0.4 animations:^{
                [UIView animateWithDuration:0.4 animations:^{
                    b_self.bigView.transform = CGAffineTransformIdentity;
                    
                }];
            } completion:^(BOOL finished) {
                if (b_self.scrollScreenBlock) {
                    b_self.scrollScreenBlock(YES);
                }
            }];
        }
    }
}

6.關(guān)于從webView下拉到tableView視圖的偏移我想大家一看就應(yīng)該很清楚，就是你需要拖拽距離的偏移量。主要我們來解釋下為什么上拉加載商品詳情為什么是下面這個偏移量：

(offset > _tableView.contentSize.height - kSCREEN_HEIGHT + self.bottomHeight + KendDragHeight

7.下面畫一張圖大家就理解了:(offset > _tableView.contentSize.height - kSCREEN_HEIGHT + self.bottomHeight + KendDragHeight)其實是這樣的：(offset > _tableView.contentSize.height - （kSCREEN_HEIGHT - self.bottomHeight ）+ KendDragHeight），所以KendDragHeight就是需要拖拽的偏移量

2.png

8.這里面有一個block是用于監(jiān)聽是滾動到了TableView視圖還是WebView視圖，方便我們做一些其他的事情

//滾動監(jiān)聽Block:為YES是滾動到了商品詳情 NO滾動到圖文詳情
@property (nonatomic, copy) ScrollScreenBlock scrollScreenBlock;

9.最后再來看看控制器的實現(xiàn)

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *bottomView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    

    FECGoodsDetailLayout*detailView = [[FECGoodsDetailLayout alloc]init];

     [detailView setGoodsDetailLayout:self WebViewURL:@"https://www.baidu.com" IsConverAnimation:YES bottomHeighr:self.bottomView.frame.size.height];
    
    //滾動監(jiān)聽
    detailView.scrollScreenBlock = ^(BOOL isFirst){
        if (isFirst) {
             NSLog(@"滾動到了第一屏");
        }else{
            NSLog(@"第二屏");
        }
    };
}

10.這里面的頭部視圖，上拉加載和下拉加載都是可以直接用xib來進行自定義

3.png

最后附上demo下載地址：http://git.oschina.net/Qinz_323/DetailLayout

我是Qinz,希望我的文章對你有幫助。