রঙিন টিন্ট UIButton চিত্র


294

আমি লক্ষ্য করেছি যে আমি যখন কোনও সাদা বা কালো রঙের UIImageমধ্যে রাখি তখন সেগুলি UISegmentedControlস্বয়ংক্রিয়ভাবে রঙ করে এটি বিভাগিত নিয়ন্ত্রণের রঙের সাথে মেলে color আমি ভাবলাম এটি সত্যিই দুর্দান্ত, এবং আমি ভাবছিলাম যে আমি অন্য কোথাও এটিও করতে পারি। উদাহরণস্বরূপ, আমার কাছে একগুচ্ছ বোতাম রয়েছে যা সমান আকৃতিযুক্ত তবে বৈচিত্র্যযুক্ত রঙ রয়েছে। প্রতিটি বোতামের জন্য পিএনজি তৈরির পরিবর্তে, আমি কি কোনওভাবে এই সমস্ত রঙের জন্য একই চিত্র ব্যবহার করার জন্য এই রঙের মাস্কিং ব্যবহার করতে পারি তবে তার প্রকৃত রঙ পরিবর্তন করতে কোনও রঙিন রঙ বা কিছু সেট করতে পারি?


আপনি যে চিত্রটি ব্যবহার করতে চান তা এবং পছন্দসই ফলাফলের জন্য চিত্রও পোস্ট করতে পারেন?
প্রত্যুষা তেরলি

এই ইন্টারফেস রচয়িতা থেকে একই কাজ stackoverflow.com/a/25179217/2051381
Chuy47

উত্তর:


619

আইওএস 7 হিসাবে, UIImageরেন্ডারিং মোডটি নির্দিষ্ট করার জন্য একটি নতুন পদ্ধতি রয়েছে । রেন্ডারিং মোড ব্যবহার করে UIImageRenderingModeAlwaysTemplateচিত্রের রঙটি বোতামের রঙিন রঙের দ্বারা নিয়ন্ত্রণ করা যাবে।

উদ্দেশ্য গ

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

দ্রুতগতি

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

14
আমি মনে করি তার ভাল button.imageView.tintColor ব্যবহার করতে
M.Othman

3
@ M.Othman শুধুমাত্র আমার জন্য কাজ করে যখন আমি button.tintColor এবং button.imageview.tintColor ব্যবহার
pnizzle

32
@ হাশিয়ের প্রতি এক্সক্যাসেটে চিত্রটিতে চিত্র রেন্ডার মোড সেট করতে কেবল মনে রাখবেন
ডিন

23
UIButtonTypeSystem প্রকারের একটি UIButton তৈরি করা আপনার সেট করা রঙিন রঙটি স্বয়ংক্রিয়ভাবে সম্মানিত হবে।
carloshwa

4
যদি আপনার tintColorখুব অন্ধকার হয় তবে নিশ্চিত হয়ে নিন adjustsImageWhenHighlightedযে কোনওটি নেই। (বা আইবিতে: "হাইলাইটেড অ্যাডজাস্টস চিত্র" যাচাই করা আছে))
জেসন মুর

225

যেমন রিক ইতিমধ্যে তার পোস্টে উল্লেখ করেছে আপনি কোডে রেন্ডার মোডটি সেট করতে পারেন, আপনি এটি সরাসরি চিত্র ক্যাটালগটিতেও করতে পারেন, নীচে সংযুক্ত চিত্রটি দেখুন। শুধু সেট Render AsকরতেTemplate Image

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

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


