一、问题描述
标签栏（UITabBar）在项目开发中经常会用到，它里面的每一个标签项（UITabBarItem）都可以设置不同的图片和标题文字。过去不管我们使用 iPad 还是 iPhone 运行程序，图片和文字都是垂直排列的（图标在上，文字在下）：
而当系统更新到了 iOS11 以上时，图片和文字在 iPad 下就变成了左右排列（iPhone 下仍然是上下排列）。
二、解决办法
iPad 下的这种左右排列方式是 iOS11 的新特性，如果想要改回上下排列的话可以通过重写 UITabBar 的 traitCollection 方法来实现。
方法1：自定义一个 UITabBar
（1）我们通过继承 UITabBar 来实现一个自定义的 tabbar，覆盖父类的 traitCollection 方法即可。
|
1
2
3
4
5
6
7
8
9
|
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 方法。
（2）运行效果同上：
|
1
2
3
4
5
6
7
8
9
|
extension
UITabBar
{
//让图片和文字在iOS11下仍然保持上下排列
override
open
var
traitCollection:
UITraitCollection
{
if
UIDevice
.current.userInterfaceIdiom == .pad {
return
UITraitCollection
(horizontalSizeClass: .compact)
}
return
super
.traitCollection
}
}
|
（2）运行效果同上：
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1900.html
OC中重写TraitColletion方法
//重写traitCollection方法,使UITabbar保持图为垂直排列,防止在ipad11出现水平排列
自定义TabBar
- (UITraitCollection *)traitCollection {
if (UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomPad) {
return [UITraitCollection traitCollectionWithVerticalSizeClass:UIUserInterfaceSizeClassCompact];
}
return [super traitCollection];
}