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?

score 4 · Answer 1 · answered Jun 03 '14 at 10:38

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];

score 3 · Answer 2 · answered Nov 05 '10 at 23:38

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!

score 2 · Accepted Answer · answered May 30 '14 at 23:26

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)];
    }
}

score 0 · Answer 4 · answered Nov 05 '10 at 22:51

0

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.

answered Nov 05 '10 at 22:51

Ryan

16,626
2
23
20

The whole point of a transparent toolBar is to show things under it. So no, I do not want the UIWebView to stop right above the toolBar. – Emil Nov 05 '10 at 22:55
Sorry, then I guess I don't understand what you're trying to do. – Ryan Nov 05 '10 at 22:58
Sort of the Photos-app, just that I want the bottom edge of the "image" to be able to scroll over the edge of the toolbar! :) – Emil Nov 05 '10 at 23:07
Thanks for the effort, though! – Emil Nov 05 '10 at 23:10

Transparent UIToolBar over UIWebView

4 Answers4