বোতামগুলিতে পিএনগির রঙ পরিবর্তন করুন - আইওএস


95

আমি তৈরি করেছি এমন আইকনগুলির একটি সেট পেয়েছি যা স্বচ্ছ সাদা পিএনজি রয়েছে:

এখানে চিত্র বর্ণনা লিখুন

এবং আমি যা করতে চাই তা হ'ল এগুলি অন্য রঙগুলিতে আঁকতে সক্ষম। যেমন নীল, ধূসর ইত্যাদি

আমি লক্ষ্য করেছি যে 'ক্লিক / ট্যাপড' এগুলি স্বয়ংক্রিয়ভাবে ধূসরতে পরিবর্তিত হয়। সুতরাং আমি ধরে নিয়েছি যে আমি কোনও ধরণের ট্যাপ বা এর স্বাভাবিক অবস্থার সাহায্যে যা ধূসর তা পছন্দ করতে চাই:

এখানে চিত্র বর্ণনা লিখুন

এটি অর্জনের সর্বোত্তম উপায় কী হবে?

উত্তর:


231

নিম্নলিখিত কোডটি বোতামের স্বাভাবিক অবস্থার জন্য রঙিন রঙ সেট করবে:

সুইফট 4 এবং আরও নতুনদের জন্য:

let origImage = UIImage(named: "imageName")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
btn.setImage(tintedImage, for: .normal)
btn.tintColor = .red

যখন বাটনের জন্য রাষ্ট্র পরিবর্তন হয় তখন আপনি আপনার প্রয়োজন অনুযায়ী রঙিন রঙ পরিবর্তন করতে পারেন।


পুরানো সংস্করণ

সুইফট 3 এর জন্য:

let origImage = UIImage(named: "imageName")
let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
btn.setImage(tintedImage, forState: .normal)
btn.tintColor = .redColor

সুইফট 2 এর জন্য: পুনর্বিবেচনার ইতিহাস দেখুন।


আশ্চর্য! তবে আপনি কীভাবে মূল চিত্রটিতে ফিরে আসবেন (অ-রঙিত)?
মার্শম্যান

@ মার্সম্যান আপনি যদি আমার সমাধানটি অরিজিনায় দেখেন তবে চিত্রটি মূল চিত্রটির প্রতিনিধিত্ব করে এবং টিন্টেড ইমেজ মূল চিত্রটির রঙিন সংস্করণ উপস্থাপন করে, তাই আপনি মূল চিত্রটি প্রতিস্থাপন করছেন না তবে এর নতুন সংস্করণ তৈরি করছেন এবং আপনার একই চিত্রের দুটি সংস্করণ থাকবে যা আপনি ব্যবহার করতে পারবেন আপনার প্রয়োজন অনুসারে
যুবরাজিংহ

এক্সকোড 9.1 সহ আইওএস 11 এ কাজ করছে না। রঙের রঙ যুক্ত করার সময় এটি পুরোপুরি চিত্রের ভিউয়ের রঙ পরিবর্তন করে।
ভিনিশ টিপি

বিভিন্ন সম্পাদনা এই উত্তরে ভুলত্রুটি প্রবর্তন করেছে।
এরিক আয়া

13

আইওএস 7 টিউন্টক্লার নামে একটি সম্পত্তি দর্শনের জন্য প্রবর্তন করেছে (ইউআইআইমেজভিউ সহ)। তবে এর কোনও প্রভাব ফেলতে আপনাকে ইউআইআইমেজে রেন্ডারিং টাইপও সেট করতে হবে।

UIImage *originalImage = [UIImage imageNamed:@"image.png"];
UIImage *tintedImage = [originalImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imageView = [[UIImageView alloc] initWithImage:tintedImage];

imageView.tintColor = [UIColor grayColor];
[self.view addSubview:imageView];

এটির পরে আপনার পূর্ববর্তী অবস্থায় থাকা প্রভাবটি তৈরি করা উচিত।


10

আপনি এই এক্সটেনশনটি ব্যবহার করতে পারেন:

import UIKit

extension CGContext {

    func fill(_ rect: CGRect,
              with mask: CGImage,
              using color: CGColor) {

        saveGState()
        defer { restoreGState() }

        translateBy(x: 0.0, y: rect.size.height)
        scaleBy(x: 1.0, y: -1.0)
        setBlendMode(.normal)

        clip(to: rect, mask: mask)

        setFillColor(color)
        fill(rect)
    }
}

extension UIImage {

    func filled(with color: UIColor) -> UIImage {
        let rect = CGRect(origin: .zero, size: self.size)
        guard let mask = self.cgImage else { return self }

        if #available(iOS 10.0, *) {
            let rendererFormat = UIGraphicsImageRendererFormat()
            rendererFormat.scale = self.scale

            let renderer = UIGraphicsImageRenderer(size: rect.size,
                                                   format: rendererFormat)
            return renderer.image { context in
                context.cgContext.fill(rect,
                                       with: mask,
                                       using: color.cgColor)
            }
        } else {
            UIGraphicsBeginImageContextWithOptions(rect.size,
                                                   false,
                                                   self.scale)
            defer { UIGraphicsEndImageContext() }

            guard let context = UIGraphicsGetCurrentContext() else { return self }

            context.fill(rect,
                         with: mask,
                         using: color.cgColor)
            return UIGraphicsGetImageFromCurrentImageContext() ?? self
        }
    }
}

