Floating Custom Tab Bar iOS Swift 4.2

iCoder86
3 min readDec 6, 2018

--

Last week my designer gave me a screen for the app to design. The app design was having custom floating tab bar on it. I searched a lot to achieve the design, meanwhile I found a way to achieve my needs. Here is the original blog I found for my needs.

Usage App

Following will guide you how I implemented.

Step1: Create a single view application on xCode for iOS. Name it CustomTabBar or from your choice.

Single View App

Step2: Rename the default ViewController To TabViewController.

Rename default controller

Change the Class name of ViewController on Storyboard as shown in picture below.

Connect Storyboard with TabViewController

Step3: Add UIView at the footer of the view with given constraints.

TabView at the footer

Step4: Add the buttons in TabView and embed it in UIStackView, give the constraint to the stackView and change its distribution to Fill Equally as shown in picture below.

UIButtons in UIStackView

Setp5: Name all the button according to the tabs of your choice and connect their action to event named tabChanged.(We will create a action on TabViewController.swift file) Create four ViewControllers to connect them with each buttons on tabView.

Connect all the controls

Change buttons tag from 0 to 3 in a sequence.

Tag the buttons sequence

Step6: Code for FirstViewController.swift and TabViewController.swift

You can download sample code here.

Note: This tutorial doesn’t use views or memory as effective as standard iOS tab bar, mainly not applicable for production on its current state. Use it with cautious, customising original tab bar isn’t that hard, so use it wisely.

--

--