在UIWebView 上面添加一个头视图 让它能随webView 滚动

UIWebView是iOS sdk中一个最常用的控件。它是一个内置的浏览器控件，我们可以用它来浏览网页、打开文档等等.

UIWebView可以用来向用户展示一些网页信息,在我们进行开发的时候,通常会想在这个Controller上面添加一个headerView用来展示标题或者图片 ,那么我们此时就会遇到一个问题,就是怎么在一个webView上面添加头视图.

我在网上搜过这个问题,很多人说直接在webView的scrollView上添加一个View.这样确实可以实现在webView上添加头视图,但是这样的话会导致一个问题就是,这个heardView会遮挡住webView上显示的内容,也就是说,headerView其实是直接加在webView上面的,它并不是webView的一部分.

此时我们有着这样的需求,就是我们需要让这个头视图显示在加载出来的网页的上面,能随着webView进行滚动.这样该怎么办呢?

我们通过官方的API可以知道其实在UIWebView中是有一个UIScrollView的属性的.

实际上,webView之所以能够显示这么多的内容,而且可以滚动就是因为这个scrollView的属性.那么我们就可以从这个地方下手来实现我们想要的效果.

比如说,此时我们想在加在的webView上面添加一张图片作为标题.图片的高度我们设置为240.

首先,我们在视图上添加完webView之后,我们将webView的scrollView的的contentInset设置一下,contentInset可以在四周增加滚动范围.

// 添加额外的滚动附近区域的内容
    _webView.scrollView.contentInset = UIEdgeInsetsMake(240, 0, 0, 0);
复制代码

注意:UIEdgeInsetsMake的值依次设置为:上,左,下,右

设置完成之后,scrollView的滚动范围就成增加了240.这样我们就可以在这个页面的frame的y轴的-240的地方添加随意视图了.比如在这里我们添加一个imageView.

// 在webView上添加一个imgView 在 imgView上添加一个label
    UIImageView *view = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test.jpg"]];
    imgView.frame = CGRectMake(0, -240, _webView.frame.size.width, 240);
    [_webView.scrollView addSubview:imgView];
复制代码

我们解析一个本地的HTML数据,用webView来展示

NSString *pathFile = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:pathFile encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlString baseURL:nil];
复制代码

ok,这样就是现在在UIWebView上添加一个头视图,并且让它可以随着scrollView滚动.

如下图: