UIImageのRenderingModeのサンプルコード

1枚の画像で色だけ変えて使いまわしたいと思ったものの、
色の数だけ画像を用意するのも大変だし、動的に色を変えるのも難しいと思い、
いい方法がないか調べたところ、UIImageにRenderingModeなるものが存在することを今更知った。

今回下記画像を用意し、実際に簡単なサンプルコードを書いた。
画像は蝶々の部分が白色で他は透過処理してある100*100pixelのpng画像。
(見やすくするため、画像の背景をタグで灰色指定している。)

// Swift3
        // 白背景だと画像が見えなくなるため、灰色背景に変更
        view.backgroundColor = .gray
        
        // 比較用に元画像をそのままUIImageViewで表示 
        originalImageView.image = UIImage(named: "original")
        
        // RenderingModeでtemplate化
        let image = UIImage(named: "original")?.withRenderingMode(.alwaysTemplate)

        // RederingModeでTemplate化した画像を入れ、tintColorで色指定
        leftImageView.image = image
        leftImageView.tintColor = .red
        
        centerImageView.image = image
        centerImageView.tintColor = .green
        
        rightImageView.image = image
        rightImageView.tintColor = .blue

表示結果

簡単な処理でこのように扱えるので便利。

参考

dev.classmethod.jp