iOS UIPageViewController full screen in Swift

I followed this excellent tutorial on how to use a UIPageViewController to present a series of screens as an introduction on the first start of an app. The tutorial uses storyboards in XCode 5, and is written in Objective-C, but it worked very well in XCode 6, and I was using Swift so I had to translate the code.

I finished the tutorial successfully, and had the screens running as intended. But there was one little issue. The dots at the bottom of the screen that indicate which page you are on, were below the main content, and on a black background:

iOS Simulator Screen Shot 13 Dec 2014 16.50.42

I wanted them to overlay the content on a transparent background. To achieve this I created a subclass of UIPageViewController, and in the override of the viewDidLayoutSubviews function I adjusted the view bounds of the scrollview in the class, and brought the pagecontrol that is also in the class to the front. This produced exactly what I wanted:

iOS Simulator Screen Shot 13 Dec 2014 16.53.44

Here’s the Swift code of the new class:

To use the new class, just select your PageViewController in the storyboard, then in the identity inspector change the class to TSPageViewController. Simple as that.

Must go, got to get to Sainsbury’s before they run out of apple and pear snack packs for the £3 meal deal.

11 thoughts on “iOS UIPageViewController full screen in Swift

    1. in TSPageViewController class in the else-if statement after pageControl = view as? UIPageControl define the following:
      pageControl?.frame = CGRectMake(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)

      Floats are the position.

  1. Thank you for this piece of code. I spent about 3 hours trying to remove the black page control background and, since I’m not an expert in Swift (yet), I started to think there were no solutions. But your code works perfectly.

  2. Thanks for this code!

    Before I used to init my page control in the appDelegate.swift by:

    var pageControl = UIPageControl.appearance()
    pageControl.hidesForSinglePage = true
    pageControl.pageIndicatorTintColor = UIColor.lightGrayColor()
    pageControl.currentPageIndicatorTintColor = UIColor.blackColor()
    pageControl.backgroundColor = UIColor.whiteColor()

    But in order to make your code work I had to comment that out. So how can I now edit the page control elsewhere?
    My design is a uiPageViewController wrapped in a contrainer view. And then a 3rd view that holds the images.

    1. If you’ve subclassed UIPageViewController like I have with my TSPageViewController, you should be able to override the viewWillAppear in your subclass and do the initialisation there. Don’t forget to call super.viewWillAppear() as well.

      Hope that helps.

  3. Suppose i want to add a button named “Close”. How can i add a button to the page view controller that everytime i swipe for a different page, the button stays at the same place, and doesn’t move along with the different views?

    1. Good question. In my storyboard I have the button at the same ‘level’ as the ScrollView, i.e. it’s not a child of it. That way when I scroll through the pages the button stays in the same place on the screen.

Leave a Reply

Your email address will not be published. Required fields are marked *