iOS开发之带你实现天猫京东详情页的视觉差效果

商品详情页是很多app都会涉及到的，天猫详情页向上滑动的时候会有一种视觉差效果是如何实现的呢？TableView和webView又是如何实现切换的？其实原理也较为简单，下面我们来具体看看实现的思路和代码

Qinz

先看看效果：

gif

1.首先我们需要创建三个视图，一个是容器视图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.视图差就是下面一小段代码实现的，注释里面已经写明视觉差形成的原因了

#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;
    //设置下拉提示视图
    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.最后再来看上拉和下拉效果的实现，就是在滚动的代理中监听偏移量改变bigView的fram来实现

#pragma mark -- 监听滚动实现商品详情与图文详情界面的切换
-(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.关于从webView下拉到tableView视图的偏移我想大家一看就应该很清楚，就是你需要拖拽距离的偏移量。主要我们来解释下为什么上拉加载商品详情为什么是下面这个偏移量：

(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是用于监听是滚动到了TableView视图还是WebView视图，方便我们做一些其他的事情

//滚动监听Block:为YES是滚动到了商品详情 NO滚动到图文详情
@property (nonatomic, copy) ScrollScreenBlock scrollScreenBlock;

9.最后再来看看控制器的实现

@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];
    
    //滚动监听
    detailView.scrollScreenBlock = ^(BOOL isFirst){
        if (isFirst) {
             NSLog(@"滚动到了第一屏");
        }else{
            NSLog(@"第二屏");
        }
    };
}

10.这里面的头部视图，上拉加载和下拉加载都是可以直接用xib来进行自定义

3.png

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

我是Qinz,希望我的文章对你有帮助。