UIPageViewController UIImage not showing full scre

Question

I am making an application that is a tab-view controller. For the first tab, I have a UIPageViewController that is scrolling through pictures. Everything works properly, except for that the picture is not showing full screen. I have constraints set up for the image view to cover the whole view controller but when it gets loaded into the page view, it doesn't cover all the way to the bottom. The image gets cut off by the scrolling dot indicators and then it is just white.

I'm sure it is simple, but is there a way that the images will cover the full screen like I have the constraints set up to do?

Answer 1

There's quite a simple solution for this problem on that page: http://tunesoftware.com/?p=3363

It is done by overriding the viewDidLayoutSubviews method of UIPageViewController and basically doing two things:

1. Increasing the bounds of the UIScrollView (the content) inside the UIPageViewController by setting it's frame to the bounds of the page controller's view
2. Moving the UIPageControl element (the dots) to the front of the view hierarchy so that it's in front of the content

Here's the code he provides (in case the link gets broken):

import UIKit

class TSPageViewController: UIPageViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        var subViews: NSArray = view.subviews
        var scrollView: UIScrollView? = nil
        var pageControl: UIPageControl? = nil

        for view in subViews {
            if view.isKindOfClass(UIScrollView) {
                scrollView = view as? UIScrollView
            }
            else if view.isKindOfClass(UIPageControl) {
                pageControl = view as? UIPageControl
            }
        }

        if (scrollView != nil && pageControl != nil) {
            scrollView?.frame = view.bounds
            view.bringSubviewToFront(pageControl!)
        }
    }
}

All you have to do after that, is:

• If you set your page controller in the storyboard, then just go to the identity inspector pane and change its class to TSPageViewController
• If you set your page controller in code, then just make sure the class you defined for it inherits the TSPageViewController class

Cheers, Joe

Answer 2

Here's the Objective-C version. Create a new class (2 files):

(1) BasePageViewController.h extending UIPageViewController

#import <UIKit/UIKit.h>

@interface BasePageViewController : UIPageViewController

@end

(2) BasePageViewController.m containing viewDidLayoutSubviews override

#import "BasePageViewController.h"

@implementation BasePageViewController

- (void) viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];

    UIScrollView *scrollView = nil;
    UIPageControl *pageControl = nil;

    for(UIView *view in self.view.subviews)
    {
        if([view isKindOfClass:[UIScrollView class]])
        {
            scrollView = (UIScrollView *)view;
        }else if([view isKindOfClass:[UIPageControl class]])
        {
            pageControl = (UIPageControl *)view;
        }
    }

    if(scrollView != nil && pageControl!=nil)
    {
        scrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
        [self.view bringSubviewToFront:pageControl];            
    }
}

@end