How do I change the background on each page

[mamaral]

How do I change the background on each page

[mamaral]

In the Gemr app I had to do some internal customization to achieve that effect.

In a nutshell, the individual pages have clear backgrounds, and the onboarding view controller itself has multiple image views as the background, with images for each page. Using the scrollViewDidScroll:(UIScrollView *)scrollView delegate method, I'm able to determine the amount the page view controller has scrolled and fade in/out the associated image views and the contents of each page... Something like the following is what I did in objective-c:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // calculate the percent complete of the transition of the current page given the
    // scrollview's offset and the width of the screen
    CGFloat percentComplete = fabs(scrollView.contentOffset.x - self.view.frame.size.width) / self.view.frame.size.width;

    // these cases have some funky results given the way this method is called, like stuff
    // just disappearing, so we want to do nothing in these cases
    if (_upcomingPage == _currentPage || percentComplete == 0) {
        return;
    }

    _currentImageView.alpha = 1.0 - percentComplete;
    _upcomingImageView.alpha = percentComplete;

    // set the next page's alpha to be the percent complete, so if we're 90% of the way
    // scrolling towards the next page, its content's alpha should be 90%
    [_upcomingPage updateAlphas:percentComplete];

    // set the current page's alpha to the difference between 100% and this percent value,
    // so we're 90% scrolling towards the next page, the current content's alpha should be 10%
    [_currentPage updateAlphas:1.0 - percentComplete];
}

Out of the box Onboard doesn't support this, but that should give you a baseline to look into customizing yourself.

Thanks!

[dromerobarria]

Thanks, that really help me a lot. Just one more question, in the case of adding a button like Gemr app how do you implement It, cause Im trying to make the page control smaller so I can add a button but still I cant find where .

Thanks in advance

[mamaral]

That was done the same way and in the same place where the skip button was added, internally inside OnboardingViewController. Those buttons sit on top of everything so they don't scroll or fade in/out.

[TheCodeTalker]

your adding subview how can i change in backgroundImageView with subview what does it means when your saying has multiple image views as the background how you have done that????

thanks

[johncederholm]

@chitaranjan I created a subclass of Onboard where you can fade the background in and out. It's here
You'll have to hard code the number of images, and I am still working on making this subclass "better," but it gets the job done.