Quotes app – Simple page based application in Swift

This is a very basic tutorial on how to create a simple page based app in Swift. We are going to use Page Based Application project template for displaying quotes in different pages.



Create Page-Based Application in Swift

Click Xcode File menu, navigate to New and select Project from sub menu list.


Select Page-Based Application in template screen and click Next button.


In the Project Options screen, provide a name for your project and select language as Swift. Then click Next button and save your project.


This should create a default page based application in Swift with the following project structure.


Run the project on Simulator should display a page based app displaying names of months. When you tap or swipe the screen, next page should be displayed.


Modifying the default Page-based application

We are going to modify the existing app to display quotes instead of months. The default project follows MVC pattern for retrieving and displaying the data. RootViewController.swift does the controller part, DataViewController.swift/Storyboard is used for displaying Views and ModelViewController.swift provides the data.

Let us first start with the changes to Storyboard. Navigate to Main.storyboard, select and delete the View and Label under Data View Controller.


Set the background colour of the View to Purple using Attributes Inspector.


Drag and drop a UILabel from Object library on to View Controller. Make sure to Centre align the label both vertically and horizontally.


Use the Attributes Inspector to set the colour, alignment and Font for UILabel’s Text. Then change the number of lines displayed in UILabel to 3. Next use the align option in Interface builder to add the Horizontal and Vertical Center constraints (select Use Current Canvas Value)


Click Connection Inspector and connect dataLabel to the newly added UILabel. dataLabel property was already added to the DataViewController.swift to display month name.


Make changes to ModelViewController

Now we need to provide the required data for the display. Click ModelViewController.swift and change the pageData variable in to a constant and add array of four quotes as shown below.

let pageData:NSArray = ["I'm as proud of what we don't do as I am of what we do - Steve Jobs", "That's one small step for man, one giant leap for mankind - Neil Armstrong","An ant on the move does more than a dozing ox - Lao Tzu","I mean, it's impossible But that's exactly what we've tried to do - Jonathan Ive"]


Then delete the following lines from init() function

// Create the data model.

let dateFormatter = NSDateFormatter()

pageData = dateFormatter.monthSymbols


Now compile and run the app on the simulator to see a Simple Page-based app in action written in Swift.


Since we had gone with the default page-based template, we are unaware of the logic behind UIPageViewController. In another post, I will try to build a UIPageViewController from scratch without using the template and see more about the UIPageViewControllerDelegate and UIPageViewControllerDataSource.

Download source code from here

In Category: Develop, iPhone, Programming, Xcode

Ravi Shankar

A polyglot software developer and now exploring Swift and iOS development. If you would like to learn from me then check out services page.

Show 8 Comments
  • djandji September 23, 2014, 3:50 pm


    I would like to build a UIPageViewController from scratch.
    Any updates on when the tutorial will be available?

    • rshankar September 23, 2014, 3:54 pm

      Thanks for your continuous interest shown in these tutorials. I will try to find some time early next week to write that tutorial, will keep you posted.

      • djandji September 23, 2014, 4:00 pm

        GREAT ! thanks !

        Ideally, I would like to have something similar the Apple’s weather app style (for the page formatting )

        • Yelena October 29, 2014, 12:47 pm

          Also looking forward to the from scratch version of this!

  • bosss December 11, 2014, 8:29 pm

    How can you change the animation? lets say i want to be come in from the right or left when swiping?

    • Kevin May 26, 2015, 4:22 pm

      I would also like to know this

  • Bicudomeister October 10, 2015, 6:18 pm

    Help I get errors doing it….

  • Jack November 28, 2015, 10:30 pm

    Hi! This tutorial is really helpful. Thanks! I would also like to know how to set a cover page for a page based application.

Leave a Comment