How to stop Tab Bar Item images' background width changing when tapped?

Question

When I click on tab bar item images their background (or whatever it is) width is increased. As you can see in the screenshot below image size is fixed but background width increases after I tap on any of them.

Does anyone know how to stop it happening?

Following is the code in my UITabBarController View

    for tabBarItem in (self.tabBar.items)!{
        tabBarItem.title = ""
        tabBarItem.imageInsets = UIEdgeInsetsMake(6.0, 0.0, -6.0, 0.0)

        let viewTabBar = tabBarItem.value(forKey: "view") as? UIView
        let imgView = viewTabBar?.subviews[0] as? UIImageView

        imgView?.frame.size.height = 32
        imgView?.frame.size.width = 32

        imgView?.clipsToBounds = true
        imgView?.backgroundColor = .red
    }

score 0 · Answer 1 · answered Dec 02 '18 at 12:28

Try adding that code inside viewDidLayoutSubviews(), Then instead of setting the imageView size and width just add the image as an image to the tabBarItem.

I don't know what name of the tab images you used are but for an example let's call the first image inside xcassests homeIcon, the second image middleIcon and the last image settingsIcon

This is the way I would subclass my TabBarController using those images and the other code to center the image without an image title inside viewDidLayoutSubviews().

class MyTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeController()
        let navVCHome = UINavigationController(rootViewController: homeVC)
        navVCHome.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "homeIcon"), tag: 0)

        let middleVC = MiddleController()
        let navVCMiddle = UINavigationController(rootViewController: middleVC)
        navVCMiddle.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "middleIcon"), tag: 1)

        let settingsVC = SettingsController()
        let navVCSettings = UINavigationController(rootViewController: settingsVC)
        navVCSettings.tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "settingsIcon"), tag: 2)

        viewControllers = [navVCHome, navVCMiddle, navVCSettings]
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        for tabBarItem in tabBar.items ?? [] {

             tabBarItem.title = ""
             tabBarItem.imageInsets = UIEdgeInsets(top: 6.0, left: 0.0, bottom: -6.0, right: 0.0 )
        }
    }
}

Sorry it didn't work. My actual issue is badge which doesn't sit on the top right corner of these icons because there is some width issue with these icons and I can't figure out why it's happening. None of the methods I've tried so far works. — DaveMS, Dec 03 '18 at 00:06
If it’s a badge issue you need to change the title or include it in the question. I didn’t see anything about a badge in either place — Lance Samaria, Dec 03 '18 at 03:32
Badge is suppose to be placed where it should be placed and it will be placed correctly if icons are placed correctly otherwise we will end up in repositioning badge all the time. — DaveMS, Dec 03 '18 at 18:08

score 0 · Answer 2 · answered Dec 03 '18 at 20:26

It should have been easy to spot by logical analysis alas! neither could I or anyone else figured it out.

There was a code which was changing the size of selected tab bar item image. I removed this code and it's working fine. As I wrote it my comment above if image sizes are correctly set then badge always position itself correctly and there is no need to reposition badges.

How to stop Tab Bar Item images' background width changing when tapped?

2 Answers2