我们在很多软件中都看到过，头部视图为一张图片，下拉的时候图片放大，效果挺棒的。在一般的应用中都是TableView中实现这种效果。
tableView中实现相对简单一些，也与webView中相似，在此我只提供一个TableView实现这种效果的思路，就不写实现代码了。具体可以参考下面webView中的实现
1、给tableView添加头视图，设置头视图为透明色
2、把ImageView加在self.view上（注意加在tableView下面）
3、设置tableVIew的backgroundcolor为透明色
4、根据tableView的offset改变imageView的frame即可
1、分析一下webView的视图结构
webView是一个复合视图，里面包含有一个scrollView，scrollView里面是一个UIWebBrowserView（负责显示WebView的内容）如下图所示：
屏幕快照 2016-05-05 下午3.44.06.png
2、添加headImageView到webView
不可以把headImageView放在scrollView里面，这样就会把headImageView一同往下移动，造成上面空白
UIView *webBrowserView = self.webView.scrollView.subviews[0];//拿到webView的webBrowserView
self.backHeadImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenWidth*2/3.0)];
[_backHeadImageView sd_setImageWithURL:[NSURL URLWithString:self.imageUrl] placeholderImage:[UIImage imageNamed:@"placeholderImage"]];
[self.webView insertSubview:_backHeadImageView belowSubview:self.webView.scrollView];
//把backHeadImageView插入到webView的scrollView下面
CGRect frame = self.webBrowserView.frame;
frame.origin.y = CGRectGetMaxY(_backHeadImageView.frame);
self.webBrowserView.frame = frame;
//更改webBrowserView的frame向下移backHeadImageView的高度，使其可见
3、下拉时改变headImageView的frame产生放大效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGPoint offSet = scrollView.contentOffset;
CGFloat change = offSet.y;
//拿到scrollView的偏移量
if (offSet.y < 0) {
//偏移量小于0，即下拉就改变headImageView的frame
CGSize size = CGSizeMake(kScreenWidth-change, kScreenWidth*2/3.f-change);
self.backHeadImageView.frame = CGRectMake(0, 0, size.width , size.height);
self.backHeadImageView.center = CGPointMake(kScreenWidth/2.f, size.height/2.f);
}else{
//上滑时改变位置
self.backHeadImageView.center = CGPointMake(kScreenWidth/2.f, (kScreenWidth*2/3.f)/2.f-change);
}
}
下面是最终效果
Untitled.gif
