Renk Tonu UIButton Görüntüsü

Ben beyaz veya siyah yerleştirdiğinizde fark UIImagebir içine UISegmentedControlotomatik olarak renk maskeleri bölümlendirilmiş kontrolün renk tonunu eşleşecek. Bunun gerçekten harika olduğunu düşündüm ve bunu başka bir yerde de yapıp yapamayacağımı merak ediyordum. Örneğin, tek tip bir şekle sahip, ancak çeşitli renklere sahip bir grup düğmem var. Her düğme için bir PNG yapmak yerine, bir şekilde bu renk maskelemesini hepsi için aynı görüntüyü kullanmak için kullanabilir, ancak daha sonra gerçek renklerini değiştirmek için bir renk tonu veya bir şey ayarlayabilir miyim?

İOS 7'den itibaren, UIImageoluşturma modunu belirtmek için yeni bir yöntem var . Oluşturma modunun UIImageRenderingModeAlwaysTemplatekullanılması görüntü renginin düğmenin renk tonu ile kontrol edilmesini sağlar.

Objective-C

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

hızlı

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

Ric zaten onun belirtildiği gibi yazı kodda oluşturma modunu ayarlayabilirsiniz, ayrıca görüntü kataloğunda doğrudan yapabilirsiniz, aşağıdaki resme eki gör. Sadece set Render AsiçinTemplate Image

Uyarı iOS 7 ve bu yaklaşımla ilgili sorun yaşadım. Dolayısıyla, iOS 7'yi de kullanıyorsanız, burada açıklandığı gibi emin olmak için kodda da yapmak isteyebilirsiniz .

Özel Düğmeler ilgili görüntü renklerinde görünür. Düğme türünü film şeridinde (veya UIButtonTypeSystemkodda) "Sistem" olarak ayarlamak, düğmenin görüntüsünü varsayılan renk tonu ile görüntüler.

(iOS9, Xcode 7.3'te test edilmiştir)

Sen görüntü oluşturma modunu ayarlamalısınız UIImageRenderingModeAlwaysTemplatesahip olmak için tintColorUIImage etkiler. İşte Swift'teki çözüm:

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

SWIFT 4x

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

Arka plan resmi olan özel bir düğmeniz varsa, düğmenizin renk tonunu ayarlayabilir ve görüntüyü aşağıdaki şekilde geçersiz kılabilirsiniz.

Varlıklarda, renk tonu ayarlamak istediğiniz düğme arka planını seçin.

Görüntünün nitelik denetçisinde, render değerini "Şablon Görüntüsü" olarak ayarlayın

Şimdi her ayarladığınızda button.tintColor = UIColor.reddüğme kırmızı renkte gösterilir.

Swift'te bunu şöyle yapabilirsiniz:

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

Sonra görüşünüze göre

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

Ve rengi değiştirmek için

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

Xcode 8'i DÜZENLE Artık .xcasset'lerinizdeki görüntünün oluşturma modunu Şablon Görüntüsü'ne dönüştürebilirsiniz ve daha sonra var exampleImageartık özel olarak bildirmeniz gerekmez

Tam olarak ne istediğinizden emin değilim, ancak bu kategori yöntemi bir UIImage'ı belirli bir renkle maskeleyecek, böylece tek bir görüntüye sahip olabilir ve rengini istediğiniz gibi değiştirebilirsiniz.

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 kategorisini içe aktarın ve bunun gibi bir şey yapın ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

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

CustomType ile Swift 4:

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

Xamarin.iOS (C #) için:

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

Hızlı 3 :

Resminizi zaten xCode arayüz oluşturucu ile ayarladıysanız, bu çözüm rahat olabilir. Temel olarak bir görüntüyü renklendirmek için bir uzantınız vardır:

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

Ardından, görüntüyü belirli bir duruma renklendirmek için bu UIButton uzantısını hazırlayabilirsiniz :

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

Kullanımı:

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

PS (tablo hücrelerinde de iyi çalışıyor, setNeedDisplay()yöntemi çağırmanıza gerek yok , UIImage uzantısı nedeniyle renk değişikliği hemen ..

Resminizi manuel olarak maskelemek istiyorsanız, retina ekranlarıyla çalışan güncellenmiş kod

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

Denemelisin

Çerçeveyi Ayarladıktan Sonra

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

}

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)

Düğme görüntüsünü veya görüntü görünümü renk tonunu değiştirme Swift:

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

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

Yukarıdakilerin hiçbiri benim için işe yaramadı, çünkü tıklamadan sonra renk tonu temizlendi. Kullanmak zorundaydım

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