Roman Roman - 3 months ago 19
iOS Question

Get a colored UIImage using extension

I try to get a colored image (star.jpg, just a star icon) using one extension. As result I get colored the whole

UIImageView
including my image. How could I get only
UIImage
colored?

Here is the code I used:
UIImage+Tinting.swift

import UIKit

extension UIImage {

func tintWithColor(color:UIColor)->UIImage {
UIGraphicsBeginImageContext(self.size)
let context = UIGraphicsGetCurrentContext()

// Flip the image
CGContextScaleCTM(context, 1.0, -1.0)
CGContextTranslateCTM(context, 0.0, -self.size.height)

// Multiply blend mode
CGContextSetBlendMode(context, CGBlendMode.Multiply)

let rect = CGRectMake(0, 0, self.size.width, self.size.height)
CGContextClipToMask(context, rect, self.CGImage)
color.setFill()
CGContextFillRect(context, rect)

// Create uiimage
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

return newImage
}

}


ViewController.swift

import UIKit

class ViewController: UIViewController {

let myImageview = UIImageView()
let myImage = UIImage(named: "star.jpg")

override func viewDidLoad() {
super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.
myImageview.image = myImage
let img = myImageview.image
myImageview.image = img?.tintWithColor(UIColor.redColor())

// Set position of the image view
myImageview.translatesAutoresizingMaskIntoConstraints = false //Don't forget this line
view.addSubview(myImageview)

let horizontalConstraint = NSLayoutConstraint(item: myImageview, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
view.addConstraint(horizontalConstraint)

let verticalConstraint = NSLayoutConstraint(item: myImageview, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
view.addConstraint(verticalConstraint)

let widthConstraint = NSLayoutConstraint(item: myImageview, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Width, multiplier: 0.5, constant: 0)
view.addConstraint(widthConstraint)

let heightConstraint = NSLayoutConstraint(item: myImageview, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Height, multiplier: 0.3, constant: 0)
view.addConstraint(heightConstraint)
}

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

}

Answer

Do like this:

    let image = UIImage(named: "yourimage");
    let tintedImage = image!.imageWithRenderingMode(.AlwaysTemplate)

    let imageView = UIImageView(frame: self.view.frame)
    imageView.image = tintedImage

    view.addSubview(imageView)

    imageView.tintColor = UIColor.redColor()

UPDATE

Tried copying you're exact setup, without the context drawing in the extension, and making an extension based tint (Not that it's very smart, at the functions is already implemented as a standard in swift, but just for the fun of it)

import UIKit

class ViewController: UIViewController{

private var myImageview : UIImageView!
private var myImage : UIImage!


override func viewDidLoad() {
    super.viewDidLoad()

    myImage = UIImage(named: "double-arrow")
    myImageview = UIImageView(frame: view.frame)

    myImageview.image = myImage.makeTintable()

    view.addSubview(myImageview)

    myImageview.tintTo(UIColor.purpleColor())
}

}

extension UIImageView{
   func tintTo(color:UIColor){
       self.tintColor = color
   }
}

extension UIImage{
    func makeTintable() -> UIImage{
    return self.imageWithRenderingMode(.AlwaysTemplate)
    }
}