色調 UIButton 圖像

Question

我注意到，當我將白色或黑色UIImage放入UISegmentedControl時，它會自動對其進行顏色遮罩以匹配分段控件的色調。 我認為這真的很酷，並且想知道我是否也可以在其他地方這樣做。 例如，我有一堆形狀統一但形狀各異的按鈕 colors。我不是為每個按鈕制作一個 PNG，而是可以以某種方式使用此顏色遮罩為所有按鈕使用相同的圖像，然后設置色調顏色或改變它們實際顏色的東西？

Answer 1

從 iOS 7 開始，在UIImage上有一個新方法來指定渲染模式。 使用渲染模式UIImageRenderingModeAlwaysTemplate將允許圖像顏色由按鈕的色調顏色控制。

目標-C

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [[UIImage imageNamed:@"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[button setImage:image forState:UIControlStateNormal]; 
button.tintColor = [UIColor redColor];

迅速

let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red

Answer 2

正如 Ric 在他的帖子中已經提到的，您可以在代碼中設置渲染模式，您也可以直接在圖像目錄中執行此操作，請參見下面的附圖。 只需將Render As設置為Template Image

警告我在使用 iOS 7 和這種方法時遇到了問題。 所以，如果你使用的iOS 7，以及你可能想要做的代碼，以及可以肯定，作為描述在這里。

Answer 3

自定義按鈕以其各自的圖像顏色顯示。 在情節UIButtonTypeSystem中將按鈕類型設置為“系統”（或在代碼中設置為UIButtonTypeSystem ），將使用默認色調呈現按鈕的圖像。

（在 iOS9、Xcode 7.3 上測試）

Answer 4

您必須將圖像渲染模式設置為UIImageRenderingModeAlwaysTemplate以使tintColor影響 UIImage。 這是 Swift 中的解決方案：

let image = UIImage(named: "image-name")
let button = UIButton()
button.setImage(image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), forState: .Normal)
button.tintColor = UIColor.whiteColor()

快速 4 倍

button.setImage(image.withRenderingMode(UIImage.RenderingMode.alwaysTemplate), for: .normal)
button.tintColor = UIColor.blue

Answer 5

如果您有一個帶有背景圖像的自定義按鈕。您可以設置按鈕的色調顏色並使用以下內容覆蓋圖像。

在資產中選擇要設置色調顏色的按鈕背景。

在圖像的屬性檢查器中將值渲染設置為“模板圖像”

現在，每當您設置button.tintColor = UIColor.red您的按鈕將顯示為紅色。

Answer 6

在 Swift 中，你可以這樣做：

var exampleImage = UIImage(named: "ExampleImage.png")?.imageWithRenderingMode(.AlwaysTemplate)

然后在你的 viewDidLoad

exampleButtonOutlet.setImage(exampleImage, forState: UIControlState.Normal)

並修改顏色

exampleButtonOutlet.tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) //your color

編輯 Xcode 8現在您還可以將 .xcassets 中的圖像渲染模式設置為模板圖像，然后您不再需要在var exampleImage專門聲明它

Answer 7

不確定您想要什么，但此類別方法將使用指定顏色屏蔽 UIImage，因此您可以擁有單個圖像並將其顏色更改為您想要的任何顏色。

圖像實用程序

- (UIImage *) maskWithColor:(UIColor *)color;

ImageUtils.m

-(UIImage *) maskWithColor:(UIColor *)color 
{
    CGImageRef maskImage = self.CGImage;
    CGFloat width = self.size.width;
    CGFloat height = self.size.height;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);    
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
    UIImage *coloredImage = [UIImage imageWithCGImage:cImage];

    CGContextRelease(bitmapContext);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(cImage);

    return coloredImage;    
}

導入 ImageUtils 類別並執行以下操作...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

UIImage *redIcon = [icon maskWithColor:UIColor.redColor];
UIImage *blueIcon = [icon maskWithColor:UIColor.blueColor];

Answer 8

帶有 customType 的 Swift 4：

let button = UIButton(frame: aRectHere)
    let buttonImage = UIImage(named: "imageName")
    button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
    button.tintColor = .white

Answer 9

