ios - मैं आईओएस और वॉचकिट में छवि टिंटकॉलर कैसे बदल सकता हूं




swift uiimage (12)

अगर आप स्पष्ट बटन को प्रतिस्थापित करने के लिए एक छवि रखते हैं तो आप इसे स्विफ्ट 3 में उपयोग कर सकते हैं

func addTextfieldRightView(){

    let rightViewWidth:CGFloat = 30

    let viewMax = self.searchTxt.frame.height
    let buttonMax = self.searchTxt.frame.height - 16

    let buttonView = UIView(frame: CGRect(
        x: self.searchTxt.frame.width - rightViewWidth,
        y: 0,
        width: viewMax,
        height: viewMax))

    let myButton = UIButton(frame: CGRect(
        x: (viewMax - buttonMax) / 2,
        y: (viewMax - buttonMax) / 2,
        width: buttonMax,
        height: buttonMax))

    myButton.setImage(UIImage(named: "BlueClear")!, for: .normal)

    buttonView.addSubview(myButton)

    let clearPressed = UITapGestureRecognizer(target: self, action: #selector(SearchVC.clearPressed(sender:)))
    buttonView.isUserInteractionEnabled = true
    buttonView.addGestureRecognizer(clearPressed)

    myButton.addTarget(self, action: #selector(SearchVC.clearPressed(sender:)), for: .touchUpInside)

    self.searchTxt.rightView = buttonView
    self.searchTxt.rightViewMode = .whileEditing
}

मेरे पास UIImageView है जिसे "द इमेज व्यू" कहा जाता है, यूआईएममेज के साथ एक ही रंग (पारदर्शी पृष्ठभूमि) में नीचे बाएं काले दिल की तरह। आईओएस 7+ नेविगेशन बार आइकनों में उपयोग की जाने वाली टिंट विधि के अनुसार, मैं आईओएस 7 या उससे ऊपर में प्रोग्रामेटिक रूप से इस छवि के टिंट रंग को कैसे बदल सकता हूं?

क्या यह विधि वॉचकिट में ऐप्पल वॉच ऐप के लिए भी काम कर सकती है?


Subclass जो कोड और इंटरफेस बिल्डर से भी इस्तेमाल किया जा सकता है:

@implementation TintedImageView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setup];
    }
    return self;
}

-(void)setup {
    self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
}

@end

अगर कोई UIImageView बिना समाधान की देखभाल करता है:

// (Swift 3)
extension UIImage {
    func tint(with color: UIColor) -> UIImage {
        var image = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()

        image.draw(in: CGRect(origin: .zero, size: size))
        image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}

अब मैं डंकन बैबेज प्रतिक्रिया में आधारित इस विधि का उपयोग करता हूं:

+ (UIImageView *) tintImageView: (UIImageView *)imageView withColor: (UIColor*) color{
    imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    [imageView setTintColor:color];
    return imageView;
}

छवि के चित्र ( चित्र , शास्त्रीय छवि , फोटो ) बदलें कि इसका उपयोग करें:

फंक्शन टिंट इमेज स्विफ्ट 3:

import UIKit

// MARK: - Extensions UIImage

public extension UIImage {

    /// Tint, Colorize image with given tint color
    /// This is similar to Photoshop's "Color" layer blend mode
    /// This is perfect for non-greyscale source images, and images that 
    /// have both highlights and shadows that should be preserved<br><br>
    /// white will stay white and black will stay black as the lightness of 
    /// the image is preserved
    ///
    /// - Parameter TintColor: Tint color
    /// - Returns:  Tinted image
    public func tintImage(with fillColor: UIColor) -> UIImage {

        return modifiedImage { context, rect in
            // draw black background - workaround to preserve color of partially transparent pixels
            context.setBlendMode(.normal)
            UIColor.black.setFill()
            context.fill(rect)

            // draw original image
            context.setBlendMode(.normal)
            context.draw(cgImage!, in: rect)

            // tint image (loosing alpha) - the luminosity of the original image is preserved
            context.setBlendMode(.color)
            fillColor.setFill()
            context.fill(rect)

            // mask by alpha values of original image
            context.setBlendMode(.destinationIn)
            context.draw(context.makeImage()!, in: rect)
        }
    }

