Swift：ImageViewの色を変える(Xcode)

UIColorを使ってImageViewの色を変える

背景の色を変えるだけの簡単なアプリを作ります。

完成イメージ
上部の色のボタンをタップすると背景の色が変わります。

UIColorを使って色を変える場合、使うImageは単色でなければいけません。
そのため、柄付きの画像の色を変えたい場合は、背景と柄を別々のImageViewに分けてStoryboard上に配置します。

1.Storyboard上にImageViewを配置する

7ちゃんの画像と背景の画像を別々のImageViewに入れてConstraintsを追加します。

背景は全面に配置しています。 全面に配置するConstraintsの追加方法は前回のブログ を参考にしてください。

2.色ボタン用にButtonを4つ配置する

ButtonのDefault Imageにボタンの画像を指定します。

すべてのButtonにそれぞれの画像を指定します。

3.色ボタンと背景をViewControllerと紐付ける

4.ViewControllerにボタンをタップする処理を書く

    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var redButton: UIButton!
    @IBOutlet weak var blueButton: UIButton!
    @IBOutlet weak var greenButton: UIButton!
    @IBOutlet weak var yellowButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 色ボタンを配列に入れる
        let buttons = [redButton, blueButton, greenButton, yellowButton]
        
        for button in buttons {
            // アクションの設定
            button.addTarget(self, action: #selector(ViewController.tapButton(_:)), forControlEvents: .TouchUpInside)
        }
    }
    
    // 色ボタンがタップされると呼び出される
    func tapButton(sender: UIButton) {
        if let button = sender as? UIButton{
            if(button == redButton){
               //TODO:色を変える処理
            }
        }
    }

5.ViewControllerに色を変える処理を書く

viewDidLoad()に以下のコードを追加します。

// テンプレートとしてbackgroundImageViewを描画する
        backgroundImageView.image = backgroundImageView.image?.imageWithRenderingMode(.AlwaysTemplate)

.imageWithRenderingMode(.AlwaysTemplate)を指定すると、ImageViewをテンプレートとして描画できるようになります。
デフォルトでtintcolorが青色に設定されているので、背景の色が青色になります。

デフォルトの色はStoryBoard上でも変更することができますが、独自の色を作って色を設定したいので、今回はStoryBoard上では変更しません。

※Storyboard上でデフォルトの色を変える場合

6.独自に指定した色を使えるように処理を書く

独自の色を指定したいので、RGBで指定した色を使えるようにします。

swiftのUIColorはデフォルトでRGBの値を0.0~1.0の値で扱って、インスタンスを生成できる仕様になっています。

backgroundImageView.tintColor = UIColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)

※ alphaは不透明度

ですが、RGBは3桁表記で扱うことが多く、0.0~1.0の値で指定するのは結構難しいです。
そこで、extensionに以下のように定義するとRGBを3桁で扱えるようになります。

// RGBカラーを3桁で扱えるようにする
extension UIColor {
    class func rgb(r: Int, g: Int, b: Int, alpha: CGFloat) -> UIColor{
        return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha)
    }
}

extensionを定義した上で、UIColorでRGBを指定すると、思い通りの色を指定することができます。

classにRGBで色を定義する。

    class ConstColor{
  // 色の指定
        func red() -> UIColor {
            return UIColor.rgb(219, g: 94, b: 67, alpha: 1.0)
        }
        func green() -> UIColor {
            return UIColor.rgb(88, g: 178, b: 150, alpha: 1.0)
        }
        func blue() -> UIColor {
            return UIColor.rgb(82, g: 146, b: 207, alpha: 1.0)
        }
        func yellow() -> UIColor {
            return UIColor.rgb(234, g: 206, b: 75, alpha: 1.0)
        }
    }

色の準備は以上で、定義したUIColorを呼び出すことで色を変更することができます。

7.classに指定したUIColorを色ボタンが押されたタイミングで呼び出して背景の色を変える

色ボタンが押されると、tapButton関数が呼ばれて、各色ボタンごとに背景の色が変わります。

※全体のコード

class ViewController: UIViewController {

    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var redButton: UIButton!
    @IBOutlet weak var blueButton: UIButton!
    @IBOutlet weak var greenButton: UIButton!
    @IBOutlet weak var yellowButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // テンプレートとしてbackgroundImageViewを描画する
        backgroundImageView.image = backgroundImageView.image?.imageWithRenderingMode(.AlwaysTemplate)
        // 初期表示は背景の色が緑
        backgroundImageView.tintColor = ConstColor().green()
        
        // 色ボタンを配列に入れる
        let buttons = [redButton, blueButton, greenButton, yellowButton]
        
        for button in buttons {
            // アクションの設定
            button.addTarget(self, action: #selector(ViewController.tapButton(_:)), forControlEvents: .TouchUpInside)
        }
    }
    
    // 色ボタンがタップされると呼び出される
    func tapButton(sender: UIButton) {
        if let button = sender as? UIButton{
            // 各色ボタンが押された時の処理
            if(button == redButton){
            // 背景のtintColorを赤色に変える
               backgroundImageView.tintColor = ConstColor().red()
            }
            else if(button == blueButton){
                backgroundImageView.tintColor = ConstColor().blue()
            }
            else if(button == greenButton){
                backgroundImageView.tintColor = ConstColor().green()
            }
            else{
                backgroundImageView.tintColor = ConstColor().yellow()
            }
        }
    }
    // 色の指定
    class ConstColor{
        func red() -> UIColor {
            return UIColor.rgb(219, g: 94, b: 67, alpha: 1.0)
        }
        func green() -> UIColor {
            return UIColor.rgb(88, g: 178, b: 150, alpha: 1.0)
        }
        func blue() -> UIColor {
            return UIColor.rgb(82, g: 146, b: 207, alpha: 1.0)
        }
        func yellow() -> UIColor {
            return UIColor.rgb(234, g: 206, b: 75, alpha: 1.0)
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

// RGBカラーを3桁で扱えるようにする
extension UIColor {
    class func rgb(r: Int, g: Int, b: Int, alpha: CGFloat) -> UIColor{
        return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha)
    }
}

8.実行

• 初期表示
  

• 赤のボタンがタップされた時
  

• 青のボタンがタップされた時
  

• 黄色のボタンがタップされた時
  

参考サイト [swift]RGB値でUIColorを作成するextension - Qiita