對於 Xamarin.iOS (C#)：

UIButton messagesButton = new UIButton(UIButtonType.Custom);
UIImage icon = UIImage.FromBundle("Images/icon.png");
messagesButton.SetImage(icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
messagesButton.TintColor = UIColor.White;
messagesButton.Frame = new RectangleF(0, 0, 25, 25);

Answer 10

斯威夫特3 ：

如果您已經通過 xCode 界面構建器設置了圖像，則此解決方案可能會很舒服。 基本上你有一個擴展來着色圖像：

extension UIImage {
    public func image(withTintColor color: UIColor) -> UIImage{
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: self.size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(CGBlendMode.normal)
        let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        context.clip(to: rect, mask: self.cgImage!)
        color.setFill()
        context.fill(rect)
        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }
}

然后，您可以准備此UIButton擴展來為特定狀態的圖像着色：

extension UIButton {
    func imageWith(color:UIColor, for: UIControlState) {
        if let imageForState = self.image(for: state) {
            self.image(for: .normal)?.withRenderingMode(.alwaysTemplate)
            let colorizedImage = imageForState.image(withTintColor: color)
            self.setImage(colorizedImage, for: state)
        }
    }
}

用法：

myButton.imageWith(.red, for: .normal)

PS（在表格單元格中也很好用，你不需要調用setNeedDisplay()方法，由於UIImage擴展，顏色的變化是立即的..

Answer 11

如果您想手動屏蔽圖像，這里是適用於視網膜屏幕的更新代碼

- (UIImage *)maskWithColor:(UIColor *)color
{
    CGImageRef maskImage = self.CGImage;
    CGFloat width = self.size.width * self.scale;
    CGFloat height = self.size.height * self.scale;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
    UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:self.scale orientation:self.imageOrientation];

    CGContextRelease(bitmapContext);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(cImage);

    return coloredImage;
}

Answer 12

你應該試試

設置框架后

NSArray *arr10 =[NSArray arrayWithObjects:btn1,btn2,nil];
for(UIButton *btn10 in arr10)
{
CAGradientLayer *btnGradient2 = [CAGradientLayer layer];
btnGradient2.frame = btn10.bounds;

btnGradient2.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithRed:151.0/255.0f green:206.0/255.5 blue:99.0/255.0 alpha:1] CGColor],
                       (id)[[UIColor colorWithRed:126.0/255.0f green:192.0/255.5 blue:65.0/255.0 alpha:1]CGColor],
                       nil];
[btn10.layer insertSublayer:btnGradient2 atIndex:0];

}

Answer 13

斯威夫特 3.0

    let image = UIImage(named:"NoConnection")!

 warningButton = UIButton(type: .system)        
    warningButton.setImage(image, for: .normal)
    warningButton.tintColor = UIColor.lightText
    warningButton.frame = CGRect(origin: CGPoint(x:-100,y:0), size: CGSize(width: 59, height: 56))

    self.addSubview(warningButton)

Answer 14

如果您在 iOS 15 之后到達這里並且您正在使用新的UIButton.Configuration API，那么您可能需要通過imageColorTransformer來完成。

看起來像這樣：

configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in .green }

為了方便起見，您可以創建一個擴展：

extension UIButton.Configuration {
    func imageColor(_ color: UIColor) -> UIButton.Configuration {
        var configuration = self
        configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in color }
        return configuration
    }
}

// Usage:
configuration = configuration.imageColor(.green)

與其他答案一樣，圖像本身必須是 Xcode 資產中的“渲染為模板圖像”，或代碼image.withRenderingMode(.alwaysTemplate)

---

獎金提示：
如果您希望在突出顯示按鈕時更改圖像顏色怎么辦？ 然后你的配置擴展看起來像這樣：

func imageColor(whenNormal: UIColor,
                whenHighlighted: UIColor,
                isHighlighted: Bool) -> UIButton.Configuration {
    var configuration = self
    configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in
        isHighlighted ? whenHighlighted : whenNormal
    }
    return configuration
}

這本身必須從configurationUpdateHandler上下文中調用，如下所示：

someButton.configurationUpdateHandler = { button in
    guard var configuration = button.configuration else {  return }
    configuration.image = UIImage(named: "some_image")
    configuration = configuration.imageColor(whenNormal: .green,
                                             whenHighlighted: .green.withAlphaComponent(0.7),
                                             isHighlighted: button.isHighlighted)
    button.configuration = configuration
}

請注意， configurationUpdateHandler也是您可以根據按鈕狀態實際定義不同圖像的地方。

Answer 15

更改按鈕圖像或圖像視圖色調顏色 Swift ：

btn.imageView?.image = btn.imageView?.image?.withRenderingMode(.alwaysTemplate)

btn.imageView?.tintColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)

Answer 16

以上都不適合我，因為點擊后色調被清除。 我不得不使用

button.setImageTintColor(Palette.darkGray(), for: UIControlState())

Answer 17

要在按鈕上設置圖像（箭頭圖標）的白色，我們使用：

let imageOnButton = UIImage(named: "navForwardArrow")?.imageWithColor(color: UIColor.white)
button.setImage(imageOnButton, for: .normal)

已知問題：按下按鈕時圖標會失去白色。

截屏：

Answer 18

let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red

如果您通過UIColor(r:g:b:alpha:)設置UIButton.tintColor ，請記住將值除以255 。 這些 RGB 值應該在 0 和 1 之間。

Answer 19

我在突出顯示的 state 中遇到了屏蔽圖像的問題。我不希望它發生。 如果您遇到同樣的問題，請查看：