Question

After having spent half the night trying to get this to work on my own I finally turn to StackWisdom:

I’m trying to implement a horizontal, paging UIScrollView with a sort of parallax scrolling background image (similar to the UI on Windows Phone 7). I’ve managed to get the scrolling working just fine using scrollViewDidScroll. For a 3 page example I am using an image with 1460×480/2920×960 pixels (3*320 points + 2*250 padding for width). And depending on the factor I use in scrollViewDidScroll, the right edge of the scroll view works just fine as well.

However, when on page 1 and trying to scroll further left, it becomes visible that the background image ends at the border of the screen and the window’s (grey, white, whatever) background becomes visible. How do I configure the scroll view so that there’s an extra, say, 250 pixels of the background image to the left of the content area? I’ve tried insets, offsets, repositioning the content area and countless combinations thereof, but to no avail.

Also, it’s 5:30 in the morning here and I’m tired. -_-

Source:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    CGRect screenRect = [[self window] bounds];

    // Create and configure scroll view
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:screenRect];
    [scrollView setDelegate:self];
    [scrollView setPagingEnabled:YES];
    [scrollView setShowsHorizontalScrollIndicator:NO];

    [[self window] addSubview:scrollView];

    pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(50, 50, 200, 50)];
    [pageControl setNumberOfPages:3];
    [pageControl setCurrentPage:0];
    [pageControl setBackgroundColor:[UIColor clearColor]];
    [[self window] addSubview:pageControl];

    backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"desert_panorama_cropped.png"]];
    [scrollView addSubview:backgroundImageView];

    // Create first content view
    screenRect.origin.x = 0;
    ContentView *firstContentView = [[ContentView alloc] initWithFrame:screenRect string:@"Page 1"];
    [scrollView addSubview:firstContentView];

    // Create second content view
    screenRect.origin.x = screenRect.size.width;
    ContentView *secondContentView = [[ContentView alloc] initWithFrame:screenRect string:@"Page 2"];
    [scrollView addSubview:secondContentView];

    // Create third content view
    screenRect.origin.x = screenRect.size.width * 2.0;
    ContentView *thirdContentView = [[ContentView alloc] initWithFrame:screenRect string:@"Page 3"];
    [scrollView addSubview:thirdContentView];

    CGRect contentRect = screenRect;
    contentRect.size.width *= 3.0;
    [scrollView setContentSize:contentRect.size];

    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    float x = scrollView.contentOffset.x;
    NSLog(@"Scrollview did scroll to offset: %f", x);

    CGRect backgroundImageFrame = backgroundImageView.frame;
    backgroundImageFrame.origin.x = x/1.5;
    backgroundImageView.frame = backgroundImageFrame;
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int newOffset = scrollView.contentOffset.x;
    int newPage = (int)((newOffset)/(scrollView.frame.size.width));
    [pageControl setCurrentPage:newPage];
}

Any help would be much appreciated.

Answer 1

I think all you have to do is add a constant to this line like so:

backgroundImageFrame.origin.x = x/1.5 - 250;