If you had to do an onboarding for any of your apps, you have probably searched for a third-party library that solves the logic for you. Although there’re a bunch of pretty cool libs for onboarding out there, you can do it yourself in a couple of steps.
Doing things yourself eliminates the third-party dependencies, which means for example, that you don’t need to worry if the library is currently maintained or if it’s up to date to the latest versions of swift. And also (the funniest part), it gives you the possibility to learn a lot in the process.
So, in this article I want to show you how you can create a simple (but effective and flexible) onboarding like this.
We’re going to need only two components for our onboarding view: a UICollectionView with a custom UICollectionVIewFlowLayout and a UIPageControl.
The first step is to define the custom UICollectionViewCell that is going to have the information that we want to show in our carousel. Just to simplify things let’s add only an image and a descriptive text to our cell.
Next, we need a brand new UIView that’ll help us hold the carousel configuration.
We’re almost done. However, we’re missing the most important setup. In order to make our collection view scroll horizontally, we must create a custom UICollectionViewFlowLayout. So, let’s do this in a new extension inside our CarouselView.
Now we have everything in place to run the code. We only need to create a new instance of the CarouselView, add it to the ViewControllers’s view, and call the configureView function with the data that we want to show.
You’ll notice that there’re a couple of errors that we should fix.
- We should only see one cell on the screen.
- We should only scroll one page at a time.
- We should change the current page control when we scroll to a new cell.
To see only one cell on the screen we need to set the UICollectionViewLatout’s minimumLineSpacing property. This is the space between items of the same section. We must set the separation between items as the superview’s width minus the item size width.
If you run the code again you’ll notice that we now only see one cell on the screen but it isn’t centered. Well, to fix that we must change the carouselLayout’s left and right insets. Think about what we just configured, we set the space between items as the super view width minus the item’s width. Now we only need to add the space between the super view left and right side to our collection view.
This is half of the super view’s width minus the item’s width because it is only going to be applied to the first and the last cell.
We also have to limit the scrolling to only one cell at a time. We can achieve this behavior by setting the isPagingEnabled property of our UICollectionView to true.
The only missing part is updating the page control when we swipe to a new cell. This is a tricky thing to do, however, the whole idea behind it is to get the middle point of our collection view, and then try to get the index path of that point by calling carouselCollectionView.indexPathForItem(at: visiblePoint).
At this point, we just have to update our currentPage variable every time we scroll.
And every time we update the current page we have to update the page control’s current page as well.
And there you go, a simple and full customizable onboarding view. The cool thing about doing it yourself is that if eventually you want to show a different layout on the onboarding, you only need to change the UICollectionViewCell and the CarouselData struct. The rest of the code can stay untouched.
If you want to animate the background view when scrolling between pages I recommend checking the repo with the full code here. You’ll only need to add a custom delegate in the CarouselView to notify the page change.
