效果图一
效果图二
demo下载地址：https://github.com/ZhengYaWei1992/ZWTaobaoDetail
首先我们要知道淘宝的类似页面，商品展示页面是一个tabbleView，详情页面是一个webView。该效果的实现，实际上就是监控tabbleView和wenbView的contentOffset值来调节tabbleView和webView的frame值，从而控制两个页面的切换展示。主要实现代码在ScrollView的scrollViewDidEndDragging这个代理方法中。其中ScrollDistance是一个宏常量，主要控制拖动的距离。
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
CGFloat offsetY = scrollView.contentOffset.y;
if ([scrollView isKindOfClass:[UITableView class]]) {
// 能触发翻页的理想值:tableView整体的高度减去屏幕本身的高度
CGFloat valueNum = self.tableView.contentSize.height -self.view.frame.size.height;
if ((offsetY - valueNum) > ScrollDistance)
{
[self goToDetail]; // 进入图文详情的动画
}
}else{// webView页面上的滚动
if(offsetY<0 && -offsetY > ScrollDistance)
{
[self backToFirstPage]; // 返回基本详情界面的动画
}
}
}
以下两个方法分别是进入到webView和tabbleView具体实现代码。
/**进入到webView*/
- (void)goToDetail{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_webView.frame = CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 20);
_tableView.frame = CGRectMake(0, -self.tableView.bounds.size.height, [UIScreen mainScreen].bounds.size.width, self.tableView.bounds.size.height);
} completion:^(BOOL finished) {
}];
}
/**返回到tableView*/
-(void)backToFirstPage{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_tableView.frame = CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 20);
_webView.frame = CGRectMake(0, _tableView.contentSize.height, [UIScreen mainScreen].bounds.size.width, self.tableView.bounds.size.height);
} completion:^(BOOL finished) {
}];
}
除了上面的核心代码之外，我们还要监控webView的scrollView属性的contentOffset值，判断拖动距离，在webView顶部给用户提示。
[_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
- (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];
}
}
// 头部提示文本动画
- (void)headLabAnimation:(CGFloat)offsetY
{
self.headLabel.alpha = -offsetY/60;
self.headLabel.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2.0, -offsetY/2.f);
// 图标翻转，表示已超过临界值，松手就会返回上页
if(-offsetY> ScrollDistance){
// self.headLabel.textColor = [UIColor redColor];
self.headLabel.text = @"释放，返回详情";
}else{
// self.headLabel.textColor = [UIColor lightGrayColor];
self.headLabel.text = @"下拉，返回详情";
}
}
