如何使用 UIImageRenderingModeAlwaysTemplate 防止粗体图像

Question

我的应用程序有一个带有图像按钮的工具栏（UIButton 的子class）；当用户打开 "Bold text" 辅助功能选项时，不仅文本会变为粗体，图像也会随之变粗。

这是普通模式下的工具栏：

启用"bold text"时：

好像是我的UIButton subclass导致的，下面附上了。我正在使用此 class 在按钮被单击、禁用等时应用图像色调颜色，并避免必须包含每个按钮的多个状态。为此，我正在使用 UIImageRenderingModeAlwaysTemplate，其中 reportedly 表现出这种观察到的行为。

我试图取消选中界面生成器中的 "Accessibility" 选项，但这根本没有效果。有办法解决这个问题吗？

#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

感谢我能够解决我的问题并同时减少我的 class 的代码：

#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 3

这是 swift rufel 答案的第 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;
}
}

Answer 4

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)

如何使用 UIImageRenderingModeAlwaysTemplate 防止粗体图像

How to prevent bold images with UIImageRenderingModeAlwaysTemplate

ios

objective-c

interface

uibutton