Add a head view above the UIWebView to let it scroll with WebView

UIWebView is one of the most commonly used controls in the iOS SDK. It is a built-in browser control that we can use to navigate the Web, open the document, and so on.

UIWebView can be used to show users some of the Web page information, when we are developing, usually want to add a headerview on this controller to display the title or image, then we will encounter a problem at this time, is how to add a head view above a webview.

I searched this question on the Internet, and many people said to add a view directly to WebView's scrollview. This can actually be achieved by adding a header view on the WebView, but this can cause a problem This heardview will block the content displayed on the WebView, that is, Headerview is actually directly added to the webview above, it is not part of the webview.

At this point we have the need to make the head view appear on top of the loaded page, scrolling along with the webview. What should I do?

We can tell by the official API that there is actually a Uiscrollview attribute in UIWebView.

Picture 1

In fact, WebView is able to display so much content, and it can be scrolled because of this scrollview property. Then we can start from this place to achieve the effect we want.

For example, at this point we want to add a picture as a caption on top of the webview. The height of the picture we set to 240.

First, after we've added WebView to the view, we'll set the Contentinset of the WebView ScrollView, and contentinset can increase the scrolling range in four weeks.

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

Note: The value of the Uiedgeinsetsmake is set to: up, left, bottom, right

After the setup is complete, the scrolling range of the ScrollView is increased by 240. This allows us to add a random view to the 240 of the Y axis of the frame on this page. For example, here we add a 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];

We parse a local HTML data and use WebView to show

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

OK, so it's time to add a head view on UIWebView and let it scroll with ScrollView.

Such as:

Picture 2

Wen/coderqiao (author of Jane's book)
Original link: http://www.jianshu.com/p/59960ac2b3a1
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

Add a head view above the UIWebView to let it scroll with WebView