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?

Dustup

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.

Ulcerate

Thank you for this. This does indeed work out of the box.I believe that the top level view of your vertical scrolling pages must be a UIScrollView. Initially, I had my vertical scroller under a UIView and this did not work as desired.Remember also to set the contentSize of your vertical scrollers. – Atrip

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

Lorislorita

Answer 3

I've been using this great lib by Andrey Tarantsov for months: SoloComponents

You can use it as an "horizontal UITableView" with support for pagination and view recycling. Well made and perfectly cocoa-style designed.

Geosphere

Answer 4

Based on Dylan's answer, in my case, I actually also had to make content size heights equal for both parent and nested UIScrollViews to make nested UIScrollView to scroll vertically. Making only "the same frame heights as the container" as Dylan explained was not enough:

parentScrollView.contentSize = CGSizeMake(parentScrollView.contentSize.width, desiredContentHeight);
nestedScrollView.contentSize = CGSizeMake(nestedScrollView.frame.size.width, desiredContentHeight);

Teary

Answer 5

What Dylan says. And, perhaps of interest on this topic - you do not need to enable scrolling in the master "paging" UIScrollView, just enable paging and direction lock. This seems to assure that all vertical scrolling cues go to the nested, fixed-size, vertical-scrolling NSScrollViews. It works back to at least iOS 9.

Hemorrhage