Create a Horizontal Paging UIScrollView with UIPageControl Swift 4 XCode 9

So, one of the very first things I had to do in iOS is develop the below onboarding interaction.

I could not actually upload the assets I used for the app, for NDA reasons, but I developed a similar interaction but a different set of assets. Don’t ask why I chose Winnie the pooh :) I have no idea!

I remember searching online for a couple of days to develop something as simple as this using Swift for the first time. So I thought this article might be helpful for someone like me who is just starting out in iOS.

For those of you, who would like to go to the sample app directly, here is the link

Step 1: Create a new project in XCode

Ensure that Swift is selected as the Language

Step 2: Adding the scrollview UI

Inside the main.storyboard, pick the UIScrollview from the Object Library and add it to the view controller. The UIScrollView should fill whole view as shown below.

Constraints for the scrollview

Step 3: Adding the pageControl to the UI

Pick a PageControl from the Object Library and add it to the controller. Ensure that the page control is outside the scrollview and not part of the scrollview.

Ensure that the page control is outside the scrollview and not part of the scrollview.

Step 4: Connect the ScrollView to Code

Click the Assistant button in the Xcode toolbar near the top right corner of Xcode to open the assistant editor.

Connect scrollview to ViewController.swift

In your storyboard, select the scrollview. Control-drag from the scroll view on your canvas to the code display in the editor on the right, stopping the drag at the line just below the existing outlets in ViewController.swift. In the dialog that appears, for Name, type scrollView & click Connect

Step 5: Adding Custom View

Choose File ->New ->File (or press Command-N).
Select Cocoa Touch Class, and click Next.
In the Class field, type Slide. In the “Subclass of field”, select UIView

Make sure the Language option is set to Swift

Step 6: Create a xib file

Right click on the portion of the screen where your project’s files are (view controller, storyboard, etc) and choose “new file”. Xcode will prompt you for which file type you’d like to create. Choose the “View” option under the User Interface menu. On the following pop up you’ll be prompted to name your xib — we called ours Slide

Slide.xib

Step 7: Designing our onboarding Screen

Click on the View and then on the right hand side of the screen in the “Identity Inspector” put the name of the UIView file (Slide) in as the Class

Drag an imageView and two labels from the Object library. You can rearrange the imageView and label based on your requirement. The constraints used in this project are as below:

You can change the attributes such as color, font, text size etc of the images and label accordingly.

Step 8: Add the imageView & labels from the previous step as an IB outlet in Slide.swift

Do the same for the two labels as well

You can download the assets for the project from here

Step 9: Setup scrollview pages in controller

Now that our UI is done, we can add some pages to the scrollview:

We are initializing a list of 5 [Slide] which will be added as a subView to the scrollView.

Now we need to call the above methods in our viewController.

We are explicitly setting the number of slides to our pageControl.

Step 10: Adding animation to scrollView

First, we need to set the scrollView delegate in our view controller.

Now override the scrollViewDidScroll method in the ViewController.

And that’s it! We’re done! Let’s run the app

Bonus

Thanks Ivan Suprynovich for providing this valuable piece of information.

We can add the following piece of code to our Controller.

OnboardingController.swift

The system calls this method when the iOS interface environment changes. When we rotate the device, the frame of the UIScrollView is recreated, so we need to recreate the slides in that case.

Thanks for reading! You can download the entire sample app from this github

Hope this was helpful!