Add a box around the selected tab bar item - ios

Question

I would like to do something in the vein of having a box appear or a circle around the tab bar item that the user has selected other than just changing the color. Is this even possible and if so how? Thanks in advance.

Answer 1

There are various ways to achieve this. I will list down 3 of them below.
1) You can set selectionIndicatorImage like this in AppDelegate,
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
UITabBar.appearance().selectionIndicatorImage = #imageLiteral(resourceName: "boxImage")
return true
}
For the rest of 2 you have to create a subclass of UITabBarController like below and set this class in the storyboard for the tabBarController
class MyTabBarViewController: UITabBarController {
}
2) In this method you have to ask your designer to create the selected images with box. Set the unselected/normal and selected images like below in viewDidAppear and you are done.
3) Add an imageView in tabBar like below. In storyboard, you can assign tag for each tabBar item so that in the didSelect item callback, we will consider the tag as index of the selected item. Lets consider you have 5 tabBar items and you assigned tags from 0 to 4. Now you will just get the tag and update the position as shown below
class MyTabBarViewController: UITabBarController {
// MARK: - Properties
let imageView = UIImageView(image: #imageLiteral(resourceName: "boxImage"))
// MARK: View's Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
self.tabBar.addSubview(imageView)
}
/// Tabbar item selection callback
override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
updateImagePosition(at: item.tag + 1)
}
private func updateImagePosition(at index: Int) {
guard let count = tabBar.items?.count else { return }
let eachItemWidth = view.bounds.width/CGFloat(count)
let selectedItemX = (eachItemWidth * CGFloat(index)) - eachItemWidth/2 - imageView.frame.width/2
let selectedItemY = tabBar.bounds.height/2 - imageView.frame.height/2
imageView.frame.origin = CGPoint(x: selectedItemX, y: selectedItemY)
}
}