iPadOS 15系统升级后应用UITabBar标题显示截断问题如何解决？

问题根因 #

iPadOS 15对UITabBar的布局逻辑做了重构，设备常规宽度下默认启用图标与标题横向排列的inline布局模式，你当前的配置仅设置了标题颜色，未指定字号、换行规则等文本属性，系统默认的宽度计算逻辑异常导致标题截断。

解决方案 #

方案1：补充完整文本属性配置

修改你现有代码中normalAttrs和selectedAttrs的配置，补充字体、段落样式属性，确保系统能正确计算标题宽度：

func setupTabBar() {
    if #available(iOS 13, *) {
        let appearance = tabBar.standardAppearance
        appearance.configureWithOpaqueBackground()
        appearance.backgroundImage = UIImage(color: .white)
        appearance.shadowImage = UIImage(color: .clear)
        
        // 新增段落样式，指定换行规则
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineBreakMode = .byTruncatingTail
        paragraphStyle.alignment = .center
        
        // 补充字体、段落样式属性
        let normalAttrs: [NSAttributedString.Key: Any] = [
            .foregroundColor: ThemeColor.gray,
            .font: UIFont.systemFont(ofSize: 10, weight: .regular),
            .paragraphStyle: paragraphStyle
        ]
        let selectedAttrs: [NSAttributedString.Key: Any] = [
            .foregroundColor: ThemeColor.red,
            .font: UIFont.systemFont(ofSize: 10, weight: .regular),
            .paragraphStyle: paragraphStyle
        ]
        
        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
    }
}

方案2：强制使用堆叠布局（更省心）

如果你的设计不需要iPad下横向排列的标签栏样式，可以强制全局使用图标在上、标题在下的堆叠布局，从根源避免横向宽度不足导致的截断，在iOS15适配块中新增一行配置即可：

if #available(iOS 15, *) {
    UITabBar.appearance().scrollEdgeAppearance = UITabBar.appearance().standardAppearance
    // 强制使用堆叠布局
    UITabBar.appearance().preferredItemAppearance = .stacked
}

可选调整项

如果上述方案配置后仍有轻微截断，可以按需给布局配置添加标题偏移调整：

// 按需调整horizontal和vertical的数值
appearance.stackedLayoutAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -1)
appearance.inlineLayoutAppearance.normal.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 0)

问题截图 #

内容的提问来源于stack exchange，提问作者x_z