색상 색조 UIButton 이미지

흰색이나 검은 색을 UIImage넣을 UISegmentedControl때 세그먼트 컨트롤의 색조와 일치하도록 자동으로 컬러 마스크됩니다. 나는 이것이 정말로 시원하다고 생각했고, 내가 다른 곳에서도 이것을 할 수 있는지 궁금했다. 예를 들어, 모양이 균일하지만 색상이 다양한 버튼이 많이 있습니다. 각 버튼에 PNG를 만드는 대신이 색상 마스킹을 사용하여 모든 이미지에 동일한 이미지를 사용할 수 있지만 색조 또는 실제 색상을 변경하기 위해 무언가를 설정할 수 있습니까?

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

Ric이 그의 게시물 에서 이미 언급했듯이 코드에서 렌더링 모드를 설정할 수 있으며 이미지 카탈로그에서 직접이를 수행 할 수도 있습니다 (아래 첨부 된 이미지 참조). 그냥 설정 Render As에Template Image

주의 사항 iOS 7 및이 방법에 문제가 있습니다. 따라서 iOS 7을 사용하는 경우 여기에 설명 된대로 확실하게 코드로 수행 할 수 있습니다 .

사용자 정의 버튼 은 해당 이미지 색상으로 나타납니다. 스토리 보드에서 또는 UIButtonTypeSystem코드 에서 버튼 유형을 "시스템"으로 설정하면 버튼 의 이미지가 기본 색조 색상으로 렌더링됩니다.

(iOS9, Xcode 7.3에서 테스트)

당신은에 이미지 렌더링 모드를 설정해야합니다 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()

빠른 4x

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

배경 이미지가있는 사용자 지정 단추가있는 경우 단추의 색조 색상을 설정하고 다음과 같이 이미지를 재정의 할 수 있습니다.

자산에서 색조 색상을 설정하려는 버튼 배경을 선택하십시오.

이미지의 속성 관리자에서 값을 "템플릿 이미지"로 설정합니다.

이제 설정 button.tintColor = UIColor.red할 때마다 버튼이 빨간색으로 표시됩니다.

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더 이상 이미지를 구체적으로 선언 할 필요가 없습니다.

정확히 원하는 것이 확실하지 않지만이 카테고리 메소드는 지정된 색상으로 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];

customType이있는 스위프트 4 :

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

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

스위프트 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)

추신 (테이블 셀에서도 잘 작동하며 setNeedDisplay()메서드 를 호출 할 필요가 없으며 UIImage 확장 으로 인해 색상 변경이 즉시 발생합니다 ..

이미지를 수동으로 마스킹하려면 망막 화면에서 작동하는 업데이트 된 코드가 있습니다.

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

당신은 시도해야

프레임 설정 후

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

}

스위프트 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)

단추 이미지 또는 이미지보기 색조 색상 변경

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

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

클릭 후 색조가 지워졌 기 때문에 위의 어느 것도 나를 위해 일하지 않았습니다. 나는 사용해야했다

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