How to Implement Custom Animated Segmented Control With Collection View Instagram-like App (Followers/Following) Screen — Swift
With no doubts social media UX/UI designers of twitter, Instagram, or Facebook or any popular social media apps are very talented to come up with UI designs that are not only ease to use by us users but also attract users’ attention by its beauty. However, it can be challenging for mobile engineers to implement those sophisticated UI designs since they are given custom UI component to implement using UI frameworks such as UIKit or SwiftUI that might not include those UI components.
In this article 📝 we will have a look of how to implement one of Instagram’s UI components (followers/following segmented buttons) using UIKit basic components with swift:
Let’s break down the following UI components and dive into it to understand how its operating 🤔:
The UI above includes the following UI components:
- Custom view segmented buttons(Labels):
it has bottom border moves backward or forward as the user clicks/swipes to the left or right, if we take a look carefully at this component, the colour of button title’s changes to black as long as the border’s moving x value is less / greater than or equal buttons’ centre-width at x-axis for first button’s and second’s button respectively. - Collection view (horizontal scrolling):
its integrated with the custom segmented buttons in a way that as the user scrolls to the left/right not only the bottom border moves forward/backward but also the buttons’ title colour changes. - Table view:
serves as a custom cell for the collection view, it holds followers/following info such as profile image, username.
So far the magic behind the functionality becomes easy to implement using swift and IOS framework.
let’s have a look at the code of this simple app, at the end of this article you will see Github link of the project, if you want to follow along please download the project.
In the project there are two main classes ‘SegmentedButtonsView.swift’ and ‘MainViewController’, these classes have the core functionality of the app.
Let’s start with SegmentedButtonsView.swift:
The code above shows two different protocols, the first one is responsible for following up x value of scrollview’s contentOffSet, so the bottom border can move backward/forward as we scroll. The same concept is for the second protocol, as we click the buttons, the delegate notifies us where ever we implement it, for instance we need to know if the user clicks on which button in order to scroll the collection view backward or forward.
Now let’s have a quick overview about the code behind the creation of segmentedButtonsView:
Firstly as we can see ‘CollectionViewDidScrollDelegate’ protocol is implemented in order to follow up with x value of scrollview’s contentOffSet as I mentioned earlier, for triggering bottom border of the labels . Then, two view components is defined; one is for the selector view (bottom border) the other one for the labels to be selected inside the segmented view .
In addition, a delegate of SegmentedControlDelegate is defined for notifying other classes about the selected index of the segmented buttons view.
Now lets have another quick overview of how the UI components are configured:
As shown in the code section above configSelectedTap method is responsible for creating a border at the bottom of the view with a specific height and width, the width shall be same as the width of one segment.
createLabels method is responsible for creating an array of labels based on the number of given titles while creating an instance of SegmentedButtonsView.
In order to place the labels we have created in an organised way we need to put them in a horizontal stackView, therefor here comes configStackView method, its created for that purpose.
In the creation process one last thing to mention, as we track x-value of the scrollview from the protocol we implemented, we need to update the view(bottom border) for the user so here we override draw method from UIView class and we call createLabels, configStackView and configSelectedTap inside it.
Now what about the actions, how the selection functionality is managed, in other words, how the bottom border position changes as we select one label. Further more, how the collectionView is notified about the border position.
The method inside the code above has all the answers. Let’s have a deep look at this method, so as we click on each label, this method is called, we iterate each label in the array to check which label is selected by the user then, the position of the bottom border is changed accordingly. In addition, the index of selected label is passed through segmentedControlDelegate.
Congrats 👏🏻 🎉 you have made it to the final part of this article, now few more important methods left to be clarified:
So here comes the last method of ‘SegmentedButtonsView.swift’ class, we need to change the bottom border position as we scroll to the left/right as well as the background colour of each title in case the bottom border approaches the centre of title width, ‘collectionViewDidScroll’ delegate function takes a full responsibility of this requirement.
Keep it up, you have almost made it to the end 👏🏻, only three methods left.
Now let’s move to ‘MainViewController.swift’ class:
In the MainViewController.swift class, an instance of SegmentedButtonsView is created to be pined to the top of the MainViewController, and a delegate of CollectionViewDidScrollDelegate protocol is created as well to keep up with the scrollView changes.
The method above “Tells the delegate when the user scrolls the content view within the receiver”. Inside scrollViewDidScroll method CollectionViewDidScrollDelegate is set to SegmentedButtonsView instance, to notify SegmentedButtonsView about contentOffset’s x value changes, as a result the bottom border’s value on x-axis updates accordingly.
One last important feature left to explain, is that how collectionView scrolls as we click on the buttons whether ‘following’ or ‘follower’.
Well, in the code above there ‘SegmentedControlDelegate’ takes part, since ‘SegmentedControlDelegate’ protocol is implemented, ‘MainViewController.swift’ class will be notified about buttons selection status, based on the selected index the collectionView moves backward/forward.
That’s it you’ve made it to the end of this article 🥳, click on GitHub link to fork it into you repository, I hope it will help you to add something new to your projects.
