iOS TabBar item title issue in iOS13

Question

I am having issue in tabBar title for iOS13 on compiling from Xcode 11.It works perfect whle compiling from Xcode 10.Please find the screenshot for the issue and below is the co

Answer 1

It is bug in iOS 13 API, which initialise tabBarButtonItem's label with incorrect font size.

I tried to print font size of label via following code inside viewWillLayoutSubviews

override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        self.tabBar.subviews.forEach { (barButton) in
            if let label = barButton.subviews[1] as? UILabel{
                print(label.font ?? "NULL font")
            }
        }
    }

and it printed following log

 font-family: ".SFUI-Medium"; font-weight: normal; font-style: normal; font-size: 10.00pt

It showed font family different than what I set via UITabBarAppearance. So I've used UITabBarItem.appearance(). After setting this property, I ran above code again and it showed me correct font family.

But What is happening inside? I think First UIKit will try to calculate bounds of label by default font size (It totally ignores font set by UITabBarAppearance). So bounding box calculated for label is also smaller and hence text gets truncated. But UIKit respects value set by UITabBarItem.appearance() and will calculate correct bounds for label.

I solved this problem with following approach.

class MainViewController: UITabBarController {


    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        self.updateTabBarAppearance()
        self.setupChildViewControllers()

    }

    fileprivate func setupChildViewControllers(){
        let vc1 = ViewController()
        vc1.tabBarItem = UITabBarItem(title: "Home", image: UIImage(named: "home"), selectedImage: UIImage(named: "home"))
        let viewControllerList = [vc1]
        self.viewControllers = viewControllerList.map { UINavigationController(rootViewController: $0) }
    }

    fileprivate func updateTabBarAppearance(){

        if #available(iOS 13.0, *){

            let tabBarAppearance = UITabBarAppearance()
            let tabBarItemAppearance = UITabBarItemAppearance(style: .stacked)

            tabBarItemAppearance.normal.titleTextAttributes = [
                .font: UIFont.themeFont(ofSize: 12, weight: .medium),
                .foregroundColor: UIColor(red: 31/255, green: 42/255, blue: 85/255, alpha: 0.5),
            ]

            tabBarItemAppearance.selected.titleTextAttributes = [
                .font: UIFont.themeFont(ofSize: 12, weight: .bold),
                .foregroundColor: UIColor(red: 7/255, green: 111/255, blue: 236/255, alpha: 1),
            ]

            tabBarAppearance.stackedLayoutAppearance = tabBarItemAppearance
            tabBar.standardAppearance = tabBarAppearance

        }else{

            tabBar.shadowImage = UIImage()
            tabBar.backgroundImage = UIImage()
            tabBar.backgroundColor = .white

        }


        // This is helping us to achive our effect
        // We are setting font of same size but higher (or same) weight than our actual font
        // This will create label bigger than actual size, so it does not gets truncated.
        // But by creating bigger label, text will be aligned left

        // To solve that see `viewWillLayoutSubviews` method

        UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont.themeFont(ofSize: 12, weight: .bold)], for: .normal)
        UITabBarItem.appearance().setTitleTextAttributes([.font: UIFont.themeFont(ofSize: 12, weight: .bold)], for: .selected)
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        self.tabBar.subviews.forEach { (barButton) in
            if let label = barButton.subviews[1] as? UILabel{
                // We will find the label and make this center align
                label.textAlignment = .center
            }
        }
    }

}

Also check the viewWillLayoutSubviews implementation to make label content centre align.