仿淘寶上拉進入詳情頁交互的實現

前言

項目某個新需求的交互要求仿照淘寶上拉從下網上彈出寶貝詳情。今天打開淘寶APP仔細看了看，然后自己寫了寫，現在感覺效果差不多了，記錄一下。

分析

可以看到，該頁面是分為兩部分的，一部分是一開始就能看到的商品信息，然后我們上拉屏幕，屏幕不斷往上滾動，滾動到第一部分結束時可以看到底部有“繼續拖動，查看圖文詳情”一行文本出現。繼續上拉到一個臨界點便觸發了翻頁，此時第二部分以動畫的形式從底部涌出占滿整個屏幕。而且效果是該頁面整體上移了，即第一部分和第二部分都是上移的。

此時，第二部分占滿著整個屏幕，若我們下拉屏幕，則在屏幕頂部淡出“下拉，返回寶貝詳情”的文本提示，并且達到一個臨界值后文本變為“釋放，返回寶貝詳情”，此時松開手指，頁面又滾動到第一部分的尾部。

實現

在自己寫的demo中，第一部分是個tableView，展示商品基本信息。第二部分是個webView，展示商品圖文詳情。

第一步首先加載需要的視圖。主要是第一部分的tableView和第二部分的webView，還有第二部分頂部顯示上拉返回文本提示的headLab。為了節省資源，其實可以在上拉觸發時再加載第二部分視圖的，但是這里僅作示例，所以并沒有懶加載。

- (void)loadContentView
{
    // first view
    [self.contentViewaddSubview:self.tableView];
 
    // second view
    [self.contentViewaddSubview:self.webView];
 
    UILabel *hv = self.headLab;
    // headLab
    [self.webViewaddSubview:hv];
    [self.headLabbringSubviewToFront:self.contentView];
}
 
 
- (UILabel *)headLab
{
    if(!_headLab){
        _headLab = [[UILabelalloc] init];
        _headLab.text = @"上拉，返回詳情";
        _headLab.textAlignment = NSTextAlignmentCenter;
        _headLab.font = FONT(13);
 
    }
 
    _headLab.frame = CGRectMake(0, 0, PDWidth_mainScreen, 40.f);
    _headLab.alpha = 0.f;
    _headLab.textColor = PDColor_button_Gray;
 
 
    return _headLab;
}
 
 
- (UITableView *)tableView
{
    if(!_tableView){
        _tableView = [[UITableViewalloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, 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 = [[UILabelalloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, 60)];
        tabFootLab.text = @"繼續拖動，查看圖文詳情";
        tabFootLab.font = FONT(13);
        tabFootLab.textAlignment = NSTextAlignmentCenter;
//        tabFootLab.backgroundColor = PDColor_Orange;
        _tableView.tableFooterView = tabFootLab;
    }
 
    return _tableView;
}
 
 
- (UIWebView *)webView
{
    if(!_webView){
        _webView = [[UIWebViewalloc] initWithFrame:CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen)];
        _webView.delegate = self;
        _webView.scrollView.delegate = self;
        [_webViewloadRequest:[NSURLRequestrequestWithURL:[NSURLURLWithString:@"https://www.baidu.com"]]];
    }
 
    return _webView;
}

然后實現滾動視圖 UIScrollView 的代理方法，在里面完成滾動到達臨界值后，觸發翻頁動畫的處理。包括了上拉翻到第二頁和下拉翻回第一頁兩部分，即要在該方法里通過判斷scrollView的類型做相應的處理。

#pragma mark ---- scrollView delegate
 
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollViewwillDecelerate:(BOOL)decelerate
{
    CGFloatoffsetY = scrollView.contentOffset.y;
 
    if([scrollViewisKindOfClass:[UITableViewclass]]) // tableView界面上的滾動
    {
        // 能觸發翻頁的理想值:tableView整體的高度減去屏幕本省的高度
        CGFloatvalueNum = _tableView.contentSize.height -PDHeight_mainScreen;
        if ((offsetY - valueNum) > _maxContentOffSet_Y)
        {
            [self goToDetailAnimation]; // 進入圖文詳情的動畫
        }
    }
 
    else // webView頁面上的滾動
    {
        NSLog(@"-----webView-------");
        if(offsetY_maxContentOffSet_Y)
        {
            [self backToFirstPageAnimation]; // 返回基本詳情界面的動畫
        }
    }
}

再看看兩個翻頁的動畫，其實很簡單，就是移動它們的位置。

來自：http://ios.jobbole.com/90666/