Odcień koloru UIButton Obraz

Zauważyłem, że kiedy umieścić biały lub czarny UIImagedo UISegmentedControlniej automatycznie kolorowych masek to, aby dopasować odcień kontroli segmentowej. Myślałem, że to naprawdę fajne i zastanawiałem się, czy mógłbym to zrobić również gdzie indziej. Na przykład mam kilka przycisków, które mają jednolity kształt, ale różne kolory. Zamiast tworzyć PNG dla każdego przycisku, czy mógłbym w jakiś sposób użyć tego maskowania kolorów, aby użyć tego samego obrazu dla wszystkich z nich, ale następnie ustawić kolor odcienia lub coś, aby zmienić ich rzeczywisty kolor?

Począwszy od systemu iOS 7, dostępna jest nowa metoda UIImageokreślania trybu renderowania. Użycie trybu renderowania UIImageRenderingModeAlwaysTemplatepozwoli kontrolować kolor obrazu za pomocą koloru odcienia przycisku.

Cel C

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

Szybki

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

Jak Ric wspomniał już w swoim poście , możesz ustawić tryb renderowania w kodzie, możesz to również zrobić bezpośrednio w katalogu obrazów, patrz załączony obraz poniżej. Wystarczy ustawić Render AsnaTemplate Image

Zastrzeżenie Mam problemy z iOS 7 i tym podejściem. Więc jeśli używasz iOS 7, możesz to zrobić również w kodzie, aby się upewnić, jak opisano tutaj .

Przyciski niestandardowe pojawiają się w odpowiednich kolorach obrazu. Ustawienie typu przycisku na „System” w serii ujęć (lub UIButtonTypeSystemw kodzie) spowoduje wyświetlenie obrazu przycisku z domyślnym kolorem odcienia.

(testowany na iOS9, Xcode 7.3)

Musisz ustawić tryb renderowania obrazu na UIImageRenderingModeAlwaysTemplate, aby mieć tintColorwpływ na UIImage. Oto rozwiązanie w 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

Jeśli masz przycisk niestandardowy z obrazem w tle. Możesz ustawić kolor odcienia swojego przycisku i zastąpić obraz następującymi.

W zasobach wybierz tło przycisku, dla którego chcesz ustawić kolor odcienia.

W inspektorze atrybutów obrazu ustaw wartość renderowania jako „Obraz szablonu”

Teraz po każdym ustawieniu button.tintColor = UIColor.redprzycisk będzie wyświetlany na czerwono.

W Swift możesz to zrobić w następujący sposób:

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

Następnie w twoim widokuDidLoad

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

I aby zmodyfikować kolor

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

EDYCJA Xcode 8 Teraz możesz także po prostu tryb renderowania obrazu z zestawu .xcassets do obrazu szablonu i nie musisz var exampleImagejuż go deklarować

Nie jestem pewien, czego dokładnie chcesz, ale ta metoda kategorii zamaskuje obraz UIIm określonego koloru, abyś mógł mieć pojedynczy obraz i zmienić jego kolor na dowolny.

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

Zaimportuj kategorię ImageUtils i zrób coś takiego ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

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

Swift 4 with customType:

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

W przypadku 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 :

To rozwiązanie może być wygodne, jeśli ustawiłeś już obraz za pomocą konstruktora interfejsu xCode. Zasadniczo masz jedno rozszerzenie do pokolorowania obrazu:

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

Następnie możesz przygotować to rozszerzenie UIButton, aby pokolorować obraz dla określonego stanu:

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

Stosowanie:

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

PS (działa dobrze również w komórkach tabeli, nie trzeba wywoływać setNeedDisplay()metody, zmiana koloru jest natychmiastowa z powodu rozszerzenia UIImage) .

Jeśli chcesz ręcznie maskować obraz, oto zaktualizowany kod, który działa z ekranami siatkówki

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

Powinieneś spróbować

Po ustawieniu ramki

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)

Zmień kolor przycisku lub kolor odcienia widoku obrazu Szybki:

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

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

Żadne z powyższych nie działało dla mnie, ponieważ odcień został wyczyszczony po kliknięciu. Musiałem użyć

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