TabBarController 是在 ios 開發過程中使用較為頻繁的一個 Controller,但是在使用過程中經常會遇到一些問題,例如本文所要解決的,如何修改 TabBar 選中時文字及圖片的顏色。 如果需要,可以從這裡下載完整的代碼。 首先,我們創建一個新的項目,使用 TabBarContr ...
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方法里添加下述代碼:
1 UIImage *image = [self.tabBarItem.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; 2 self.tabBarItem.selectedImage = image;View Code
重新運行程式,可以看到選中的tab bar item變成紅色的圖片了,但是文字的顏色還是木有變呀~
我們可以用 text attribute 的方式設置文字樣式,在上述代碼下繼續添加:
1 [self.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor redColor]} forState:UIControlStateSelected];
View Code
編譯運行,可以看到字和圖片都變成我們想要的啦,大功告成~