By Kevin Hou
5 minute read
I’ve been starting to hunker down and learn the basics of Swift. Because my current project at work is to build an onboarding screen, there will likely be some sort of side scrolling element to it — similar to an iPhone homescreen. Because I knew no Swift-specific data structures, principles, etc. going into this, I was learning from the ground up. It was initially really challenging because I had no basic knowledge to go off of. The intent of this side project was to learn the fundamentals of Swift, especially how Views work.
Like all programmers, I googled my way through this project. This tutorial turned out to be a gold mine, but there were plenty of visits to StackOverflow and Apple’s developer documentation.
I started by creating a single view application. Instead of selecting the “Page-Based Application” template, I decided it would be best to start from scratch so that I could really understand the meat of what was going on. I created a simple landing page with a button that would connect to the “Pager” — the page view controller that houses all of the screens that would populate the side-scrolling view.
Next, create the “Pager” by dragging a “Page View Controller” next to the main “View Controller”. You also should create a file named “Pager.swift”, import the UIKit module, and create a UIPageViewController class like so:
1Import UIKit
2class Pager: UIPageViewController {
3
4}
5Go to your Main.storyboard, select the Page View Controller, and using the options on the right side, set the class to “Pager.” This connects the storyboard pager view controller element to your Pager.swift code. Also ensure that the “Transition Style” is set to “Scroll.”
To reach the “Pager” in the user flow, right click (or control click) the button on the “View Controller” and drag it over the the “Pager.” This will generate a list of potential segue options. Segues are essentially roads between views. In this case, I went with a Show Detail (e.g. Replace) segue. If you build and run this application and press the button, you will be greeted by a blank screen. Don’t worry, we’ll now populate the pager screen.
Create two more swift files named “PageOne.swift” and “PageTwo.swift”. Create a view controller in each:
1import UIKit
2
3class PageOne: UIViewController { // For the second page name it ‘PageTwo’
4 override func viewDidLoad() {
5 print("First page did load")
6 }
7}
8Create two view controllers in your Main.storyboard. They do not need to have a segue from any other page. Just change the class to PageOne or PageTwo so that they connect to your swift files. You should also change the Storyboard ID to match the class name for each View Controller.
Now, we will be working in the Pager.swift file to build the actual page-based functionality. In order to access the PageOne and PageTwo views, we create two shortcut functions that significantly condense our code in the future. Create these functions inside of your Pager class:
1func getPageOne() -> PageOne {
2 // Retrieve the view
3 return storyboard!.instantiateViewControllerWithIdentifier("PageOne") as! PageOne
4 }
5
6 func getPageTwo() -> PageTwo {
7 // Retrieve page two
8 return storyboard!.instantiateViewControllerWithIdentifier("PageTwo") as! PageTwo
9 }
10We want to set our default page to page one. In our viewDidLoad() function for the class Pager, set the first page to page one.
1// Loads the first page immediately after the pager loads 2setViewControllers([getPageOne()], direction: .Forward, animated: false, completion: nil) 3
To populate our pager, we must create an extension of the Pager with type: UIPageViewControllerDataSource. A Page View Controller relies on the dataSource to allow users to not only swipe between/access pages, but also to create the famous page control dots that iPhone users have grown accustomed to. Your Pager extension should look like this:
1extension Pager: UIPageViewControllerDataSource {
2
3}
4To allow users to swipe, you must set up the prebuilt functions viewControllerAfterViewController and viewControllerBeforeViewController. It essentially recognizes which way you are scrolling to, and sets the new page. Add these two functions to your Pager extension:
1func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
2 // Swiping forward
3
4 if viewController.isKindOfClass(PageOne) { // If you're on page one
5 // We want to swipe to page two
6 return getPageTwo()
7 } else { // If on page two
8 // End of all pages
9 return nil
10 }
11 }
12
13func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
14 // Swiping backward
15
16 if viewController.isKindOfClass(PageTwo) {
17 // If on page two, can swipe back to page one
18 return getPageOne()
19 } else {
20 // If on the first page, can't swipe back
21 return nil
22 }
23 }
24Right below those functions, we want to create the page control dots:
1 func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
2 // The number of dots in the page control dots
3 return 2
4 }
5
6 func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
7 // On the first dot when you first load the OnboardingPager
8 // Swift automatically handles switching pages and updating the page control dots
9 // Updates when setViewControllers is called
10 return 0
11 }
12Lastly, we want to connect the dataSource to the extension by calling:
1// Set dataSource: incorporates the pages
2 dataSource = self // Refers to the Pager extension of type UIPageViewControllerDataSource
3I also recommend setting a background color to the Pager so that the page control dots can be visible. Do this inside of your class Pager: UIPageViewController’s function viewDidLoad().
1view.backgroundColor = .lightGrayColor() // Set background color to white
2Here are some of the key, completed source files (note: I named the Pager “OnboardingPager” instead of “Pager” as I stated in the tutorial):