4
এটি আমার পক্ষেও কাজ করে না। আমি যখন এই পদ্ধতিটি ব্যবহার করি, তখন আমি যা দেখি তা রঙ the রঙটি রঙিন নয়।
মোবিয়াস

9

চিত্র পরিবর্তনের জন্য ( চয়ন করুন , শাস্ত্রীয় চিত্র , ছবি ) এটি ব্যবহার করুন:

উদাহরণ চিত্র: এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন

সুইফট 2

public extension UIImage {
    /**
     Tint, Colorize image with given tint color<br><br>
     This is similar to Photoshop's "Color" layer blend mode<br><br>
     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<br><br>

     <img src="http://yannickstephan.com/easyhelper/tint1.png" height="70" width="120"/>

     **To**

     <img src="http://yannickstephan.com/easyhelper/tint2.png" height="70" width="120"/>

     - parameter tintColor: UIColor

     - returns: UIImage
     */
    public func tintPhoto(tintColor: UIColor) -> UIImage {

        return modifiedImage { context, rect in
            // draw black background - workaround to preserve color of partially transparent pixels
            CGContextSetBlendMode(context, .Normal)
            UIColor.blackColor().setFill()
            CGContextFillRect(context, rect)

            // draw original image
            CGContextSetBlendMode(context, .Normal)
            CGContextDrawImage(context, rect, self.CGImage)

            // tint image (loosing alpha) - the luminosity of the original image is preserved
            CGContextSetBlendMode(context, .Color)
            tintColor.setFill()
            CGContextFillRect(context, rect)

            // mask by alpha values of original image
            CGContextSetBlendMode(context, .DestinationIn)
            CGContextDrawImage(context, rect, self.CGImage)
        }
    }
    /**
     Tint Picto to color

     - parameter fillColor: UIColor

     - returns: UIImage
     */
    public func tintPicto(fillColor: UIColor) -> UIImage {

        return modifiedImage { context, rect in
            // draw tint color
            CGContextSetBlendMode(context, .Normal)
            fillColor.setFill()
            CGContextFillRect(context, rect)

            // mask by alpha values of original image
            CGContextSetBlendMode(context, .DestinationIn)
            CGContextDrawImage(context, rect, self.CGImage)
        }
    }
    /**
     Modified Image Context, apply modification on image

     - parameter draw: (CGContext, CGRect) -> ())

     - returns: UIImage
     */
    private func modifiedImage(@noescape draw: (CGContext, CGRect) -> ()) -> UIImage {

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

        // correctly rotate image
        CGContextTranslateCTM(context, 0, size.height);
        CGContextScaleCTM(context, 1.0, -1.0);

        let rect = CGRectMake(0.0, 0.0, size.width, size.height)

        draw(context, rect)

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

ইউপিডি

সুইফট 3

extension UIImage {

    /**
     Tint, Colorize image with given tint color<br><br>
     This is similar to Photoshop's "Color" layer blend mode<br><br>
     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<br><br>

     <img src="http://yannickstephan.com/easyhelper/tint1.png" height="70" width="120"/>

     **To**

     <img src="http://yannickstephan.com/easyhelper/tint2.png" height="70" width="120"/>

     - parameter tintColor: UIColor

     - returns: UIImage
     */
    func tintPhoto(_ tintColor: 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)
            tintColor.setFill()
            context.fill(rect)

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

    /**
     Tint Picto to color

     - parameter fillColor: UIColor

     - returns: UIImage
     */
    func tintPicto(_ 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!
    }

}

আপনি কি আমাকে বলতে পারেন যে এই পদ্ধতিগুলি কীভাবে ব্যবহার করবেন তার মানে কীভাবে তাদের কল করা যায়?
ashmi123

এটি আমার পক্ষে মোটেও কাজ করে না। আমি বোতামের চিত্র হিসাবে একটি পিএনজি সেট আছে। আমি যখন টিন্টফো বা টিন্টপিক্টো ব্যবহার করি তখন এগুলি কেবল কাজ করে না।
মোবিয়াস

রেন্ডারিংমোড (.ালওয়েস টেম্পলেট) দিয়ে আপনি নিজের ছবিটি যুক্ত করবেন? @ মোবিবিয়াস
ইয়ানস্টেফ

হ্যাঁ, এবং আমি যখন যে কোনও রক পদ্ধতি ব্যবহার করি তখন সমস্ত রঙ is আমি এমনকি রঙের আলফাটি 0.5 তে সেট করেছি এবং এখনও আমি কেবল রঙটি দেখতে পাচ্ছি। সুইফট 4
মোবিয়াস

ঠিক আছে @ মোয়েবিয়াসের পরে আলফা প্রয়োগ করুন
ইয়ানস্টেফ

9

আপনি যদি কোনও বোতামের জন্য চিত্রটি সেট করে থাকেন তবে কেবলমাত্র বৈশিষ্ট্য পরিদর্শকের কাছে যান এবং বোতামের ধরণটি সিস্টেমে পরিবর্তন করুন। তারপরে চিত্রটি সেট করুন এবং রঙের রঙ পরিবর্তন করুন। চিত্রের রঙ পরিবর্তন হবে। যদি এটি না ঘটে থাকে তবে বোতামের প্রকারটি পরীক্ষা করুন।


9

সুইফট 4 বা 5

extension UIButton{

    func setImageTintColor(_ color: UIColor) {
        let tintedImage = self.imageView?.image?.withRenderingMode(.alwaysTemplate)
        self.setImage(tintedImage, for: .normal)
        self.tintColor = color
    }

}

ব্যবহার:

button.setImage(UIImage(named: "image_name"), for: .normal) // You can set image direct from Storyboard
button.setImageTintColor(UIColor.white)

ইউআইবিটন ভিউয়ের জন্য ইমেজটিন্ট কালার সেট করার কোনও পদ্ধতি নেই
ওয়াহাব খান

এটি ইউআইবাটনটির একটি এক্সটেনশন। আমি উপরে তৈরি করেছি।
ক্রুনাল প্যাটেল

6

আপনি যদি সম্পদ ক্যাটালগ ব্যবহার করেন তবে আপনি টেমপ্লেট মোডে রেন্ডার করতে ইমেজটি সম্পদ নিজেই সেট করতে পারেন। এর পরে আপনি ইন্টারফেস বিল্ডারে বোতামটির টিন্টকালার সেট করতে পারেন (বা কোডে) এবং এটি নেওয়া উচিত।


সম্পদ ক্যাটালগটিতে আপনি একবারে চিত্রটি টেমপ্লেট মোডে সেট করে রাখার কারণে আপনি একাধিক জায়গায় একই চিত্র ব্যবহার করছেন তবে এটি সেরা পদ্ধতির।
জোনাথন ক্যাবেরা

এই পদ্ধতিটি আমার পক্ষে কার্যকর হয়নি। যখন আমি একটি টেমপ্লেট চিত্র হিসাবে একটি পিএনজি সেট করি এবং তারপরে রঙিন রঙ সেট করি, তখন চিত্রটি রঙের রঙ দ্বারা প্রতিস্থাপন করা হয়।
মোবিয়াস

এটি আমার জন্যও সেরা পন্থা। অনেক ধন্যবাদ. সহজ সহজ পুনরায় ব্যবহারযোগ্য ...
আল্পারস্লান সেলুক ডিভিলিওলু

4

সুইফট 4

    let origImage = UIImage(named: "check")
    let tintedImage = origImage?.withRenderingMode(.alwaysTemplate)
    buttons[0].setImage(tintedImage, for: .normal)
    buttons[0].tintColor = .red

3

আপনি যদি সম্পদ ক্যাটালগ ব্যবহার করেন তবে আপনি টেমপ্লেট মোডে রেন্ডার করতে ইমেজটি সম্পদ নিজেই সেট করতে পারেন। এর পরে আপনি ইন্টারফেস বিল্ডারে বোতামটির টিন্টকালার সেট করতে পারেন (বা কোডে) এবং এটি নেওয়া উচিত।


3

আমি নীচে সবচেয়ে সহজ পন্থা পেয়েছি,

ওপেন assetcatalog এবং ইমেজ নির্বাচন তারপর যেতে বৈশিষ্ট্যাবলী পরিদর্শক এবং পরিবর্তন Render Asকরার জন্য Template Imageনিচের

এখানে চিত্র বর্ণনা লিখুন

তারপরে অ্যাকশন পদ্ধতিতে বোতামের নীচে কোড যুক্ত করুন

yourButton.tintColor = .gray

-1

সুইফট 4 এবং 4.2

let img = UIImage.init(named: "buttonName")?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
            btn.setImage(img, for: .normal)
            btn.tintColor = .gray

এখানে চিত্র বর্ণনা লিখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.