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 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
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.
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.
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.
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
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
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:
Step 8: Add the imageView & labels from the previous step as an IB outlet in Slide.swift
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
Thanks Ivan Suprynovich for providing this valuable piece of information.
We can add the following piece of code to our Controller.
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