    /// Tint pictogram with color
    /// Method work on single colors without fading, mainly for svg images
    ///
    /// - Parameter fillColor: TintColor: Tint color
    /// - Returns:             Tinted image
    public func tintPictogram(with fillColor: UIColor) -> UIImage {

        return modifiedImage { context, rect in
            // draw tint color
            context.setBlendMode(.normal)
            fillColor.setFill()
            context.fill(rect)

            // mask by alpha values of original image
            context.setBlendMode(.destinationIn)
            context.draw(cgImage!, in: rect)
        }
    }

    /// Modified Image Context, apply modification on image
    ///
    /// - Parameter draw: (CGContext, CGRect) -> ())
    /// - Returns:        UIImage
    fileprivate func modifiedImage(_ draw: (CGContext, CGRect) -> ()) -> UIImage {

        // using scale correctly preserves retina images
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        let context: CGContext! = UIGraphicsGetCurrentContext()
        assert(context != nil)

        // correctly rotate image
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)

        let rect = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)

        draw(context, rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}
}

छवि के टिंट ( एसवीजी , अद्वितीय रंग ) का उपयोग करें कि संपत्ति में टेम्पलेट छवि के साथ:

समारोह टिंटचित्रचित्र स्विफ्ट 3:

import UIKit

// MARK: - Extensions UIImage

public extension UIImage {

    /// Tint pictogram with color
    /// Method work on single colors without fading, mainly for svg images
    ///
    /// - Parameter fillColor: TintColor: Tint color
    /// - Returns:             Tinted image
    public func tintPictogram(with fillColor: UIColor) -> UIImage {

        return modifiedImage { context, rect in
            // draw tint color
            context.setBlendMode(.normal)
            fillColor.setFill()
            context.fill(rect)

            // mask by alpha values of original image
            context.setBlendMode(.destinationIn)
            context.draw(cgImage!, in: rect)
        }
    }

    /// Modified Image Context, apply modification on image
    ///
    /// - Parameter draw: (CGContext, CGRect) -> ())
    /// - Returns:        UIImage
    fileprivate func modifiedImage(_ draw: (CGContext, CGRect) -> ()) -> UIImage {

        // using scale correctly preserves retina images
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        let context: CGContext! = UIGraphicsGetCurrentContext()
        assert(context != nil)

        // correctly rotate image
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)

        let rect = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)

        draw(context, rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}

तेजी से 3 उद्देश्यों के लिए

theImageView.image = theImageView.image!.withRenderingMode(.alwaysTemplate) theImageView.tintColor = UIColor.red


मुझे इसे एक extension का उपयोग करके स्विफ्ट में करना था।

मैंने सोचा कि मैं साझा करूंगा कि मैंने यह कैसे किया:

extension UIImage {
    func imageWithColor(color1: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color1.setFill()

        let context = UIGraphicsGetCurrentContext() as CGContextRef
        CGContextTranslateCTM(context, 0, self.size.height)
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, CGBlendMode.Normal)

        let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
        CGContextClipToMask(context, rect, self.CGImage)
        CGContextFillRect(context, rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage
        UIGraphicsEndImageContext()

        return newImage
    }
}

उपयोग:

theImageView.image = theImageView.image.imageWithColor(UIColor.redColor())

स्विफ्ट 4

