UIPageViewController UIImage not showing full screen

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?

As you can see, the image stops at the bottom where the dots begin. Where as I want it to go all the way down to the bottom. So the area with the dots is transparent.

Show us a screenshot of what you are after and then explain just how it should be different. — Doug Watkins, Feb 26 '15 at 01:53
In the picture, I want the image to go all the way down to the bottom. Instead it stops where the dots begin. I want the dot area to be transparent and the image to fill up the entire screen @DougWatkins — Adam, Feb 26 '15 at 02:23

score 7 · Accepted Answer · edited Mar 20 '21 at 12:42

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:

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
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.

If I create the page control inside AppDelegate.swift by var pageControl = UIPageControl.appearance(). How do I make sure it inherits this class? — user2722667, Jun 21 '15 at 19:01

score 1 · Answer 2 · answered Jul 12 '16 at 17:36

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

UIPageViewController UIImage not showing full screen

2 Answers2

Linked