iOS 10 更加貼心的 tab bar 客製

彼得潘的 iOS App Neverland

Jul 21, 2016·3 min read

傳說中，每次醒來看一眼超可愛的幸福太平羊，就可以幸福一整天。好了，看一眼就幸福滿滿了，不要太貪心，請先將眼睛視線移到下方的 tab bar 。在 iOS 10 ，tab bar 增添許多方便我們客製它容顏的屬性和方法，以下即是客製上圖 tab bar 的程式碼：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {// Override point for customization after application launch.  let tabBarController = self.window?.rootViewController as! UITabBarController  tabBarController.tabBar.tintColor = UIColor.yellow().  
  tabBarController.tabBar.barTintColor = UIColor.blue()
  tabBarController.tabBar.unselectedItemTintColor = UIColor.green()  let textAttributes = [NSForegroundColorAttributeName:UIColor.white()]  for controller in tabBarController.viewControllers!    {
      controller.tabBarItem.badgeColor = UIColor.orange()
      controller.tabBarItem.setBadgeTextAttributes(textAttributes, 
           for: .normal)
  }  return true}

好酒沉甕底，先讓我們瞧瞧 iOS 10 之前幾個控制 tab bar 的屬性。

1 tab bar 的 tintColor : 被點選的 tab 的文字和圖案顏色。

2 tab bar 的 barTintColor : tab bar 的顏色。

接著重頭戲來了，以下三個是 iOS 10 全新亮相的屬性和方法。

3. tab bar 的 unselectedItemTintColor : 未被點選的 tab 的文字和圖案顏色。

4 tabBarItem 的 badgeColor : 數字圓圈的背景顏色。

5 tabBarItem 的方法 setBadgeTextAttributes(_:for:) : 設定數字圓圈的文字屬性。

其方法宣告如下 :

public func setBadgeTextAttributes(_ textAttributes: [String : AnyObject]?, for state: UIControlState)

textAttributes 參數型別為 dictionary，可透過不同的 key 指定文字的屬性，比方 NSForegroundColorAttributeName 決定文字的前景顏色。

幸福太平羊插畫家亮亮簡介:
英文名字: Anby
生日: 4月1日
科系: NCKU ICID ( 成功大學創意產業設計研究所 )
職業: Seeed Studio 事業開發經理