How to prevent bold images with UIImageRenderingModeAlwaysTemplate

Question

My application has a toolbar with image buttons on them (subclass of UIButton); when the user switches on the "Bold text" accessibility option, not only the text becomes bold but the images follow suit.

This is the toolbar in normal mode:

When the "bold text" is enabled:

It seems to be caused by my UIButton subclass, which is included below. I'm using this class to apply an image tint colour when the button is clicked, disabled, etc. and prevents having to include multiple states of each button. For that I'm using the UIImageRenderingModeAlwaysTemplate which reportedly exhibits this observed behaviour.

I've tried to uncheck the "Accessibility" option in the interface builder, but that had no effect at all. Is there a way to fix this?

#import "AppButton.h"

@implementation AppButton

- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        [self initialize];
    }
    return self;
}

- (void)initialize
{
    self.adjustsImageWhenHighlighted = NO;

    [self setImage:[[self imageForState:UIControlStateNormal] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];
}

- (void)updateButtonView
{
    if (!self.enabled) {
        self.imageView.tintColor = [UIColor colorWithRGBValue:RGBValueC9];
    } else if (self.highlighted) {
        self.imageView.tintColor = self.highlightTintColor;
    } else {
        self.imageView.tintColor = self.tintColor;
    }
}

- (void)setHighlighted:(BOOL)highlighted
{
    [super setHighlighted:highlighted];
    [self updateButtonView];
}

- (void)setEnabled:(BOOL)enabled
{
    [super setEnabled:enabled];
    [self updateButtonView];
}

- (void)setTintColor:(UIColor *)tintColor
{
    [super setTintColor:tintColor];
    [self updateButtonView];
}

@end

Answer 1

I recommend you to use a custom category to tint your image buttons. Here is a simple implementation that does just that:

UIImage+TintImage.h

@interface UIImage (TintImage)
- (UIImage *)imageTintedWithColor:(UIColor *)tintColor;
@end

UIImage+TintImage.m

#import "UIImage+TintImage.h"

@implementation UIImage (TintImage)
- (UIImage *)imageTintedWithColor:(UIColor *)tintColor
{
    if (tintColor == nil) {
        tintColor = [UIColor whiteColor];
    }

    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);

    // Tint image
    [tintColor set];
    UIRectFill(rect);
    [self drawInRect:rect blendMode:kCGBlendModeDestinationIn alpha:1.0f];
    UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return tintedImage;
}
@end

To use it, just import "UIImage+TintImage.h", then do the following:

UIImage *originalImage = [UIImage imageNamed:@"icn-menu"];
UIImage *tintedImage = [originalImage imageTintedWithColor:[UIColor blueColor]];
UIButton *homeButton = [UIButton buttonWithType:UIButtonTypeCustom];
[homeButton setImage:originalImage forState:UIControlStateNormal];
[homeButton setImage:tintedImage forState:UIControlStateHighlighted];