Search code examples
ioscocoa-touchuipageviewcontroller

UIPageViewController with Peeking

I'm trying to create a page browser by using a UIPageViewController in Interface Builder that allows displaying part of the adjacent pages (aka peeking). I've been following a tutorial at http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/ (and ported it into Swift) which is rather straightforward but I can't quite figure out what changes to make to have a page displayed in the UIPageViewController which is smaller than the screen (and centered) and having the adjacent pages appear partly on the screen left and right.

I've tried to resize the page content view controller in IB and with code but the page view controller will still fill the whole screen.

Does anyone know of a tutorial that covers this functionality or what is a good approach to get the desired effect?

This screenshot below from Bamboo Paper shows what I'm trying to achieve...

enter image description here

Solution

  • Like @davew said, peeking views will need to use UIScrollView. I too searched for a way to use UIPageViewController but couldn't find any resource.

    Using UIScrollView to make this feature was less painful that I had imagined.

    Here is a simple example to see the basic controls in action.

    Preview

    First: make a UIViewController, then in the viewDidLoad method, add the following code:

    float pad = 20;
NSArray* items = @[@"One", @"Two", @"Three", @"Four"];

self.view.backgroundColor = [UIColor greenColor];

UIScrollView* pageScrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
pageScrollView.opaque = NO;
pageScrollView.showsHorizontalScrollIndicator = NO;
pageScrollView.clipsToBounds = NO;
pageScrollView.pagingEnabled = YES;

adjustFrame(pageScrollView, pad, deviceH()/4, -pad*3, -deviceH()/2);

[self.view addSubview: pageScrollView];

float w = pageScrollView.frame.size.width;

for(int i = 0; i < [items count]; i++){
    UIView* view = [[UIView alloc] initWithFrame:pageScrollView.bounds];
    view.backgroundColor = [UIColor blueColor];
    setFrameX(view, (i*w)+pad);
    setFrameW(view, w-(pad*1));
    [pageScrollView addSubview:view];
}

pageScrollView.contentSize = CGSizeMake(w*[items count], pageScrollView.frame.size.height);

    FYI, I used these util functions to adjust the size of the view frames; I get sick of manually changing them with 3+ lines of code.

    Update

    I have wrapped up this code in a simple ViewController and put it on GitHub

    https://github.com/kjantzer/peek-page-view-controller

    It is in no way complete, but it's a working start.