標簽欄（UITabBar）在項目開發(fā)中經(jīng)常會用到，它里面的每一個標簽項（UITabBarItem）都可以設置不同的圖片和標題文字。過去不管我們使用 iPad 還是 iPhone 運行程序，圖片和文字都是垂直排列的（圖標在上，文字在下）：

image.png

而當系統(tǒng)更新到了 iOS11 以上時，圖片和文字在 iPad 下就變成了左右排列（iPhone 下仍然是上下排列）。

image.png

iPad 下的這種左右排列方式是 iOS11 的新特性，如果想要改回上下排列的話可以通過重寫 UITabBar 的 traitCollection 方法來實現(xiàn)。

方法1：自定義一個 UITabBar

（1）我們通過繼承 UITabBar 來實現(xiàn)一個自定義的 tabbar，覆蓋父類的 traitCollection 方法即可。

    class MyTabBar: UITabBar {
        //讓圖片和文字在iOS11下仍然保持上下排列
        override open var traitCollection: UITraitCollection {
            if UIDevice.current.userInterfaceIdiom == .pad {
                return UITraitCollection(horizontalSizeClass: .compact)
            }
        return super.traitCollection
        }
     }

方法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
      }
  }

OC中重寫TraitColletion方法
重寫traitCollection方法,使UITabbar保持圖為垂直排列,防止在ipad11出現(xiàn)水平排列

自定義TabBar

- (UITraitCollection *)traitCollection {

    if (UIDevice.currentDevice.userInterfaceIdiom ==  UIUserInterfaceIdiomPad) {

        return [UITraitCollection traitCollectionWithVerticalSizeClass:UIUserInterfaceSizeClassCompact];

    }

    return [super traitCollection];

}

seeyou.jpg.png