development

색상 색조 UIButton 이미지

big-blog 2020. 3. 31. 08:19
반응형

색상 색조 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 AsTemplate 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())

참고 URL : https://stackoverflow.com/questions/19829356/color-tint-uibutton-image

반응형