iphone: View on top of UIWebView?

Question

I'm working on a browser app, and I have an address bar on top the UIWebView. On MobileSafari if you scroll down, the address bar starts to move to the top, out of the screen, and the UIWebView doesn't scroll. Only when the address bar disappears completely, it starts to scroll. I would like to have this effect in my app as well.

What's the best way to implement this?

Thanks

Answer 1

PeakJi's solution works but is a bit laggy. A better solution would be adding an observer to the UIScrollView's content offset, something like

[scrollview addObserver:self forKeyPath:@"contentOffset" 
                                    options:NSKeyValueObservingOptionNew context:nil];

You can find more document on NSKeyValueObserving protocol at

https://developer.apple.com/library/ios/#documentation/Cocoa/Reference/Foundation/Protocols/NSKeyValueObserving_Protocol/Reference/Reference.html

Answer 2

There is a way, but I am not sure if it is a bit too hacky. First search for the scrollview within the webview, then alter the contentInset and finally add the searchbar(for example) to the scrollview. The following code is just an example, I did not set any frames correctly and 40 is just a made up height for the searchbar. I am not sure if this will work in every iOS Version.

UIWebView * myWebView = [[UIWebView alloc] init]
UISearchBar * mySearchBar = [[UISearchBar alloc] init];
for (NSObject * aSubView in [myWebView subviews]) {
   if ([aSubView isKindOfClass:[UIScrollView class]]) {
      UIScrollView * theScrollView = (UIScrollView *)aSubView;
      theScrollView.contentInset = UIEdgeInsetsMake(40, 0, 0, 0);
      [theScrollView addSubview:mySearchBar];
   }
}

Answer 3

The only way to implement this requires iOS 5. In iOS 5, UIWebView has an UIScrollView subview.

And use the following code:

Set a area for the address bar:

[[myWebView scrollView] setContentInset:UIEdgeInsetsMake(64, 0, 0, 0)];

Move the address bar using the scrollview delegate:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

        if(scrollView.contentOffset.y>=-64&&scrollView.contentOffset.y<30)
        {
            topBar.frame=CGRectMake(0,-44-scrollView.contentOffset.y, 320, 44);

        }
        else if(scrollView.contentOffset.y<-64)
            topBar.frame=CGRectMake(0,20, 320, 44);//Lock the position
}

Answer 4

Come to think of it, it is simply a scrolling view with an address bar stuck on the top, and both the web view and the bar always move together. Now, lets say you create a scroll view and add two subviews, the address bar and the web view (one below the other). It is to be noted that the height of the web view is determined and fixed after the page has been loaded (in webViewDidFinishLoad:).

Hence, it is simply a scrolling view whose contentSize is equal to the height of the bar + the height of the web view. Now, by default the web view allows scrolling, as it has a scroll view as a subview. As only the outer scroll view should be scrolling, it is required that the web view's scrolling be turned off. For that, fetch the first subview (that's the scroll view) and disable its scrolling using:

(UIScrollView*)[myWebView.subviews objectAtIndex:0].scrollEnabled = NO;