How to implement Android-Like Tab Layouts in iOS using swift 4 (Sliding Tabs/Segments)
Hi all my fellow IOS developers. Here I come with an awesome tutorial on creating sliding tabs or segments, like Android tab layouts in IOS. There are many ways, to achieve this kind of functionality, I had achieved these in two ways, by using UIPageViewController and CollectionView to show content Pages/views. For displaying Tabs, I used CollectionView. Let’s go in-details…
Tabs View:
First we create tabs view, on a plain UIView() object, with the help of CollectionView. Here our class is “MenuTabsView”, sub class of UIView, which confirms to collection view delegates and flowlayout delegate.
Next, add a helper variable or flag property, for tabs distribution. if this is true, All the tabs will be filled with equal size, and with respect to the screen. if false, tabs are laid according to their title sizes.
Next, the collection view needs, data source, to show titles or headers. So, let’s give an array property, for that.
Next, We need a protocol for communication between this tabs view and the Container view, which holds the tabs view, for swiping/ transitioning views. After the protocol defining, define a variable for collection-view cell identifier as well. Later define initialisers for the class.
If you see in above code, There is a function, called in the both initialisers. we used that customIntislizer() method, to register the collection-view cell, add that collection-view on view, and to give constraints.
we can give constraints to our views or sub -views in many ways, one of them is in visual format language. So, to pass those constraints, I defined a helper method, which reduces my pain to pass visual format constraints in my project. it is like this…
customIntializer func: defined as private, as it doesn’t need out side of the class.
Next, Remember we defined a property for data source for the tabs collection view. with the help of that, we show tabs. As soon as the dataArray, is set, we reload the collection-view.
Collection-View Delegate Methods:
The following are collection-view delegate, datasource and collection view delegate flow layout methods. please have a look on the following images, they are self explanatory.
Now, Remember we registered a cell called BasicCell, for the above collection-view. let’s see that class now.
The cell has one Label, to show the header title, one indicator view, like an underline, to show the selected tab. We can configure more as we like, with the help of background, and label’s properties. Both these components are defined, and had been given constraints. On selecting the cell, we are configuring the selected cell, by overriding the “isSelected” property on cell.
Tabs View has been done.
We use this tabs view in a view controller. So, take a class, and then take a sub view with height around 50, on top of the view controller scene. x and y co ordinates are 0,0. width equals with the view-controller’s width.
Next, define the following properties and configure the menuBarView. later assign delegates to self, for the required ones and then configure for the intial display of the screen. We use here UIPageViewController, for content views container, which will be added as a child view-controller in our viewcontroller’s view.
Next, take one UIPageViewController and one ViewController from object library, and assign the following classes for them.
Next, Define the following helper methods, which we used in viewDidLoad as well.
Next, any where in your project, define the following protocol, which we defined in menuBarView class. if you like define this just above the menuBarView class.
Next, define all the delegate methods. Please go through the following delegate methods, which are self explanatory.
That’s all. Run your project now, you can see the above out put, functions like Android like tab layouts. to get the source code visit here.
Thanks for reading my tutorials. Please suggest your opinion on how I can improve my self in programming and tutorials. Thanks a lot…
