Nested uiscrollviews and custom handling event routing

Question

I have nested UIScrollViews in a such way that inner UIScrollView is located at second page of outer UIScrollView. (i.e. inner one's frame would be CGRectMake(320, 0, view.width, view.height)). Two scrollviews only goes horizontally. I would like to swipe only inner scroll view once it is on the screen (i.e outer scroll view moves to second page) and until inner one reaches to the end. Once inner one reaches to the end, then I would like to recognize swipe for outer one. I first try to set outerScrollView.scrollEnabled = NO on second page, but then inner one also didn't get received swipe gesture. I also tried to subclass UIScrollView and override hitTest:event to return inner one's UIView, that also didn't work out. Is there a way to handle swipe event to a specific view and block for other views?

GWhite GWhite · Accepted Answer · 2015-04-27T17:36:51

Try detecting when the scroll view reaches the bottom of the inner view by using the code here. If it's reached the bottom, flip a boolean (remember to flip it back if the user moves the scroll view away from the bottom!). If the boolean is flipped, use the code here to pass the touches to the superview and allow horizontal scrolling of the containing UIScrollView. If you're having trouble forcing the scroll try the code here to force scrolling.

EDIT: I just wrote some code to test this out. By restricting the directions each view could scroll, I was able to get it to work as you described without using most of what I referred to above (much simpler). Here's the code for the scroll views:

outer = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
[outer setBackgroundColor:[UIColor redColor]];
[outer setShowsHorizontalScrollIndicator:true];
[outer setShowsVerticalScrollIndicator:false];
[outer setScrollEnabled:true];
[outer setDelegate:self];
[outer setAlwaysBounceHorizontal:true];
[outer setAlwaysBounceVertical:false];
outerContent = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width*2, self.view.bounds.size.height)];
[outerContent setBackgroundColor:[UIColor blueColor]];
[outer addSubview:outerContent];
outer.contentSize = outerContent.frame.size;
[self.view addSubview:outer];

inner = [[UIScrollView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
[inner setBackgroundColor:[UIColor yellowColor]];
[inner setShowsHorizontalScrollIndicator:false];
[inner setShowsVerticalScrollIndicator:true];
[inner setAlwaysBounceHorizontal:false];
[inner setAlwaysBounceVertical:true];
[inner setScrollEnabled:true];
[inner setDelegate:self];
innerContent = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height*2)];
[innerContent setBackgroundColor:[UIColor greenColor]];
inner.contentSize = innerContent.frame.size;
[inner addSubview:innerContent];

[self.outerContent addSubview:inner];

I color coded the views so you could tell what was going on. "inner" and "outer" are UIScrollViews that I declared in my header file and synthesized in the class. "innerContent" and "outerContent" are UIViews also in the header file.

Nested uiscrollviews and custom handling event routing

1 Answers