iPhone - Nesting UIScrollViews for horizontal paging and vertical scrolling

Question

I'm developing my first iPhone app and I would greatly appreciate you guy's input on a problem I'm having.

I'm looking to implement scrolling both horizontally and vertically. I want the horizontal scrolling to be paged, without the vertical one being paged (scrolling "normally"). A single UIScrollView with pagingEnabled set to YES will page in both directions. The natural solution would be to nest a UIScrollView inside another one, however when I do that, I can't get the "inner" UIScrollView to scroll at all. Seems the outer one is "eating" up all the tap events, like in:

UIScrollView : paging horizontally, scrolling vertically?

I read something about "inner scrolling" being improved upon in SDK 3.0 and actually when I add an inner UITableView instead of a UIScrollView the scrolling works flawlessly. Since UITableView subclasses UIScrollView I imagine that my desired behavior should be achievable by making my own subclass of UIScrollView.

Is this the right approach? If so, what should this subclass look like?

Answer 1

This works out of the box with the SDK now. See Scrolling Madness and Apple's UIPageControl sample for guidelines on how to implement paged horizontal scrolling with a view controller for each page.

The nested UIScrollViews you add as subviews to your outer UIScrollView should have the same frame heights as the container. If you do this then the outer UIScrollView will pass through the vertical scrolling events to the subview. My app has three levels of UIScrollView and UIWebView nesting and I've found Cocoa is really intelligent about passing the events to the one I want as long as I set my frame sizes so that only one view is really scrollable (contentSize > frame) on each axis.

Answer 2

If you are trying something like Twitter profile UI I achieved this by putting header view and bottom scrollview in a a parent scrollview and underlaying another scrollview behind.

Underlaying scrollview is responsible for the adjusting content offsets of header and bottom. Its contentsize is also adjusted by the inner item heights.

It looks complicated when I tell, better see the code https://github.com/OfTheWolf/Twitterprofile