UIWebView是iOS sdk中一个最常用的控件。它是一个内置的浏览器控件，我们可以用它来浏览网页、打开文档等等.
UIWebView可以用来向用户展示一些网页信息,在我们进行开发的时候,通常会想在这个Controller上面添加一个headerView用来展示标题或者图片 ,那么我们此时就会遇到一个问题,就是怎么在一个webView上面添加头视图.
我在网上搜过这个问题,很多人说直接在webView的scrollView上添加一个View.这样确实可以实现在webView上添加头视图,但是这样的话会导致一个问题就是,这个heardView会遮挡住webView上显示的内容,也就是说,headerView其实是直接加在webView上面的,它并不是webView的一部分.
此时我们有着这样的需求,就是我们需要让这个头视图显示在加载出来的网页的上面,能随着webView进行滚动.这样该怎么办呢?
我们通过官方的API可以知道其实在UIWebView中是有一个UIScrollView的属性的.
图片1
实际上,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滚动.
如下图:
图片2
文／CoderQiao（简书作者）
原文链接：http://www.jianshu.com/p/59960ac2b3a1
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。