xyk blog

最近は iOS 開発の記事が多めです。

UITabBar の特定タブの選択時の色を変える

検証環境:
Xcode 12.4
Swift 5.3.2
iOS Deployment Target 14.4

UITabBar 使用時に、特定タブ(UITabBarItem)のみ、選択時の色を変える方法について。

2つ目のタブを赤に変更
f:id:xyk:20210410130748p:plain

その他のタブはデフォルトの tint color
f:id:xyk:20210410130858p:plain

タイトル文字色は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の色を変える方法については以下の記事で書いた。

xyk.hatenablog.com