Written by Kelvin Tan
Swift 4.2 | Xcode 10
OVERVIEW
You probably have seen some animations done on the Onboarding screen as you scroll through the screen. There are many different ways to create an animation screen, you could either use a third party library or write your own code. We’ll choose the latter approach and demonstrate how this can be done.
Before we begin, let me show you some of the animation that we will be doing here so you can have a glimpse of an idea. We will be using CollectionView as compared to the traditional PageViewController.
This is an animation Onboarding screen for Kaodim iOS app
STORYBOARD DESIGNING
Step 1: Create a VIEW CONTROLLER
The Collection View constraints is equal to the superview. The top right button is the skip button which will be visible in all three screens. The middle label is the description of each screen and the middle button is the get started button which will only appear on the third screen. All this can be configured in the class once we have created them later.
Step 2: Create a XIB FOR EACH COLLECTION VIEW CELL
You can do that by navigating to File > New > File > View (Found under User Interface)
Once you have your own XIB, you could create a View and store all the UIImages and create a constraint. If you are curious why are we setting the constraint, you could look at the GIF again and you’ll notice that we are making room for Label, Button and PageControl.
Our designer did a really good job in creating many different layer of images which makes our job a lot easier. In our case, we have many different layer of images. By doing this, we could basically animate all the images.
CLASS STRUCTURE
The structure that is shown here is a UIViewController with three UICollectionCell. I hope you get the idea that each cells is an individual screen where we will be creating our own animations and viewcontroller is where we register each cell into our collection view which we inserted manually from the object library.
Step 1: Create a Collection view cell
This can be done by navigating to File > New > File > Cocoa Touch Class and subclass of UICollectionViewCell. Once you are done, you should see a class with the following information or to whatever name you have given to your file. In my case, it’s OnboardingFirstCollectionViewCell.
You could connect the newly created class with your XIB by connecting the identifier and the class. If you are not aware where are they, you can go to your XIB file and look for the following information shown below.
Once we have all this, we are good to create an IBOutlet for the leading constraint of our object since we only want the object to move left/right in this case. You could do that by adding a new constraints and the constraint will appear on the left navigation which you could drag to the class.Once we have all this, we are good to create an IBOutlet for the leading constraint of our object since we only want the object to move left/right in this case. You could do that by adding a new constraints and the constraint will appear on the left navigation which you could drag to the class.
Lastly, we’ll create a function in that same class for the animation.
Step 2: Create a VIEW CONTROLLER
This is where you will create the functionality whether to show whatever button on which screen. But before that, let’s register our XIB classes. So far we only have one and it’s called OnboardingFirstCollectionViewCell and you could definitely create more if you want. You could simply do that with the following code.
With that being said, you will have to create an @IBOutlet for your Collection View in order for this to work.
And the next thing we need to do is, at this point, I would also assume that both protocol UICollectionViewDataSource and UICollectionViewDelegateare being declared and you will do your usual of assigning the datasourceand the delegate to the collection view.
Now if we are ready with those steps, we could go ahead and inherit the function of the protocol and assign our cell and you may fill up the rest of the necessary functions according to your requirements.
We are using func scrollViewDidScroll(_ scrollView: UIScrollView). In our case we determine which screen to show based on a float that we created by dividing our scrollView.contentOffset.x with collectionView.bounds.size.width.
On the other hand, for the animation to take place, we created a value based on our Offset multiplying 150 divided by the width of the collectionview. And this kinda determines how far the object will go. The lesser the value, the closer the object will move from it’s initial position.
For a more graphical explanation, let’s imagine that the red square is the swiping box meaning the user is still in the screen if swiping within the box. However, if the user tries to swipe past the box meaning more than 0.5, the second screen appears.
Yes, lots of calculation are being done here and I credit my colleague August for coming up with this idea and I couldn’t have possibly done it without his help. I’ve always enjoy and learning from different knowledge from different developers.
Of course there are many different ways to create your own Onboarding screen. Whatever works for you and in our case, this works for us. It is definitely not perfect and we certainly do hope in the future that we could continue to improve.
If you ever wonder what Kaodim is all about, feel free to check out our site at www.kaodim.com . We are known for the #1 Service Marketplace in South East Asia having presence in Malaysia, Singapore, Indonesia and Philippines.
You can read the original article at https://medium.com/kaodim-engineering/onboarding-animation-with-auto-constraint-965172e18245