Question

I need to create a book-like app and want to use UIPageViewController. (iPad, horizontal layout with two pages (UIPageViewControllerSpineLocationMid).

To make the screen more appealing I would like to have the view of the controller overlayed with an image or an CAGradientLayer making the spine visible.

I tried adding a subview to the pageViewController, but it seems to get removed when the animated transition starts.

Has anyone got an idea?

Answer 1

I solved the problem by adding the CAGradientLayer to the views of the currently displayed sub controllers of the UIPageViewController.
I had to distinguish between left and right pages (for the double sided landscape mode).
To achieve this, I created a bool property called “rightPage” and overloaded the setter:

- (void) setRightPage:(BOOL)rightPage
{
    _rightPage = rightPage;
    if (!self.spineShadow) {
        self.spineShadow = [CAGradientLayer layer];
    }
    self.spineShadow.zPosition = 5000;
    self.spineShadow.colors = [NSArray arrayWithObjects:
                               (id)[UIColor clearColor].CGColor,
                               (id)[[[UIColor blackColor] colorWithAlphaComponent:0.3] CGColor],
                               nil];

    if (rightPage) {
        self.spineShadow.startPoint = CGPointMake(1.00f,0.5f);
        self.spineShadow.endPoint   = CGPointMake(0.00f,0.5f);
    } else {
        self.spineShadow.startPoint = CGPointMake(0.00f,0.5f);
        self.spineShadow.endPoint   = CGPointMake(1.00f,0.5f);
    }
}