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?

This question is a duplicate of [Modify UIImage renderingMode from storyboard/xib file](http://stackoverflow.com/questions/19517334/modify-uiimage-renderingmode-from-storyboard-xib-file) — 0xced, Jun 09 '15 at 19:58

algal · Accepted Answer · 2014-12-10T17:59:17.693

35

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
  }

edited Dec 10 '14 at 17:59

answered Sep 25 '14 at 15:52

algal

27,584
13
78
80

1

So, it really is a bug. Thank you for confirm it. Well, that could be a workaround, only note that the button MUST NOT be Custom in order to get the tintColor. – rmvz3 Sep 25 '14 at 18:36
I think you might be wrong about that. In the example app at the github link, the button IS custom and it does get the tintColor. – algal Sep 25 '14 at 19:34
8

I've found that it's enough to call `tintColorDidChange` on UIImageView. – Jaroslav Oct 07 '15 at 11:43
@Jaroslav Thanks. Great tip! – algal Oct 07 '15 at 15:47
2

Jaroslav solution can be used to fix the problem with an extension of UIImageView: https://gist.github.com/buechner/3b97000a6570a2bfbc99c005cb010bac – Torsten B Aug 02 '16 at 10:04
2

iOS 11 and still not fixed. – Rudolf Adamkovič Nov 20 '17 at 12:14

Dmitry Bondarev · Answer 2 · 2014-12-29T09:01:44.517

In my case the problem occures if the app is built with iOS8 SDK and is running on iOS 7.

My workaround is:

// this is the code that *should* work and does so on iOS 8
UIColor *tintColor = [UIColor colorWithWhite:1.0 alpha:0.3];
[self.iconImageView setTintColor:tintColor];
self.iconImageView.image = [self imageForIconImageView]; // image is loaded from a pdf-resource (asset catalog set as Template) with imageNamed:@"resourceName"

// this is the workaround to get tint on iOS 7    
if (!IS_IOS8_OR_HIGHER) { // macros checking iOS version*

    UIImage *templateImage = [self.iconImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    self.iconImageView.image = templateImage;
}

// * - macros is defined like so:
// #define IS_IOS8_OR_HIGHER ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0)

I have the same problem. Tint color can be applied to a vector image in iOS 8 as long as rendering mode is set to 'Always Template' in either IB or programmatically. But in iOS 7 the tint color only works if the image itself is set with the rendering mode then added to the image view. — JimmyJammed, Mar 11 '15 at 20:50

score 5 · Answer 3 · answered Apr 28 '17 at 08:53

5

Here's the simplest code-less solution I found:

answered Apr 28 '17 at 08:53

Zoltán

1,422
17
22

score 2 · Answer 4 · answered Jan 20 '15 at 13:09

2

Another workaround that seems to work for me is to set the controller.view's tintColor. To get the default system tint color working:

self.view.tintColor = self.view.tintColor;

Like @algal's solution, it shouldn't make a difference, but it does.

answered Jan 20 '15 at 13:09

Howard Yeh

61
2

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

4 Answers4

wrap in UIButton

manually re-set the image in code