前言
項(xiàng)目某個新需求的交互要求仿照淘寶上拉從下網(wǎng)上彈出寶貝詳情。今天打開淘寶APP仔細(xì)看了看截粗，然后自己寫了寫信姓，現(xiàn)在感覺效果差不多了，記錄一下绸罗。
分析
可以看到意推，該頁面是分為兩部分的，一部分是一開始就能看到的商品信息珊蟀，然后我們上拉屏幕菊值，屏幕不斷往上滾動，滾動到第一部分結(jié)束時可以看到底部有“繼續(xù)拖動育灸，查看圖文詳情”一行文本出現(xiàn)腻窒。繼續(xù)上拉到一個臨界點(diǎn)便觸發(fā)了翻頁，此時第二部分以動畫的形式從底部涌出占滿整個屏幕描扯。而且效果是該頁面整體上移了定页，即第一部分和第二部分都是上移的。
此時绽诚，第二部分占滿著整個屏幕典徊，若我們下拉屏幕，則在屏幕頂部淡出“下拉恩够，返回寶貝詳情”的文本提示卒落，并且達(dá)到一個臨界值后文本變?yōu)椤搬尫牛祷貙氊愒斍椤狈渫埃藭r松開手指儡毕，頁面又滾動到第一部分的尾部。
實(shí)現(xiàn)
在自己寫的demo中扑媚，第一部分是個tableView腰湾，展示商品基本信息。第二部分是個webView疆股，展示商品圖文詳情费坊。
第一步首先加載需要的視圖。主要是第一部分的tableView和第二部分的webView旬痹，還有第二部分頂部顯示上拉返回文本提示的headLab附井。為了節(jié)省資源讨越，其實(shí)可以在上拉觸發(fā)時再加載第二部分視圖的，但是這里僅作示例永毅，所以并沒有懶加載把跨。
- (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];
}
- (UILabel *)headLab
{
if(!_headLab){
_headLab = [[UILabel alloc] 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 = [[UITableView alloc] 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 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, 60)];
tabFootLab.text = @"繼續(xù)拖動沼死，查看圖文詳情";
tabFootLab.font = FONT(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, PDWidth_mainScreen, PDHeight_mainScreen)];
_webView.delegate = self;
_webView.scrollView.delegate = self;
[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
}
return _webView;
}
然后實(shí)現(xiàn)滾動視圖UIScrollView的代理方法着逐，在里面完成滾動到達(dá)臨界值后，觸發(fā)翻頁動畫的處理漫雕。包括了上拉翻到第二頁和下拉翻回第一頁兩部分滨嘱，即要在該方法里通過判斷scrollView的類型做相應(yīng)的處理。
#pragma mark ---- scrollView delegate
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
CGFloat offsetY = scrollView.contentOffset.y;
if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滾動
{
// 能觸發(fā)翻頁的理想值:tableView整體的高度減去屏幕本省的高度
CGFloat valueNum = _tableView.contentSize.height -PDHeight_mainScreen;
if ((offsetY - valueNum) > _maxContentOffSet_Y)
{
[self goToDetailAnimation]; // 進(jìn)入圖文詳情的動畫
}
}
else // webView頁面上的滾動
{
NSLog(@"-----webView-------");
if(offsetY<0 && -offsetY>_maxContentOffSet_Y)
{
[self backToFirstPageAnimation]; // 返回基本詳情界面的動畫
}
}
}
再看看兩個翻頁的動畫浸间，其實(shí)很簡單太雨，就是移動它們的位置。
// 進(jìn)入詳情的動畫
- (void)goToDetailAnimation
{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_webView.frame = CGRectMake(0, 0, PDWidth_mainScreen, PDHeight_mainScreen);
_tableView.frame = CGRectMake(0, -self.contentView.bounds.size.height, PDWidth_mainScreen, 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, PDWidth_mainScreen, self.contentView.bounds.size.height);
_webView.frame = CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen);
} completion:^(BOOL finished) {
}];
}
然后還有個在第二頁下拉時屏幕頂部的文本提示的動畫呢魁蒜。這個我我們通過KVO來監(jiān)聽webView的scrollView的偏移量囊扳，只要其偏移量發(fā)生變化，便會實(shí)時執(zhí)行KVO的代理方法兜看，然后我們在方法內(nèi)根據(jù)其偏移量的變動完成動畫即可（隨著偏移量變大字體變得非透明锥咸，達(dá)到某個臨界點(diǎn)后，字體變?yōu)榧t色细移，文本內(nèi)容也變?yōu)椤搬尫挪瑁祷卦斍椤保?/p>
開始監(jiān)聽webView滾動的偏移量
// 開始監(jiān)聽_webView.scrollView的偏移量
[_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
在KVO的代理方法里，根據(jù)偏移量完成提示文本的動畫
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)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];
}
}
提示文本的動畫的實(shí)現(xiàn)代碼：
// 頭部提示文本動畫
- (void)headLabAnimation:(CGFloat)offsetY
{
_headLab.alpha = -offsetY/60;
_headLab.center = CGPointMake(PDWidth_mainScreen/2, -offsetY/2.f);
// 圖標(biāo)翻轉(zhuǎn)弧轧，表示已超過臨界值雪侥，松手就會返回上頁
if(-offsetY>_maxContentOffSet_Y){
_headLab.textColor = [UIColor redColor];
_headLab.text = @"釋放，返回詳情";
}else{
_headLab.textColor = PDColor_button_Gray;
_headLab.text = @"上拉精绎，返回詳情";
}
}
demo的最終效果：
