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

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

<img width="241" alt="ins.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/3d16c839-a052-5a79-5242-772173792d8f.png"> ![List.png](https://qiita-image-store.s3.amazonaws.com/0/128250/4db3740e-630e-fb99-4a5b-3acf4f81f713.png) ![Download.png](https://qiita-image-store.s3.amazonaws.com/0/128250/23a54be9-1829-455d-1d24-8c49f4e049d1.png) ![Serach.png](https://qiita-image-store.s3.amazonaws.com/0/128250/a32de3e3-8021-4afa-ec03-44dc66aaa203.png)

![Simulator Screen Shot - iPhone SE - 2017-10-15 at 16.59.37.png](https://qiita-image-store.s3.amazonaws.com/0/128250/b937bd08-3ea4-abba-0fd0-419f9f67cf3e.png)

ただ、非選択時の色はデフォルトで薄い灰色で、変更は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
    }
}
```

# 使い方
<img width="196" alt="スクリーンショット 2017-10-15 17.25.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/2bd2605e-e1f7-7669-4bb7-8d59448fc464.png">

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

<img width="320" alt="Custom.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/fecf69ce-c022-bfb5-8638-e2e8d6e41aa7.png">

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

![sketch.png](https://qiita-image-store.s3.amazonaws.com/0/128250/b7af6f70-6896-2e7b-9e23-c7d3d07d5943.png)

# 参考にさせていただいた記事
- [ Qiita 【Swift/Xcode7 】非選択時タブバーアイコンの色設定 kmdr様](https://qiita.com/kmdr/items/fe6b240abd11e72fb27c)
- [ Qiita iOS7からのUITabBarのデザインのカスタマイズまとめ yimajo様](https://qiita.com/yimajo/items/a7ed557d382077498181)
- [ Qiita 指定の色で塗り替えた UIImage を作る usagimaru様](https://qiita.com/usagimaru/items/5400fa74ab538ce3804c)

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