While I know nested scrollViews aren't ideal, our designers provided me with this setup, so I'm doing my best to make it work. Let's begin!
View Hierarchy
- UIView
- UIScrollView (Vertical Scrolling Only)
- UIImageView
- UICollectionView #1 (Horizontal Scrolling Only)
- UIImageView (different from previous UIImageView)
- UICollectionView #2 (Vertical Scrolling Only)
- UIScrollView (Vertical Scrolling Only)
Important Note
All my views are defined using programmatic Auto Layout. Each successive view in the UIScrollView's subview hierarchy has a y-coordinate dependency on the view that came before it.
The Problem
For the sake of simplicity, let's modify the nomenclature a bit:
_outerScrollView
will refer toUIScrollView
_innerScrollView
will refer toUICollectionView #2
I'd like for my _outerScrollView
to route its touch event to the _innerScrollView
upon reaching the bottom of its contentSize. I'd like the reverse to happen when I scroll back up.
At present, I have the following code:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat bottomEdge = [scrollView contentOffset].y + CGRectGetHeight(scrollView.frame);
if (bottomEdge >= [_outerScrollView contentSize].height) {
_outerScrollView.scrollEnabled = NO;
_innerScrollView.scrollEnabled = YES;
} else {
_outerScrollView.scrollEnabled = YES;
_innerScrollView.scrollEnabled = NO;
}
}
where the initial conditions (before any scrolling occurs) is set to:
outerScrollView.scrollEnabled = YES;
innerScrollView.scrollEnabled = NO;
What happens?
Upon touching the view, the outerScrollView
scrolls until its bottom edge, and then has a rubber band effect due to _outerScrollView.bounces = YES;
If I touch the view again, the innerScrollView scroll until it hits its bottom edge. On the way back up, the same rubber banding effect occurs in the reverse order. What I want to happen is have a fluid motion between the two subviews.
Obviously, this is due to the scrollEnabled
conditions that are set in the conditional in the code snippet. What I'm trying to figure out is how to route the speed/velocity of one scrollView to the next scrollView upon hitting an edge.
Any assistance in this issue would be greatly appreciated.
Other Notes
- This did not work for me: https://github.com/ole/OLEContainerScrollView
- I am considering putting everything in the UIScrollView hierarchy (except for UICollectionView #2) inside UICollectionView #2
supplementaryView
. Not sure if that would work.
Best Answer
Figured it out!
First:
_scrollView.pagingEnabled = YES;
Second:
Where:
_scrollView
is the_outerScrollView
_offersCollectionView
is the_innerScrollView
(which was UICollectionView #2 in my original post).Here's what happens now:
offersCollectionView
takes over the entire view, moving the other subViews out of the view.