CODEWITHSUNDEEP
iosobjective-c
BlueBear
BlueBear

Reputation: 7639

How could I build a continuous parallax scroll/table view?

I am looking to build a continuous parallax scroll view for iOS that would act as a tableView. What I want to recreate is very similar to the scrolling shown on this page. I have seen a lot of 'double view' parallax views, but none that are continuous in function.

I know this isn't a direct question, but I could really use some help getting set in the right direction for making this.

Upvotes: 0

Views: 478

Answers (1)

Fogmeister
Fogmeister

Reputation: 77621

There are many ways that you could approach this.

I'd probably not use a table view but I think from first look that I'd use a UIScrollView and 2 UIImageViews and an NSArray of images (depending on how many images there are).

The 2 image views will be placed one on top of the other on the main view then on top of them both will be the scroll view with nothing in it. The scroll view is acting only as a control.

Set the content size of the scroll view based on how many "pages" there will be (i.e. the screen height multiplied by the number of images).

In the scroll view delegate method -(void)scrollViewDidScroll: get the current offset of the scroll view.

You can use this offset to calculate the topImage and bottomImage (i.e. which index they will be from the NSArray).

Then change the position of the top UIIMageView based on the offset again.

Rough code

// create a topImageView and bottomImageView.
// set contentMode UIViewContentModeScaleAspectFill
// set clipsToBounds = YES
// place them both on self.view (bottom first)
// create a scrollView with a clear background.
// place it on the self.view.
// get the array of images.
// set the scrollView.contentSize = number of images * height of scrollView.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat percentageOffset = scrollView.contentOffset.y / CGRectGetHeight(scrollView.frame);

    NSInteger topPage = floorf(percentageOffset);
    CGFloat topPageOffset = percentageOffset - topPage;

    // make sure that you're not going outside of the index bounds first!!!!

    self.topImageView.image = self.images[topPage];
    self.bottomImageView.image = self.images[topPage + 1];

    // move the top image view so it looks like you are scrolling it.
    self.topImageView.frame = CGRectOffset(self.view.bounds, -self.view.bounds.height * topPageOffset, 0);
}

This will give the impression that you are sliding the top image up out of the way and revealing the bottom image. It will also work continuously so if you "flick" the scroll view it will reveal one after the other until the scrollview slow and stops.

This is how I'd approach it I think.

Upvotes: 1

Related Questions