Zoom a UIWebView like iOS Mail App

Question

I'd like to recreate a view that you can zoom like the iPhone/iPad Mail app or Sparrow when viewing an email, where at the top there is block of information and then a UIWebView. I can obviously do this easily in interface builder or code, BUT I would like it behave like the Mail app.

By 'like the Mail App' I mean, when you pinch zoom (anywhere in the view), the UIWebView is the only view that actually zooms, and the top content stays the same size. When you zoom out too far and see the background the whole view zooms out (not just the UIWebview) and the whole view scrolls too.

I've done some experimenting and tried some of the suggestions already, like inserting the top view at the top of the UIWebView, extending the height of the UIWebView based on content size but this always ends up with either the top view zooming too, OR just the UIWebView.

I hope the makes some sense. It might be really simple but I've been trying to sort this for a while on and off that I can't see the wood for the trees any more.

This is for a MonoTouch app, but if anyone has Objective-C examples or anything I can convert and post back.

Answer 1

I have done just that for our application; it is not as simple as it sounds, but on iOS 5 it should be somewhat less complex than iOS 4. Have a view of the top part you wish to have constant. When your web view finishes loading the HTML and renders it, get the scrollView of the web view, and add your view as a subview to that. Add the top view's frame height to the contentSize.height of the scroll view, and add the height to origin.y of the rest of subviews of the scroll view (those that are not your top view). Set your view controller as the delegate of the web view's scroll view. Whenever the user scrolls:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{   
    CGRect frame = contentView.frame;

    if(scrollView.contentOffset.x < 0)
    {
        frame.origin.x = 0;
    }
    else if((scrollView.contentOffset.x + contentView.frame.size.width) > scrollView.contentSize.width)
    {
        frame.origin.x = scrollView.contentSize.width - contentView.frame.size.width;
    }
    else
    {
        frame.origin.x = scrollView.contentOffset.x;
    }

    [contentView setFrame:frame];
}

This should make it behave exactly like the mail.app view.