1
পার্শ্ব নোট হিসাবে, ইমেজ ফাইলটি কালো এবং স্বচ্ছ হতে হবে (বি-
ডাব্লু

6
পছন্দ করেছেন আপনার ইমেজ আপনি চান এবং স্বচ্ছ যে কোনও রঙ হতে পারে। স্বচ্ছের চেয়ে আলাদা যে কোনও রঙ সাধারণ রঙে রূপান্তরিত হবে এবং তারপরে এটি ডিফল্টরূপে কালো রঙের সাথে মিশ্রিত হবে।
আলেজান্দ্রো ইভান

90

কাস্টম বোতামগুলি তাদের নিজ নিজ চিত্রের রঙগুলিতে উপস্থিত হয়। স্টোরিবোর্ডে (বা UIButtonTypeSystemকোডে) বোতামের প্রকারটি "সিস্টেম" এ সেট করা, বোতামটির চিত্রটি ডিফল্ট রঙিন রঙের সাথে রেন্ডার করবে।

বোতামের ধরণের সিস্টেম রেন্ডার আইকনগুলি রঙিত

(আইওএস 9, এক্সকোড 7.3 এ পরীক্ষিত)


2
যা এখানে প্রস্তাবিত সর্বদা টেম্পলেট এবং টিন্টকলার পদ্ধতিগুলি দিয়ে এড়ানো যায়। । সিস্টেম বোতামটি হওয়ায় আপনি আলতো চাপলে রঙে পরিবর্তন পাবেন tap
ক্রিস প্রিন্স

44

আপনি ছবিতে রেন্ডারিং মোড সেট করতে হবে UIImageRenderingModeAlwaysTemplateআছে অনুক্রমে tintColorUIImage প্রভাবিত। সুইফটে সমাধানটি এখানে দেওয়া হল:

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

সুইট 4x

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

28

আপনার যদি কোনও ব্যাকগ্রাউন্ড চিত্র সহ একটি কাস্টম বোতাম থাকে You

সম্পদে আপনি বোতামের রঙ সেট করতে চান বোতামের পটভূমি নির্বাচন করুন।

চিত্রটির বৈশিষ্ট্য পরিদর্শকটিতে মানটিকে "টেমপ্লেট চিত্র" হিসাবে রেন্ডার করে দেয়

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

এখন যখনই আপনি সেট করবেন button.tintColor = UIColor.redআপনি বোতামটি লাল দেখানো হবে।


আপনি যদি এখানে থাকেন তবে আপনি এই লিঙ্কটিতে যেতে পারেন: useyourloaf.com/blog/styling-buttons- using-theasset-catolog এবং টেমপ্লেট চিত্রগুলিতে নেমে যেতে (ব্যাখ্যা হিসাবে পরিবেশন করতে)
সিএসপিএমে

এটি কোড হ্রাস করার কারণে এটি একটি আরও ভাল সমাধান এবং গ্রহণযোগ্য উত্তরের মতো একই কাজটি করে।
ডিএস

আমি মনে করি এটি সঠিক হওয়া উচিত। কম কোড এবং পরিচালনা করা সহজ।
উমায়ের_উএএস

17

সুইফটে আপনি এটি এর মতো করতে পারেন:

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

তারপরে আপনার ভিউডিডলডে

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

এবং রঙ পরিবর্তন করতে

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

এক্সকোড 8 সম্পাদনা করুন এখন আপনি আপনার .xcassets এ টেমপ্লেট ইমেজে চিত্রটির রেন্ডারিং মোডটিও করতে পারেন এবং তারপরে আপনাকে var exampleImageআর এটি নির্দিষ্টভাবে ঘোষণা করার দরকার নেই


14

আপনি ঠিক কী চান তা নিশ্চিত নন তবে এই বিভাগের পদ্ধতিটি একটি নির্দিষ্ট রঙের সাথে একটি ইউআইআইমেজকে মাস্ক করবে যাতে আপনার একক চিত্র থাকতে পারে এবং আপনি যা চান তার রঙ পরিবর্তন করতে পারেন।

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

ইমেজউটিস বিভাগটি আমদানি করুন এবং এর মতো কিছু করুন ...

#import "ImageUtils.h"

...

UIImage *icon = [UIImage imageNamed:ICON_IMAGE];

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

3
ব্যবহার kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLastকরুনCGBitmapContextCreate
লুইস অ্যাসকরবে

4
দুর্দান্ত, তবে রেটিনা গ্রাফিক্সের জন্য টুইঙ্ক করা দরকার ... আমি যখন এটি একটি রেটিনা চিত্রটিতে চালিত করি তখন এটি আমাকে একটি নন-রেটিনা দেয়।
jowie

অক্ষিপট ডিভাইসের ব্যবহার সমর্থনের জন্য স্কেল সম্পত্তি ব্যবহার করতে পারে UIDeviceশ্রেণী: সম্পত্তি আইওএস 4.0 এর হিসাবে বিদ্যমান। CGFloat scale = [UIScreen mainScreen].scale; CGFloat width = self.size.width * scale; CGFloat height = self.size.height * scale;scale
ফিলিপ ফ্রিচমুথ

এছাড়াও আপনি ব্যবহার করতে হবে scaleমান যখন UIImage: তৈরি করা হয়UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:scale orientation:self.imageOrientation];
ফিলিপ Frischmuth

8

কাস্টম টাইপ সহ সুইফট 4:

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

5

Xamarin.iOS (সি #) এর জন্য:

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

5

সুইফট 3 :

আপনি যদি ইতিমধ্যে xCode ইন্টারফেস বিল্ডারের মাধ্যমে আপনার চিত্র সেট করে থাকেন তবে এই সমাধানটি আরামদায়ক হতে পারে। মূলত আপনার একটি চিত্র রঙিন করার জন্য একটি এক্সটেনশন রয়েছে:

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

তারপরে, আপনি নির্দিষ্ট রাজ্যের জন্য চিত্রটি রঙিন করতে এই ইউআইবাটন এক্সটেনশনটি প্রস্তুত করতে পারেন :

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

ব্যবহার:

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

পিএস (টেবিল কোষগুলিতেও ভাল কাজ করছে, আপনার ইউটিআইমেজ এক্সটেনশনের setNeedDisplay()কারণে রঙের পরিবর্তনটি অবিলম্বে কল করা দরকার ..


3

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

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

2

আপনার চেষ্টা করা উচিত্

ফ্রেম সেট করার পরে

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

}

2

সুইফট 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)

1

বোতামের চিত্র বা চিত্র দেখুন রঙিন রঙ পরিবর্তন করুন সুইফট:

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

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

-1

উপরের কোনওটিই আমার পক্ষে কাজ করেনি, কারণ ক্লিকের পরে রঙিন সাফ হয়ে গেছে। আমাকে ব্যবহার করতে হয়েছিল

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