Yalcin Ozdemir
Aug 20, 2018 · 4 min read

Most apps have a main action, Tweet on Twitter, Post on Instagram, Send Money on PayPal, Check-in on Swarm (Foursquare). You may be building an app that features a main action like these, so I wanted to write an article about how to create that center action for your app using Swift.

A main action is something that should be always visible and easily accessible. Therefore, you probably want to place this action at the center of your tab bar or top of your navigation bar. In this case, I will show you the most popular one, which is the center action button on a custom tab bar.

You can assign an action to your center button such as a popup view, a camera view controller or basically anything you want.

If you want to get to completed code, just scroll down to bottom to see my gist.

Here’s how it’s done step by step.

1. Create a custom tab bar controller

You will need a custom tab bar controller to play around with your tab buttons and actions.

class CustomTabBarController:  UITabBarController, UITabBarControllerDelegate {

2. Define all of your view controllers

Let’s say you have four tabs on your app and you want to have a center action with your action view controller which is a custom camera view. If you want to know how to build a custom view controller, here’s my article on that.

var homeViewController: HomeViewController!
var secondViewController: SecondViewController!
var actionViewController: actionViewController!
var thirdViewController: ThirdViewController!
var fourthViewController: FourthViewController!
override func viewDidLoad(){
super.viewDidLoad()
homeViewController = HomeViewController()
secondViewController = SecondViewController()
actionViewController = ActionViewController()
thirdViewController = ThirdViewController()
fourthViewController = FourthViewController()
}

3. Set tab bar item icons

Let’s set some icons for our tab bar to make it look nice first. Always set the selectedImage as well because your users would want to know which tab they are seeing (just like website menus).

We’ll do this in your viewDidLoad. Also, don’t forget to set your delegate (You will know why we did that in the step 6).

override func viewDidLoad(){
super.viewDidLoad()
self.delegate = self

Inside your viewDidLoad function, set your tab bar icons. Before you do that, make sure you have those images in your project as an asset.

homeViewController.tabBarItem.image = UIImage(named: "home")
homeViewController.tabBarItem.selectedImage =
UIImage(named: "home-selected")
secondViewController.tabBarItem.image = UIImage(named: "second")
secondViewController.tabBarItem.selectedImage = UIImage(named: "second-selected")
actionViewController.tabBarItem.image = UIImage(named: "action")
actionViewController.tabBarItem.selectedImage = UIImage(named: "action-selected")
thirdViewController.tabBarItem.image = UIImage(named: "third")
thirdViewController.tabBarItem.selectedImage = UIImage(named: "third-selected")
fourthViewController.tabBarItem.image = UIImage(named: "fourth")
fourthViewController.tabBarItem.selectedImage = UIImage(named: "fourth-selected")

4. Set tab bar’s view controllers

You would need to define which view controllers should be placed in your tab bar controller.

viewControllers = [homeViewController, secondViewController, actionViewController, thirdViewController, fourthViewController]

5. Remove tab bar titles

Most of the apps with center action button on their tab bar wouldn’t have the titles because title takes up so much space and they don’t look cool. Most of the time your icons would be enough to explain what that tab represents anyways.

Right after you define your viewControllers, remove the titles and center your icon.

for tabBarItem in tabBar.items! {
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}

6. Set action for center tab

To set an action for center tab, you would need to detect when the user taps on the tab and define the action for something else instead of showing the view controller as other tabs.

You need to use tab bar delegate function “shouldSelect” to accomplish this.

//MARK: UITabbar Delegatefunc tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {  if viewController.isKind(of: ActionViewController.self) {
let vc = ActionViewController()
vc.modalPresentationStyle = .overFullScreen
self.present(vc, animated: true, completion: nil)
return false
}
return true
}

Here, we check if the selected tab is the one we defined as an action view controller and if it is, do what we want.

In this example, I still showed the Action View Controller but in a full screen format where user would feel a whole new part of the app is presented.

You can do different kinds of things and you don’t event have to present any view controller set for the tab bar controller. As long as you return false in your “shouldSelect” delegate function, view controller won’t be shown.

Here’s the complete code.

Now let me know what is your state after reading this article in the comments section :)

Swift2Go

a place where Swift Developers share knowledge.

Yalcin Ozdemir

Written by

iOS Developer 🇨🇦

Swift2Go

Swift2Go

a place where Swift Developers share knowledge.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade