iOS tutorial: Create a complete walkthrough

Create an iOS application walkthrough component using open sources Sejima framework.

What is Sejima framework

This brand new framework provides commonly used user interface components to reduce development time as well as reduce drastically code duplication.

It can also be used by Sketch app users since the framework repository contains a Sejima.sketch file with all available components to help designers build the application screens.

Overview

This tutorial aims to build the following walkthrough component that we can find in most modern mobile applications almost using Storyboards only.

Image from @Arafat Shadhin — QuickFitApp concept

Create xCode project

Start xCode and create a Single View App then type “Next” button and name the project “Walkthrough”.

Using Cocoapods

You can install the framework with either Cocoapods or Carthage. Let’s choose Cocoapods for this tutorial. If you don’t have it installed on your computer, open your favorite Terminal application and run the following command.

sudo gem install cocoapods

Once Cocoapods has been installed, go to your project path using your terminal and type the following pod command to setup your project workspace.

cd Desktop/Walkthrough/
pod init
pod install

If every things works fine, you should see the following in your terminal.

Analyzing dependencies
Downloading dependencies
Generating Pods project
Integrating client project
[!] Please close any current Xcode sessions and use `Walkthrough.xcworkspace` for this project from now on.
Sending stats
Pod installation complete! There are 0 dependencies from the Podfile and 0 total pods installed.

Close your xCode project and as stated above, open the Walkthrough.xcworkspace in xCode.

Install Sejima Framework

Open the Podfile from the Pods project and add the Sejima framework dependency.

pod 'Sejima'

Go back to your terminal and type the install command to make sure Sejima framework is added to your project.

pod install
Analyzing dependencies
Downloading dependencies
Installing Sejima (0.1.6)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed.

Let’s build the walkthrough

Page control

Now that the project is all set, we can start “coding” our walkthrough. Open the Main.storyboard file and add a UIView with the custom class MUPageControl with the shown layout constraint below.

Horizontal pager

To have multiple screen scrollable for our walkthrough pages, add a UIView with custom class MUHorizontalPager with the following layout constraints.

Change the Horizontal Margin to 20 from the Attributes Inspector panel.

Skip button

Finally let’s add the skip button by adding a UIView with custom class UIButton with it’s constraints.

Tweak the component properties

We will now change the available components properties exposed by the Sejima framework directly in the storyboard form the Attributes Inspector.

Main view

Change the main view Background Color to #373E40.

Skip button

Change the button Title, Title Color and the Background Color to Clear Color.

Page control

Define the Number of Pages and the Current Page Color as well as the Page Indicator Color. Change also the Background Color to Clear Color.

The View Controller is automatically updated to reflect the components properties changes.

Add the walkthrough content

Add a new UIViewController in the storyboard and add a UIImageView with the following layout constraints. Change the Content Mode to Center from the Attributes Inspector panel.

Title and detail text component

Add a new UIView with the custom class MUHeader with the following layout constraint.

Change the Title and Detail properties from the Attributes Inspector panel. Don’t forget to change the Background Color to Clear.

That’s it for the design part.

Let’s do some coding

Open the ViewController.swift file and update it as below.

Custom walkthrough content class

Create a new custom class named WalkthroughContentVC.swift as a subclass of UIViewController and update it with the following code.

Link Outlets

Open your Main.storyboard file and update the view controller Outlets from the Connections Inspector panel.

Select the walkthrough content view controller and define the custom class being WalkthroughContentVC.

Finally for the same view controller define the Outlets.

You can find the complete example in the Sejima framework provided Sample app.