iPadOS 15 UITabBar title cut off

Question

Since I upgraded my iPad operating system, the title of the UITabBar of my app is showing truncated, as shown in the screenshot.

I have tried some methods, but I have not found the correct solution.

Hope someone can help me.

And Here is code:

func setupTabBar() {
    if #available(iOS 13, *) {
        let appearance = tabBar.standardAppearance
        appearance.configureWithOpaqueBackground()
        appearance.backgroundImage = UIImage(color: .white)
        appearance.shadowImage = UIImage(color: .clear)
        let normalAttrs: [NSAttributedString.Key: Any] = [.foregroundColor: ThemeColor.gray]
        let selectedAttrs: [NSAttributedString.Key: Any] = [.foregroundColor: ThemeColor.red]
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = selectedAttrs
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = normalAttrs
        appearance.inlineLayoutAppearance.selected.titleTextAttributes = selectedAttrs
        appearance.inlineLayoutAppearance.normal.titleTextAttributes = normalAttrs
        appearance.compactInlineLayoutAppearance.selected.titleTextAttributes = selectedAttrs
        appearance.compactInlineLayoutAppearance.normal.titleTextAttributes = normalAttrs
        UITabBar.appearance().standardAppearance = appearance
    } else {
        tabBar.backgroundImage = UIImage(color: .white)
        tabBar.shadowImage = UIImage(color: .clear)
    }

    if #available(iOS 15, *) {
        UITabBar.appearance().scrollEdgeAppearance = UITabBar.appearance().standardAppearance
    }
}

Elly

Where is the code? – Himmler

Answer 1

For some reason, it seems that setting the titleTextAttributes is what causes the problem to happen with inlineLayoutAppearance, and including the default paragraph style of NSParagraphStyle.default fixes it.

For your code, the following changes should fix it (as of iOS 15.0).

let normalAttrs: [NSAttributedString.Key: Any] = [.foregroundColor: ThemeColor.gray, .paragraphStyle: NSParagraphStyle.default]
let selectedAttrs: [NSAttributedString.Key: Any] = [.foregroundColor: ThemeColor.red, .paragraphStyle: NSParagraphStyle.default]

Shem

thank you! Saved my life! (iPad app on iOS 15) – Khalilahkhalin

This didn't entirely fix it for me. Setting the default paragraph style stops the ellipsis being added but the text is still getting clipped as if the label frame is not large enough. This is using a custom font on an iPhone app on iOS 15. – Sewel

Answer 2

For those that cannot have a default paragraph style, setting the attributes for most States got the OS to size the labels correctly for me.

Swift 5.0:

    UITabBarItem.appearance()
        .setTitleTextAttributes(
            customAttributesWithCustomParagraphStyle,
            for: [
                .normal,
                .highlighted,
                .disabled,
                .selected,
                .focused,
                .application,
            ]
        )

Without setting it for at least .normal and .selected, the UITabBarItem title gets truncated when used with custom attributes.

Retinite

Answer 3

I spent another hour today struggling with this issue. It seems that the custom font caused the problems for me:

NSDictionary *attributesForNomalState = @{
    NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:UIFont.systemFontSize],
    NSForegroundColorAttributeName: [self colorForName:tabBarItemColor]
};

But, I noticed that it works properly if I assign a constant string like this:

tabItem.title = @"Test1";

However, when I use the Localized string, the title is truncated! Also it works for me if I append a space to the localized string using stringWithFormat function. Crazy. If somebody knows why this urgly workaround works, I would be interested in your comment!

Aspersion

Answer 4

This approach helped me, I used SnapKit to create constraints:

import SnapKit

extension UITabBarController {
    
    open override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        tabBar.subviews.forEach { barButton in
            barButton.subviews.forEach { subview in
                if let label = subview as? UILabel {
                    let intrinsicWidth = label.intrinsicContentSize.width
                    label.snp.makeConstraints {
                        $0.width.equalTo(intrinsicWidth)
                        $0.centerX.equalToSuperview()
                        $0.bottom.equalToSuperview().inset(2)
                    }
                }
            }
        }
    }
    
}

Incendiary