如何使用 UIImageRenderingModeAlwaysTemplate 防止粗体图像

Question

我的应用程序有一个带有图像按钮的工具栏（UIButton 的子类）；当用户打开“粗体文本”可访问性选项时，不仅文本变为粗体，图像也随之变为粗体。

这是正常模式下的工具栏：

启用“粗体”时：

这似乎是由我的 UIButton 子类引起的，它包含在下面。我正在使用此类在单击、禁用按钮等时应用图像色调颜色，并防止必须包含每个按钮的多个状态。为此，我使用了UIImageRenderingModeAlwaysTemplate，reportedly 表现出这种观察到的行为。

我尝试取消选中界面构建器中的“辅助功能”选项，但根本没有效果。有没有办法解决这个问题？

#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

我建议您使用自定义类别来为您的图像按钮着色。这是一个简单的实现：

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

要使用它，只需导入"UIImage+TintImage.h"，然后执行以下操作：

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];

Answer 2

Swift解决方案：

在图像上设置默认渲染模式（在资产目录中或从代码中）。

用这个函数变换图像颜色：

extension UIImage {
    public func transform(withNewColor color: UIColor) -> UIImage
    {
        UIGraphicsBeginImageContextWithOptions(size, false, scale)

        let context = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(.normal)

        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        context.clip(to: rect, mask: cgImage!)

        color.setFill()
        context.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }

}

将转换后的图像设置为按钮所需状态：

let redImage = image.transform(withNewColor: UIColor.red)
btn?.setImage(redImage, for: .selected)

Answer 3

感谢Rufel's answer 我能够解决我的问题并同时减少我的课程代码：

#import "AppButton.h"

@interface AppButton ()

@property (readonly) UIImage *normalImage;

@end

@implementation AppButton

@synthesize highlightTintColor = _highlightTintColor;

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

- (UIImage *)normalImage
{
    return [self imageForState:UIControlStateNormal];
}

- (void)initialize
{
    self.adjustsImageWhenHighlighted = NO;
    // set disabled image
    [self setImage:[self image:self.normalImage tintedWithColor:[UIColor colorWithRGBValue:RGBValueC9]] forState:UIControlStateDisabled];
}

- (void)setHighlightTintColor:(UIColor *)highlightTintColor
{
    _highlightTintColor = highlightTintColor;
    // update highlighted image
    if (highlightTintColor) {
        [self setImage:[self image:self.normalImage tintedWithColor:highlightTintColor] forState:UIControlStateHighlighted];
    }
}

- (UIImage *)image:(UIImage *)image tintedWithColor:(UIColor *)tintColor
{
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0f);

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

    return tintedImage;
}

@end

Answer 4

这是 rufel Answer 的 swift 3 版本，

extension UIImageView {
fileprivate func tintImage(color: UIColor){
    guard  let _image = image else { return }
    let rect  = CGRect(x: 0.0, y: 0.0, width: _image.size.width  , height: _image.size.height  )
    UIGraphicsBeginImageContextWithOptions(_image.size , false, _image.scale)
    color.set()
    UIRectFill(rect)
    _image.draw(in: rect, blendMode: CGBlendMode.destinationIn, alpha: 1.0)
    image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}
}

或

extension UIImage {
static func imageTinted(image: UIImage?, color: UIColor) -> UIImage? {
    let rect  = CGRect(x: 0.0, y: 0.0, width: image?.size.width ?? 0.0, height: image?.size.height ?? 0.0)
    UIGraphicsBeginImageContextWithOptions(image?.size ?? CGSize.zero, false, image?.scale ?? 2.0)
    color.set()
    UIRectFill(rect)
    image?.draw(in: rect, blendMode: CGBlendMode.destinationIn, alpha: 1.0)
    let tinted = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext();
    return tinted;
}
}