当前位置: > > > Swift - 让TabBarItem的图标和文字在iPad下仍然是上下排列

Swift - 让TabBarItem的图标和文字在iPad下仍然是上下排列

一、问题描述

标签栏(UITabBar)在项目开发中经常会用到,它里面的每一个标签项(UITabBarItem)都可以设置不同的图片和标题文字。过去不管我们使用 iPad 还是 iPhone 运行程序,图片和文字都是垂直排列的(图标在上,文字在下):

而当系统更新到了 iOS11 以上时,图片和文字在 iPad 下就变成了左右排列(iPhone 下仍然是上下排列)。

二、解决办法

iPad 下的这种左右排列方式是 iOS11 的新特性,如果想要改回上下排列的话可以通过重写 UITabBar traitCollection 方法来实现。

方法1:自定义一个 UITabBar

(1)我们通过继承 UITabBar 来实现一个自定义的 tabbar,覆盖父类的 traitCollection 方法即可。
class MyTabBar: UITabBar {
    //让图片和文字在iOS11下仍然保持上下排列
    override open var traitCollection: UITraitCollection {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return UITraitCollection(horizontalSizeClass: .compact)
        }
        return super.traitCollection
    }
}

(2)然后代码中使用这个自定义的 tabbar,运行效果如下:

方法2:扩展 UITabBar

(1)如果想让项目中所有的 tabbar 都改成垂直排列图标和文字,可以直接对 UITabBar 进行扩展,重写其 traitCollection 方法。
extension UITabBar {
    //让图片和文字在iOS11下仍然保持上下排列
    override open var traitCollection: UITraitCollection {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return UITraitCollection(horizontalSizeClass: .compact)
        }
        return super.traitCollection
    }
}

(2)运行效果同上:
评论0