TabsController - Update titles of tabs looks wrong

[fgroeger]

When updating the title of the tabs in a TabsController, it looks weird as seen on the screenshot below. We also created an example project for you to check it out.
Calling tabBar.setNeedsLayout() directly after the title change, it works on iPhone SE, but not on iPhone 8.

MaterialTabBarTitleTest.zip

[daniel-jonathan]

That is because the tabs are being shrunk down. Have you tried the tabs with the scrolling option which should avoid such an issue?

[fgroeger]

We also enabled scrolling behaviour by default, instead of automatic, but then the tab bar is not the full width, if the tab titles are not long enough..

[daniel-jonathan]

I'll take a look at your sample project. Thank you!

[daniel-jonathan]

Give this a try, Material 2.13.7. I updated your code as follows:

import UIKit
import Material
import Motion

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let viewControllers = [
            makeViewController(backgroundColor: .red),
            makeViewController(backgroundColor: .green),
            makeViewController(backgroundColor: .blue),
            makeViewController(backgroundColor: .yellow)
        ]
        
        let tabsController = TabsController(viewControllers: viewControllers)
        tabsController.tabBarAlignment = .top
        tabsController.tabBar.dividerAlignment = .bottom
        tabsController.tabBar.lineHeight = 2
        tabsController.tabBar.heightPreset = .small
        
        addChildViewController(tabsController)
        view.addSubview(tabsController.view)
        view.layout(tabsController.view).edges(top: 50)
        
        Motion.delay(3) {
            viewControllers.first?.tabItem.title = "abcdef (10) really long"
            tabsController.tabBar.setNeedsLayout()
            tabsController.tabBar.layoutIfNeeded()
        }
    }
    
    func makeViewController(backgroundColor: UIColor) -> UIViewController {
        let vc = UIViewController()
        vc.view.backgroundColor = backgroundColor
        vc.tabItem.title = "abcdef"
        
        return vc
    }
}

I made your text longer and used Motion to set a time delay. As well, for the edges layout, you can do this, and the rest of the values are defaulted to 0.

view.layout(tabsController.view).edges(top: 50)

Thank you for sharing this issue and if you have any further trouble, please reopen this issue or create a new one.

[fgroeger]

Thank you, we will try it out today!

[fgroeger]

We tried it out, with your example, abcdef (10) really long as title, it works as expected. But with our shorter title, abcdef (10), it still doesn't work. We think it is a problem with the tabItemsTotalWidth calculation in TabBar.swift line 359, because it calculated 352 as totalWidth, but scrollView width is 375 (on iPhone 8) and the first item title is truncated in the middle.

[daniel-jonathan]

Hmmm... I will try your sample again.

[daniel-jonathan]

I am not sure exactly why, but the issue is your () characters. It causes the ... to appear between it and it's previous character.

[fgroeger]

Hmm, if we replace the (10) with i10i for example, it is the same behaviour. Even removing the space character didn't solve the problem.

[daniel-jonathan]

Weird... this is something in the String system I would think. Very interesting.