Swift 4: How to add a circle point as a selection indicator to a UITabbarItem

Question

I want to display a little circle point as indicator to the selected UITabBarItem. How can i do this?

I use a custom UITabBarController. It looks like this:

import UIKit

class EventTabBar: UITabBarController {

override func awakeFromNib() {
    tabBar.barTintColor = UIColor.white
    tabBar.tintColor = UIColor(red: 79/255, green: 122/255, blue: 198/255, alpha: 1)
    tabBar.unselectedItemTintColor = UIColor(red: 198/255, green: 203/255, blue: 209/255, alpha: 1)
    tabBar.isTranslucent = false
    tabBar.shadowImage = UIImage()
    tabBar.backgroundImage = UIImage()

    //Add Shadow to TabBar
    tabBar.layer.shadowOpacity = 0.12
    tabBar.layer.shadowOffset = CGSize(width: 0, height: 2)
    tabBar.layer.shadowRadius = 8
    tabBar.layer.shadowColor = UIColor.black.cgColor
    tabBar.layer.masksToBounds = false
   }
}

Can i use the selectionIndicatorImage to do this?

Hope you can help me. Thanks for your answer

you can do this in didSelect method of tabbar ... run a loop on all tabs and remove dot from previous tab and add it at selectedTab. — Abu Ul Hassan, Aug 31 '18 at 11:17

score 2 · Answer 1 · answered Nov 15 '19 at 02:01

let size = CGSize(width: tabController.tabBar.frame.width / (amount of items),
                  height: tabController.tabBar.frame.height)

let dotImage = UIImage().createSelectionIndicator(color: .blue, size: size, lineHeight: 7)

tabController.tabBar.selectionIndicatorImage = dotImage

-

extension UIImage {
    func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()

        let innerRect = CGRect(x: (size.width/2) - lineHeight/2,
                               y: size.height - lineHeight - 2,
                               width: lineHeight,
                               height: lineHeight)

        let path = UIBezierPath(roundedRect: innerRect, cornerRadius: lineHeight/2)
        path.fill()

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}

JAHID HASAN POLASH · Answer 2 · 2018-08-31T12:14:59.280

0

It's pretty easy actually. TabBarButton has two properties to set image, one is TabBarItem.image and another is TabBarItem.selectedImage set an image without the circle point for TabBarItem.image property and set an image with circle point for TabBarItem.selectedImage property. If you want to set only the circle point for selected state, set the normal image property to UIImage(). Hope this solves the problem.

scanTabBarItem.image = UIImage.fontAwesomeIcon(name: .qrcode, textColor: .white, size: CGSize(width: 30, height: 30))
scanTabBarItem.selectedImage = UIImage.fontAwesomeIcon(name: .addressBook, textColor: .white, size: CGSize(width: 30, height: 30))

if not to show any image normally,

scanTabBarItem.image = UIImage()

edited Aug 31 '18 at 12:14

answered Aug 31 '18 at 11:57

JAHID HASAN POLASH

191
8

thanks for your answer... can you give my an example, which i can use it, this would be very helpfully for me, thanks – Niklas Aug 31 '18 at 12:00
Edited the answer. – JAHID HASAN POLASH Aug 31 '18 at 12:34
thanks for your update... but, I didn't want to show the circle inficator for the selected tab in the form of an image. I wanted to have it created programmatically. I have seen this guide: https://stackoverflow.com/a/33670450/10183816 how can I change the line to a circle indicator (like the Dock in macOS, when App is running) Hope you can help me again – Niklas Aug 31 '18 at 21:22

Swift 4: How to add a circle point as a selection indicator to a UITabbarItem

2 Answers2