Xcode
Storyboard
Swift
UITabBar

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

More than 1 year has passed since last update.

はじめに

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

ins.png List.png Download.png Serach.png

Simulator Screen Shot - iPhone SE - 2017-10-15 at 16.59.37.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
    }
}

使い方

スクリーンショット 2017-10-15 17.25.00.png

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

Custom.png

Xcode9.0 Storyboradで変わったこと

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

sketch.png

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

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