UIScrollView at the bottom of a UIScrollView

Question

I am looking for a way to implement the following:

• Have one 'master' scrollView that contains both a full-screen UIView on top and a full-screen UIScrollView below this
• When the user scrolls past the top UIView, the bottom scrollView is visible and becomes the responder for scroll events
• When the user attempts to scroll up from the bottom UIScrollView, the touches are redirected so they control the 'master' scrollView and bring the UIView into view again.

To give an idea of how this is set out, here is my current implementation:

// Initialise components:

    mainScreen = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = mainScreen.size.height-20;

    // Scroll View Controller

    _scrollControl = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, screenHeight)];
    _scrollControl.contentSize = CGSizeMake(320, 2*screenHeight); // Twice as big as the screen size for both views to fit
    _scrollControl.backgroundColor = [UIColor clearColor];
    _scrollControl.delegate = self;

    // Top View

    _topView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, screenHeight)];
    _topView.backgroundColor = [UIColor redColor];

    [_scrollControl addSubview:_topView];

    // Bottom View
    _bottomView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, screenHeight, 320, screenHeight)];
    _bottomView.backgroundColor = [UIColor yellowColor];
    _bottomView.contentSize = CGSizeMake(320, 2*screenHeight);

    _bottomView.delegate = self;

    UILabel *imageLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 40, 120, 700)];
    imageLabel.backgroundColor = [UIColor greenColor];

    [_bottomView addSubview:imageLabel];

    [_scrollControl addSubview:_bottomView];

    // Add to main view
    [self.view addSubview:_scrollControl];

I have tried to achieve the desired effect using delegate methods, however I can't seem to stop the 'master' scrollView from scrolling before it switches to the bottom scrollView.

Answer 1

Apple provides this functionality for free, so the good news is you don't need to actually directly code anything here (unless you want something a little funky). The effect is achieved through paging

scrollView.pagingEnabled = YES;

Before this will take any real effect, you will need embed your subviews (both the UIView and the UIScrollView) in the master scroll view. Each of them should be the same size, or size of a single page. So let's say the master scroll view is 100, 100 points, we could set it up like so:

CGRect pageRect = CGRectMake(0, 0, 100, 100);
NSInteger pageCount = 2;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:pageRect];
scrollView.pagingEnabled = YES;

UIView *page1View = [[UIView alloc] initWithFrame:pageRect];
page1View.backgroundColor = [UIColor redColor];
[scrollView addSubview:page1View];
pageRect.origin.x += pageRect.size.width;

UIView *page2View = [[UIView alloc] initWithFrame:pageRect];
page2View.backgroundColor = [UIColor blueColor];
[scrollView addSubview:page2View];

scrollView.contentSize = CGSizeMake(pageRect.size.width * pageCount, 
                                    pageRect.size.height);

That should give you the basics. As you can see we position the subviews one after another horizontally in this example. We set the content size to cover both subviews and enable paging. UIScrollView should take care of the rest.

A good place to look is at the WWDC session views, specifically from WWDC 2010 at: Session 104 - Designing Apps with Scroll Views. This has a lot of information on how to setup scroll views and really get the most out of them.

Hope this helps!

Answer 2

so if you want to detect it using swift, use these:

override func scrollViewDidScroll(scrollView: UIScrollView) {

    if (scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height)) {
        //reach bottom
    }

    if (scrollView.contentOffset.y < 0){
        //reach top
    }

    if (scrollView.contentOffset.y >= 0 && scrollView.contentOffset.y < (scrollView.contentSize.height - scrollView.frame.size.height)){
        //not top and not bottom
    }
}