色彩UIButton图像

时间:2013-11-07 06:26:53

标签: ios iphone uibutton ios7 uisegmentedcontrol

我注意到当我将白色或黑色UIImage放入UISegmentedControl时,它会自动对其进行颜色遮罩,以匹配分段控件的色调。我觉得这真的很酷,想知道我是否也可以在其他地方做到这一点。例如,我有一堆按钮,它们具有统一的形状但颜色各异。我不是为每个按钮制作一个PNG,而是以某种方式使用这种颜色遮罩来为所有这些使用相同的图像,但是然后设置一种颜色或其他东西来改变它们的实际颜色?

17 个答案:

答案 0 :(得分:549)

从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

答案 1 :(得分:209)

正如Ric在他的post中已经提到的,您可以在代码中设置渲染模式,您也可以直接在图像目录中执行此操作,请参阅下面的附图。只需将Render As设置为Template Image

即可

enter image description here

警告我遇到过iOS 7及此方法的问题。因此,如果您使用iOS 7,您也可以在代码中执行此操作以确保,如here所述。

答案 2 :(得分:71)

自定义按钮以各自的图像颜色显示。将按钮类型设置为" System"在故事板中(或代码中的 UIButtonTypeSystem ),将使用默认的色调颜色呈现按钮的图像。

Button Type System Renders Icons tinted

(在iOS9,Xcode 7.3上测试)

答案 3 :(得分:35)

您必须将图像渲染模式设置为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 :(得分:24)

如果您有一个带背景图片的自定义按钮。您可以设置按钮的色调颜色并覆盖以下图像。

在资源中,选择要设置色调颜色的按钮背景。

在图像集的属性检查器中,值呈现为“模板图像”

enter image description here

现在无论何时设置ToDoubleFunction,您的按钮都会显示为红色。

答案 5 :(得分:17)

在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中明确声明它

答案 6 :(得分:14)

不确定您想要什么,但此类别方法将屏蔽具有指定颜色的UIImage,因此您可以拥有单个图像并将其颜色更改为您想要的任何颜色。

<强> ImageUtils.h

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

答案 7 :(得分:7)

使用customType的Swift 4:

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

答案 8 :(得分:4)

Swift 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)

P.S。 (在表格单元格中工作也很好,你不需要调用setNeedDisplay()方法,由于 UIImage 扩展名,颜色的变化是立即的。

答案 9 :(得分:4)

对于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);

答案 10 :(得分:3)

如果您想手动屏蔽图像,这里有更新的代码,可以使用视网膜屏幕

- (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;
}

答案 11 :(得分:2)

Swift 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)

答案 12 :(得分:2)

你应该试试

设置框架后

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

}

答案 13 :(得分:1)

更改按钮图像或图像视图色调颜色Swift:

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

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

答案 14 :(得分:0)

要在按钮上设置图像(箭头图标)的白色,我们使用:

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

已知问题:按下按钮时图标失去白色。

截图:enter image description here

答案 15 :(得分:0)

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

如果您通过 UIButton.tintColor 设置 UIColor(r:g:b:alpha:),请记住将值除以 255。这些 RGB 值应该在 0 到 1 之间。

答案 16 :(得分:-1)

以上都不适合我,因为单击后清除了色调。我不得不使用

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