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
<UICTFont: 0x7fa3c5d07350> 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.
