Color Tint Gambar UIButton

Saya perhatikan bahwa ketika saya menempatkan putih atau hitam UIImageke dalam UISegmentedControlitu secara otomatis warna topeng itu agar sesuai dengan warna kontrol tersegmentasi. Saya pikir ini sangat keren, dan bertanya-tanya apakah saya bisa melakukan ini di tempat lain juga. Sebagai contoh, saya memiliki banyak tombol yang memiliki bentuk seragam tetapi warnanya bervariasi. Alih-alih membuat PNG untuk setiap tombol, bisakah saya menggunakan masking warna ini untuk menggunakan gambar yang sama untuk mereka semua tetapi kemudian mengatur warna tint atau sesuatu untuk mengubah warna sebenarnya?

Pada iOS 7, ada metode baru UIImageuntuk menentukan mode rendering. Menggunakan mode rendering UIImageRenderingModeAlwaysTemplateakan memungkinkan warna gambar dikontrol oleh warna warna tombol.

Objektif-C

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

Cepat

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

Seperti yang sudah disebutkan Ric di postingannya, Anda dapat mengatur mode render dalam kode, Anda juga dapat melakukan ini secara langsung di katalog gambar, lihat gambar terlampir di bawah ini. Cukup atur Render AskeTemplate Image

Peringatan Saya punya masalah dengan iOS 7 dan pendekatan ini. Jadi jika Anda menggunakan iOS 7 juga Anda mungkin ingin melakukannya dalam kode juga untuk memastikan, seperti dijelaskan di sini .

Tombol Kustom muncul dalam warna gambar masing-masing. Mengatur jenis tombol ke "System" di storyboard (atau ke UIButtonTypeSystemdalam kode), akan membuat gambar tombol dengan warna warna default.

(diuji pada iOS9, Xcode 7.3)

Anda harus mengatur mode rendering gambar UIImageRenderingModeAlwaysTemplateagar dapat tintColormempengaruhi UIImage. Inilah solusinya di Swift:

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

Jika Anda memiliki tombol khusus dengan gambar latar belakang. Anda dapat mengatur warna warna tombol Anda dan menimpa gambar dengan mengikuti.

Dalam aset pilih latar belakang tombol yang ingin Anda atur warna warna.

Pada pemeriksa atribut gambar atur nilai render ke "Template Image"

Sekarang setiap kali Anda mengatur button.tintColor = UIColor.redtombol Anda akan ditampilkan dalam warna merah.

Di Swift Anda dapat melakukannya seperti:

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

Kemudian di viewDidLoad Anda

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

Dan untuk memodifikasi warnanya

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

EDIT Xcode 8 Sekarang Anda bisa juga hanya modus render gambar di .xcassets Anda untuk Template Gambar dan kemudian Anda tidak perlu secara khusus menyatakan hal itu dalam var exampleImagelagi

Tidak yakin persis apa yang Anda inginkan tetapi metode kategori ini akan menutupi UIImage dengan warna yang ditentukan sehingga Anda dapat memiliki satu gambar dan mengubah warnanya menjadi apa pun yang Anda inginkan.

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

Impor kategori ImageUtils dan lakukan sesuatu seperti ini ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

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

Swift 4 dengan customType:

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

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

Swift 3 :

Solusi ini bisa nyaman jika Anda telah mengatur gambar Anda melalui pembangun antarmuka xCode. Pada dasarnya Anda memiliki satu ekstensi untuk mewarnai gambar:

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

Kemudian, Anda dapat menyiapkan ekstensi UIButton ini untuk mewarnai gambar untuk kondisi tertentu:

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

Pemakaian:

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

PS (berfungsi baik juga dalam sel tabel, Anda tidak perlu memanggil setNeedDisplay()metode, perubahan warna langsung karena ekstensi UIImage ..

Jika Anda ingin secara manual menyamarkan gambar Anda, berikut adalah kode yang diperbarui yang berfungsi dengan layar retina

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

Kamu harus mencobanya

Setelah Mengatur Frame

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)

Ubah gambar tombol atau tampilan gambar warna warna Swift:

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

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

Tidak satu pun di atas yang berfungsi untuk saya, karena warna dihapus setelah klik. Saya harus menggunakan

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