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:
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:
Here’s the Swift code of the new class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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!) } } } |
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.
it’s great but I would have liked walking whether there was a way to change its position ? thank you
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.
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.
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.
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.
Thanks a lot Bob!
Thanks a lot man!, this was really really helpful
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?
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.
Your UIPageViewController’s view is smaller than the screen – it allows room at the bottom for the page control and the button, and at the top for the nav bar.
Is that not how you want it to look?