extension UIImage {
    func imageWithColor(color1: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color1.setFill()

        let context = UIGraphicsGetCurrentContext()
        context?.translateBy(x: 0, y: self.size.height)
        context?.scaleBy(x: 1.0, y: -1.0)
        context?.setBlendMode(CGBlendMode.normal)

        let rect = CGRect(origin: .zero, size: CGSize(width: self.size.width, height: self.size.height))
        context?.clip(to: rect, mask: self.cgImage!)
        context?.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

उपयोग:

theImageView.image = theImageView.image?.imageWithColor(color1: UIColor.red)


यह मेरा यूआईएममेज एक्सटेंशन है और आप सीधे छवि के लिए ChangeTintColor फ़ंक्शन का उपयोग कर सकते हैं।

extension UIImage {

    func changeTintColor(color: UIColor) -> UIImage {
        var newImage = self.withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(self.size, false, newImage.scale)
        color.set()
        newImage.draw(in: CGRect(x: 0.0, y: 0.0, width: self.size.width, height: self.size.height))
        newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }

    func changeColor(color: UIColor) -> UIImage {
        let backgroundSize = self.size
        UIGraphicsBeginImageContext(backgroundSize)
        guard let context = UIGraphicsGetCurrentContext() else {
            return self
        }
        var backgroundRect = CGRect()
        backgroundRect.size = backgroundSize
        backgroundRect.origin.x = 0
        backgroundRect.origin.y = 0

        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        context.setFillColor(red: red, green: green, blue: blue, alpha: alpha)
        context.translateBy(x: 0, y: backgroundSize.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.clip(to: CGRect(x: 0.0, y: 0.0, width: self.size.width, height: self.size.height),
                 mask: self.cgImage!)
        context.fill(backgroundRect)

        var imageRect = CGRect()
        imageRect.size = self.size
        imageRect.origin.x = (backgroundSize.width - self.size.width) / 2
        imageRect.origin.y = (backgroundSize.height - self.size.height) / 2

        context.setBlendMode(.multiply)
        context.draw(self.cgImage!, in: imageRect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage!
    }

}

इस तरह का उदाहरण उपयोग

let image = UIImage(named: "sample_image")
imageView.image = image.changeTintColor(color: UIColor.red)

और आप छवि रंग बदलने के लिए परिवर्तन परिवर्तन रंग समारोह का उपयोग कर सकते हैं


स्टोरीबोर्ड और छवि संपत्ति में। आप इन दोनों को भी बदल सकते हैं:

टेम्पलेट छवि में रेंडर मोड अपडेट करें

दृश्य में टिंट रंग अपडेट करें।


स्विफ्ट के साथ

let commentImageView = UIImageView(frame: CGRectMake(100, 100, 100, 100))
commentImageView.image = UIImage(named: "myimage.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
commentImageView.tintColor = UIColor.blackColor()
addSubview(commentImageView)

आईओएस

Interfacebuilder से इसे करने के लिए समाधान, keyPath में टेम्पलेट इमेज पैरा सेट करें और आपको आईबी से रंग रंग चुनें

extension UIImageView {

// make template image with tint color
var templateImage: Bool {
    set {
        if newValue, let image = self.image {
            let newImage = image.withRenderingMode(.alwaysTemplate)
            self.image = newImage
        }
    } get {
        return false
    }
}

}


आईओएस
आईओएस ऐप के लिए, स्विफ्ट 3 या 4 में:

theImageView.image = theImageView.image!.withRenderingMode(.alwaysTemplate)
theImageView.tintColor = UIColor.red

स्विफ्ट 2:

theImageView.image = theImageView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
theImageView.tintColor = UIColor.redColor()

इस बीच, आधुनिक उद्देश्य-सी समाधान है:

theImageView.image = [theImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[theImageView setTintColor:[UIColor redColor]];

Watchkit
ऐप्पल वॉच ऐप के लिए वॉचकिट में, आप टेम्पलेट छवि के लिए टिंट रंग सेट कर सकते हैं।

  1. आपको अपनी वॉचकिट ऐप में एक एसेट कैटलॉग में अपनी छवि जोड़नी होगी, और छवि सेट को विशेषता निरीक्षक में टेम्पलेट छवि के रूप में प्रस्तुत करने के लिए सेट करना होगा। एक आईफोन ऐप के विपरीत, आप वर्तमान में वॉचकिट एक्सटेंशन में कोड में टेम्पलेट प्रतिपादन सेट नहीं कर सकते हैं।
  2. अपने ऐप के लिए इंटरफ़ेस बिल्डर में अपने WKInterfaceImage में उस छवि को सेट करने के लिए सेट करें
  3. WKInterfaceImage के लिए 'WImage' नामक आपके WKInterfaceController में एक आईबीओटलेट बनाएं ...

फिर स्विफ्ट 3 या 4 में टिंट रंग सेट करने के लिए:

theImage.setTintColor(UIColor.red)

स्विफ्ट 2:

theImage.setTintColor(UIColor.redColor())

फिर उद्देश्य-सी में टिंट रंग सेट करने के लिए:

[self.theImage setTintColor:[UIColor redColor]];

यदि आप टेम्पलेट छवि का उपयोग करते हैं और टिंट रंग लागू नहीं करते हैं, तो आपके वॉचकिट ऐप के लिए ग्लोबल टिंट लागू किया जाएगा। यदि आपने ग्लोबल टिंट सेट नहीं किया है, तो टेम्पलेट छवि के रूप में उपयोग किए जाने पर इमेज डिफ़ॉल्ट रूप से हल्का नीला रंग theImage जाएगा।





watchkit