UITabBarの非選択の色を各色の画像を用意せずにStoryboardから設定できるカスタムクラス

はじめに

こんにちは
以下のようにUITabBarの各色を自由に変更したくなりました。

ただ、非選択時の色はデフォルトで薄い灰色で、変更はUIImageのwithRenderingMode = .alwaysOriginalで元の画像で設定することが出来るみたいですが、その色の画像を用意したりと不便さがあります。
なので、Storyboard上のInspectorで色が設定できるちょっとだけ便利なカスタムクラスを作ってみました。

コード

UITabBarの各種画像の色をブレンドした後にwithRenderingModeを変更しています。

CustomTabBar.swift

import UIKit

class CustomTabBar: UITabBar {
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    //非選択時の画像の色
    @IBInspectable var normalImageColor: UIColor = .black {
        didSet {
            guard let items = items else { return }
            for item in items {
                item.image = item.image?.brend(color: normalImageColor)?.withRenderingMode(.alwaysOriginal)
            }
        }
    }
    //非選択時の文字の色
    @IBInspectable var normalLabelColor: UIColor = .white {
        didSet {
            guard let items = items else { return }
            let colorAttribute = [NSAttributedStringKey.foregroundColor: normalLabelColor]
            for item in items {
                item.setTitleTextAttributes(colorAttribute, for: .normal)
            }
        }
    }
    //選択時の文字の色
    @IBInspectable var selectedLabelColor: UIColor = .white {
        didSet {
            guard let items = items else { return }
            let colorAttribute = [NSAttributedStringKey.foregroundColor: selectedLabelColor]
            for item in items {
                item.setTitleTextAttributes(colorAttribute, for: .selected)
            }
        }
    }
}

extension UIImage {
    //画像の色を変更します
    func brend(color: UIColor) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        let context = UIGraphicsGetCurrentContext()
        let rect = CGRect(origin: CGPoint.zero, size: size)
        self.draw(in: rect)
        context?.setFillColor(color.cgColor)
        context?.setBlendMode(.sourceAtop)
        context?.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

使い方

UITabBarControllerに乗っているTabBarを作成したカスタムクラス(CustomTabBar)に設定するだけです。

Xcode9.0 Storyboradで変わったこと

UITabBarの選択時の色を変更するとStoryboardにも反映されるようになり、少しだけ視覚的に分かりやすくなっていました。

参考にさせていただいた記事

• Qiita 【Swift/Xcode7 】非選択時タブバーアイコンの色設定 kmdr様
• Qiita iOS7からのUITabBarのデザインのカスタマイズまとめ yimajo様
• Qiita 指定の色で塗り替えた UIImage を作る usagimaru様

見て頂いてありがとうございます。