設置 TabBarItem 選中時的圖片及文字顏色

TabBarController 是在 ios 開發過程中使用較為頻繁的一個 Controller，但是在使用過程中經常會遇到一些問題，例如本文所要解決的，如何修改 TabBar 選中時文字及圖片的顏色。

如果需要，可以從這里下載完整的代碼。

首先，我們創建一個新的項目，使用 TabBarController，並為該 TabBarController 的 Child Controller 中的 TabBarItem 設置默認圖片以及選中時的圖片，如下圖所示：

storyboard:

tab bar items:

image assets：

我們將 tab bar item 的默認圖片是設置為灰色圖，選中后是紅色圖。編譯運行該項目，會發現並不是我們所期望的，貌似我們的設置的選中圖片並沒有生效呀~~（其實是生效的，只是圖片顏色不對罷了~不信的話，可以將selected image和image設置成不同的圖片看看哦~）

 

通過查看下 ios 中生成 tab bar item 的 api 可以發現：

原來 UIImage 在呈現(render)時會選擇對應的呈現方式(render mode)，ios提供了3種render mode，分別是

值	意義
UIImageRenderingModeAutomatic	根據圖片的使用位置自動調整渲染模式（默認值）
UIImageRenderingModeAlwaysOriginal	始終繪制圖片原始狀態，不適用tint color。
UIImageRenderingModeAlwaysTemplate	使用根據tint color繪制圖片，忽略圖片的顏色信息

所以要解決我們遇到的問題，只需要設置選中的圖片的render mode就可以了。

打開其中一個view controller, 在viewDidLoad方法里添加下述代碼：

  UIImage *image = [self.tabBarItem.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  self.tabBarItem.selectedImage = image;

重新運行程序，可以看到選中的tab bar item變成紅色的圖片了，但是文字的顏色還是木有變呀~

我們可以用 text attribute 的方式設置文字樣式，在上述代碼下繼續添加：

  [self.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor]} forState:UIControlStateSelected];

 編譯運行，可以看到字和圖片都變成我們想要的啦，大功告成~