How to Use UIPageViewController in Swift

Jeff Burt says:

Hey Michele!

Thanks for checking out my post. You definitely asked a great question. Unfortunately, there isn’t a pageControl property on UIPageViewController. So, you have to get a little creative. I take advantage of UIPageControl.appearanceWhenContainedInInstancesOfClasses() to accomplish this. Here is a snippet:

private func stylePageControl() {
    let pageControl = UIPageControl.appearanceWhenContainedInInstancesOfClasses([self.dynamicType])
    
    pageControl.currentPageIndicatorTintColor = UIColor.blueColor()
    pageControl.pageIndicatorTintColor = UIColor.greenColor()
    pageControl.backgroundColor = UIColor.orangeColor()
}

Then, simply call stylePageControl() inside viewDidLoad().

I have also added this to the GitHub repo. Here is the commit in case you’re curious: https://github.com/jeffaburt/UIPageViewController-Post/commit/adc0ae0a6b4d64ca2b0a9c0f2042a188ed673839

Hope this helps!

Jeff

Jeff Burt says:

Hey Mark,

Thanks for checking out my post! Anyways, you could use a key inside NSUserDefaults to determine if the tutorial has been shown or not. Maybe name it something like didShowTutorial (that does not default to true).

Hope this helps!

-Jeff

Jeff Burt says:

Hey James,

Great question!

First, I want to thank you for checking out my tutorial and all of the nice things you said about it.

Second, I have a solution for you! I went ahead and https://github.com/jeffaburt/UIPageViewController-Post/commit/2a680583e44435714fce002eeb9bc38dfba93410. I will also post the code here and walk you through it.

(1) Create a UIViewController subclass to add custom properties to. For this example, I chose to add a UILabel since it’s the easiest to view when running the app.

class ColoredViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
        
}

(2) Inside Main.storyboard, change the custom class for each UIViewController “page” to ColoredViewController in the Identity Inspector.

(3) Add a UILabel to each “page” and constraint it however you’d like. I chose to vertically and horizontally center it in the container. Don’t forget to link the UILabel to ColoredViewController‘s @IBOutlet weak var label: UILabel!.

(4) Optional: I deleted the default “Label” text in each one that way if we never set the label’s text in code, we will not show “Label” to the user.

(5) We need to do some TLC to TutorialPageViewController so it knows that orderedViewControllers is now a ColoredViewController array. To make things easy, I’m just going to paste the entire class:

class TutorialPageViewController: UIPageViewController {
    
    weak var tutorialDelegate: TutorialPageViewControllerDelegate?
    
    private(set) lazy var orderedViewControllers: [ColoredViewController] = {
        // The view controllers will be shown in this order
        return [self.newColoredViewController("Green"),
            self.newColoredViewController("Red"),
            self.newColoredViewController("Blue")]
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        dataSource = self
        delegate = self
        
        if let initialViewController = orderedViewControllers.first {
            scrollToViewController(initialViewController)
        }
        
        tutorialDelegate?.tutorialPageViewController(self,
            didUpdatePageCount: orderedViewControllers.count)
    }
    
    /**
     Scrolls to the next view controller.
     */
    func scrollToNextViewController() {
        if let visibleViewController = viewControllers?.first,
            let nextViewController = pageViewController(self,
                viewControllerAfterViewController: visibleViewController) {
                    scrollToViewController(nextViewController)
        }
    }
    
    private func newColoredViewController(color: String) -> ColoredViewController {
        return UIStoryboard(name: "Main", bundle: nil) .
            instantiateViewControllerWithIdentifier("\(color)ViewController") as! ColoredViewController
    }
    
    /**
     Scrolls to the given 'viewController' page.
     
     - parameter viewController: the view controller to show.
     */
    private func scrollToViewController(viewController: UIViewController) {
        setViewControllers([viewController],
            direction: .Forward,
            animated: true,
            completion: { (finished) -> Void in
                // Setting the view controller programmatically does not fire
                // any delegate methods, so we have to manually notify the
                // 'tutorialDelegate' of the new index.
                self.notifyTutorialDelegateOfNewIndex()
        })
    }
    
    /**
     Notifies '_tutorialDelegate' that the current page index was updated.
     */
    private func notifyTutorialDelegateOfNewIndex() {
        if let firstViewController = viewControllers?.first as? ColoredViewController,
            let index = orderedViewControllers.indexOf(firstViewController) {
                tutorialDelegate?.tutorialPageViewController(self,
                    didUpdatePageIndex: index)
        }
    }
    
}

// MARK: UIPageViewControllerDataSource

extension TutorialPageViewController: UIPageViewControllerDataSource {
    
    func pageViewController(pageViewController: UIPageViewController,
        viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
            guard let coloredViewController = viewController as? ColoredViewController,
                let viewControllerIndex = orderedViewControllers.indexOf(coloredViewController) else {
                return nil
            }
            
            let previousIndex = viewControllerIndex - 1
            
            // User is on the first view controller and swiped left to loop to
            // the last view controller.
            guard previousIndex >= 0 else {
                return orderedViewControllers.last
            }
            
            guard orderedViewControllers.count > previousIndex else {
                return nil
            }
            
            return orderedViewControllers[previousIndex]
    }

    func pageViewController(pageViewController: UIPageViewController,
        viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
            guard let coloredViewController = viewController as? ColoredViewController,
                let viewControllerIndex = orderedViewControllers.indexOf(coloredViewController) else {
                return nil
            }
            
            let nextIndex = viewControllerIndex + 1
            let orderedViewControllersCount = orderedViewControllers.count
            
            // User is on the last view controller and swiped right to loop to
            // the first view controller.
            guard orderedViewControllersCount != nextIndex else {
                return orderedViewControllers.first
            }
            
            guard orderedViewControllersCount > nextIndex else {
                return nil
            }
            
            return orderedViewControllers[nextIndex]
    }
    
}

extension TutorialPageViewController: UIPageViewControllerDelegate {
    
    func pageViewController(pageViewController: UIPageViewController,
        didFinishAnimating finished: Bool,
        previousViewControllers: [UIViewController],
        transitionCompleted completed: Bool) {
        notifyTutorialDelegateOfNewIndex()
    }
    
}

protocol TutorialPageViewControllerDelegate: class {
    
    /**
     Called when the number of pages is updated.
     
     - parameter tutorialPageViewController: the TutorialPageViewController instance
     - parameter count: the total number of pages.
     */
    func tutorialPageViewController(tutorialPageViewController: TutorialPageViewController,
        didUpdatePageCount count: Int)
    
    /**
     Called when the current index is updated.
     
     - parameter tutorialPageViewController: the TutorialPageViewController instance
     - parameter index: the index of the currently visible page.
     */
    func tutorialPageViewController(tutorialPageViewController: TutorialPageViewController,
        didUpdatePageIndex index: Int)
    
}

(6) Inside TutorialViewController: let’s set the label.text. I chose to use viewDidLoad, but feel free to stuff this logic inside a network request completion block.

override func viewDidLoad() {
    super.viewDidLoad()
        
    if let greenColoredViewController = tutorialPageViewController?.orderedViewControllers.first {
        greenColoredViewController.label.text = "Hello world!"
    }
}

Hope this helps!

-Jeff

Jeff Burt says:

Hey Gokulraj,

Thanks for checking out my post! If I understand you correctly, you should be able to drag a Navigation Controller Interface Builder object into Main.storyboard and set TutorialViewController as the root view controller. Main.storyboard should look something like this:

I’ve also created a new branch called wrapped-inside-nagivation-controller on the GitHub repo with these additions.

Hope this helps!

Jeff