How to use template rendering mode in Xcode 6 Interface Builder?

Question

I'm trying to use images with template rendering mode enabled in Interface Builder but I can't get it working. With buttons everything works ok but with ImageViews the tintColor is not applying to the image.

I have enabled "Vectors type" (I'm using pdf) and "Render as Template Image" in the Image assets. What am I doing wrong?

Answer 1

I've hit the same problem. I think this is a bug.

You could dup this radar http://openradar.appspot.com/radar?id=5334033567318016, which refers to this minimal example app https://github.com/algal/TemplateImagesBrokenDemo.

I know of two workarounds for this problem

wrap in UIButton

Since tintColor works for UIButtons, one workaround is instead of UIImageView just to use a custom-type UIButton with userInteractionEnabled=false. If you disable the button's interactivity with UIView.userInteractionEnabled (as opposed to with UIControl.enabled), then you won't change the appearance of the image.

manually re-set the image in code

Another workaround is to re-set the .image property in code, after the UIImageView has been loaded from the nib. This works because setting an image in code seems to be what triggers the templating logic. For this to work, you need to re-set the image to its existing value in a way that won't be optimized away in the compiler. A snippet like this in awakeFromNib has worked for me:

override func awakeFromNib() {   super.awakeFromNib()    if shouldSetImagesManually {     // the following three-lines should in theory have no effect.     // but in fact, they ensure that the UIImageView     // correctly applies its tintColor to the vector template image      let image = self.templateImageView.image     self.templateImageView.image = nil     self.templateImageView.image = image   }