UITabBar の特定タブの選択時の色を変える
検証環境:
Xcode 12.4
Swift 5.3.2
iOS Deployment Target 14.4
UITabBar 使用時に、特定タブ(UITabBarItem)のみ、選択時の色を変える方法について。
2つ目のタブを赤に変更
その他のタブはデフォルトの tint color
タイトル文字色はtabBarItem.setTitleTextAttributes
で指定、
画像色はtabBarItem.selectedImage
にセットする UIImage の withRenderingMode に .alwaysOriginal
を指定することで変更できる。
UITabBarController のサブクラスを作ってその中の viewDidLoad で変更している。
サンプルコード
class TabBarController: UITabBarController { override func viewDidLoad() { super.viewDidLoad() let targetIndex = 1 // 変えたいタブの場所。今回は2つ目とする。 if let tabBarItems = tabBar.items, tabBarItems.indices.contains(targetIndex) { let tabBarItem = tabBarItems[targetIndex] // タイトル色の変更 tabBarItem.setTitleTextAttributes([.foregroundColor: UIColor.systemRed], for: .selected) // 画像色の変更 let image = tabBarItem.image! // 元の画像を取得 let tintedImage = image.tinted(with: .systemRed).withRenderingMode(.alwaysOriginal) // 画像の色変更とRenderingMode指定 tabBarItem.selectedImage = tintedImage } } } // 画像の色を変える UIImage Extension extension UIImage { func tinted(with color: UIColor) -> UIImage { return UIGraphicsImageRenderer(size: size).image { context in let rect = CGRect(origin: .zero, size: size) draw(in: rect) color.setFill() context.fill(rect, blendMode: .sourceIn) } } }
StoaryBoard側でタブの画像、タイトルは設定済み。
UITabBarController にこのカスタムクラスを設定する。
UIImageの色を変える方法については以下の記事で書いた。