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.
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 cocoapodsOnce 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 installIf 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 installAnalyzing 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.
