WebView添加头视图并下拉放大

我们在很多软件中都看到过，头部视图为一张图片，下拉的时候图片放大，效果挺棒的。在一般的应用中都是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