UIPageViewController with Peeking

Question

I am trying to create a page browser using the UIPageViewController in Interface Builder, which allows UIPageViewController to display part of neighboring pages (aka peeking). I followed the tutorial at http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/ (and moved it to Swift), which is pretty simple, but I can't figure out what to make the page displayed in the UIPageViewController, which is smaller than the screen (and in the center), and adjacent pages are partially displayed on the screen on the left and right.

I tried to resize the page view controller in IB and with code, but the page view controller will still fill the entire screen.

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

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

Answer 1

Like @davew, peeking browsing should use a UIScrollView . I was also looking for a way to use the UIPageViewController , but could not find any resource.

Using UIScrollView to make this function less painful than I imagined.

---

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

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 use functions to adjust the size of the presentation frames; I'm sick of changing them manually using 3+ lines of code.

Update

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

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

This is by no means complete, but it is the beginning of the work.

Answer 2

I was just looking for a good solution for the same function. I found a good tutorial on the Ray Wenderley website titled "How to Use UIScrollView to Scroll and Zoom In . " It illustrates a few things you can do with UIScrollView . The fourth and final is “View Previous / Next Pages,” which is your “peek” feature.

I haven't implemented this yet, but the key steps seem to be:

• Create a UIScrollView narrower than your screen.
• Enable Paging Enabled
• Disable Clip Subviews
• Fill UIScrollView with your pages side by side
• Insert a UIScrollView inside a UIView that fills the width of the screen so you can capture and transfer strokes outside of the scroll bar.