Transparent UIToolBar over UIWebView

Question

I want to have a transparent UIToolBar over a UIWebView, so that the user gets a wider perspective and overview.

However, when I do this, you cannot see the bottom of the page. I thought about setting an offset at the bottom, but that can't be trusted, as the level of zoom may vary (and each pixel will be worth less).

How can I make the webView scroll and stop at the top edge of the UIToolBar?

Answer 1

I tried out Emils solution, but it doesn't work for iOS7 since it there inherits from an UIWebViewScrollView. So, adapted his code to the following:

for (id view in [self.webView subviews]){
    if ([view respondsToSelector:@selector(setContentInset:)]){
        [(UIScrollView *)view setContentInset:UIEdgeInsetsMake(0, 0, 44, 0)];
    }
}

Answer 2

You must set the contentInset and the scrollIndicatorInsets. If you don't set the scrollIndicatorInsets, the scroll indicator will go beneath your UIToolbar which doesn't look right.

float toolbarHeight = toolbar.frame.size.height;

UIEdgeInsets insets = webView.scrollView.contentInset;
insets.bottom = toolbarHeight;
[webView.scrollView setContentInset:insets];

UIEdgeInsets indicatorInsets = webView.scrollView.scrollIndicatorInsets;
indicatorInsets.bottom = toolbarHeight;
[webView.scrollView setScrollIndicatorInsets:indicatorInsets];

Answer 3

I fixed it by setting an inset in the UIScrollView-subview of the UIWebView:

for (id view in [webView subviews]){
    if ([view isMemberOfClass:[UIScrollView class]]){
        [(UIScrollView *)view setContentInset:UIEdgeInsetsMake(0, 0, 44, 0)];
    }
}

Looks and works great!

Answer 4

It sounds like you don't want the UIToolbar to overlap your UIWebView. Instead, you want to set their frames such that the UIWebView only extends to where the UIToolbar begins.

If you're setting up these two views programmatically, just set the height of the UIWebView's frame to be the size of its parent's bounds - the height of the UIToolbar's frame. If you're doing this in InterfaceBuilder, just drag the bottom edge of the UIWebView to resize it so it stops where the UIToolbar begins, or modify its frame in the inspector.