स्टोरीबोर्ड / xib फ़ाइल से UIImage प्रतिपादन मोड को संशोधित करें


93

यह एक संशोधित करने के लिए संभव है UIImageकी renderingModeएक स्टोरीबोर्ड या xib संपादक से?

लक्ष्य tintColorविशेष UIImageViewवस्तु पर लागू होता है ।

जवाबों:


101

यहां बताया गया है कि आप इसे .xib या स्टोरीबोर्ड फ़ाइलों में कैसे कर सकते हैं:

(ओब्ज-सी) पर एक श्रेणी बनाएँ UIImageView:

@interface UIImageView (Utils)

- (void)setImageRenderingMode:(UIImageRenderingMode)renderMode;

@end

@implementation UIImageView (Utils)

- (void)setImageRenderingMode:(UIImageRenderingMode)renderMode
{
    NSAssert(self.image, @"Image must be set before setting rendering mode");
    self.image = [self.image imageWithRenderingMode:renderMode];
}

@end

(स्विफ्ट 4) इसके लिए एक एक्सटेंशन बनाएं UIImageView:

extension UIImageView {
    func setImageRenderingMode(_ renderMode: UIImage.RenderingMode) {
        assert(image != nil, "Image must be set before setting rendering mode")
        // AlwaysOriginal as an example
        image = image?.withRenderingMode(.alwaysOriginal)
    }
}

फिर xib फ़ाइल में पहचान निरीक्षक में, रनटाइम विशेषता जोड़ें:

यहां छवि विवरण दर्ज करें


44
मुझे इस जवाब से प्यार है, यह सवाल का जवाब है।
algal

1
मैं कुंजी मूल्य सेटिंग करने के बजाय एक UIImageView उपवर्ग बनाना पसंद करूंगा। क्योंकि, इसे स्थापित करना आसान है और हम संख्या सेटिंग से गणना मूल्य से बच सकते हैं। उदाहरण के लिए: `@ कार्यान्वयन का खाका RenderingImageView - (आईडी) initWithCoder: (NSCoder *) aDecoder {self = [super initWithCoder: aDecoder]; if (self) {self.image = [self.image imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate]; } स्व; } @ अंत`
जॉन फंतासी

1
बहुत बढ़िया जवाब! स्क्रीनशॉट मददगार थे।
BigSauce

1
लॉन्च स्क्रीन.एक्सिब के साथ काम नहीं करता है क्योंकि आप उपयोगकर्ता परिभाषित रनटाइम विशेषताओं का उपयोग नहीं कर सकते हैं।
स्टीव मोजर

3
एक मान के रूप में हार्डकॉडिंग 2 खराब बुरी बुरी है .. xcassets कैटलॉग का उपयोग सही उत्तर है।
tililani

198

आप छवि रेंडरिंग मोड को .xibफाइल में नहीं , बल्कि .xcassetsलाइब्रेरी में सेट कर सकते हैं ।

किसी एसेट लाइब्रेरी में एक छवि जोड़ने के बाद, छवि का चयन करें और Xcode के दाईं ओर विशेषताएँ निरीक्षक खोलें। विशेषता 'रेंडर अस' को ढूंढें और इसे 'टेम्प्लेट' पर सेट करें।

छवि के रेंडरिंग मोड को सेट करने के बाद, आप छवि रंग को समायोजित करने के लिए UIImageViewएक .xibया .storyboardफ़ाइल में एक टिंट रंग जोड़ सकते हैं ।

यह संपत्ति को छवि पर सेट करता है जहाँ यह केवल एक इंटरफ़ेस बिल्डर फ़ाइल में उपयोग किया जाता है, लेकिन लगभग सभी मामलों में (जो मैंने सामना किया है) यह वह व्यवहार है जो आप चाहते हैं।

एक छवि के लिए गुण निरीक्षक दिखा Xcode का स्क्रीनशॉट

ध्यान देने योग्य कुछ बातें:

  • छवि का रंग इंटरफ़ेस बिल्डर (Xcode 6.1.1 के रूप में) में परिवर्तित नहीं हुआ है, लेकिन जब अनुप्रयोग चलाया जाएगा तो काम करेगा।
  • मैंने इस सुविधा के साथ कुछ दुर्व्यवहार का अनुभव किया है और कुछ स्थितियों में मुझे हटाना और पुनः जोड़ना पड़ा है UIImageView। मैंने उस पर गहराई से गौर नहीं किया है।
  • यह भी इस UIKitComponentsतरह के चित्र के रूप में अन्य पर महान काम करता है UIButtonऔर UIBarButtonItemएस।
  • यदि आपके पास सफेद छवियों का एक गुच्छा है जो आपकी परिसंपत्ति पुस्तकालय में अदृश्य हैं, तो उन्हें काले / पारदर्शी चित्र बनाने और रेंडरिंग मोड को बदलने से आपका जीवन 10 गुना बेहतर हो जाएगा।

15
टिंट रंग के साथ एक बग प्रतीत होता है UIImageView, इसलिए एप्लिकेशन चलाते समय टिंट रंग हमेशा नहीं दिखाया जाता है।
फॉग

@Fogh मेरे पास कुछ असंगत कीड़े जैसे भी थे। क्या टिंट का रंग निर्धारित करना प्रोग्राम को ठीक करता है?
एंथनी मैटॉक्स

2
मैं पुष्टि कर सकता हूं कि आईबी में टिंट रंग सेट करते समय एक समस्या है। इसे प्रोग्रामेटिक रूप से सेट करना काम करता है। मैंने इसके लिए एक बग # 20305518 दर्ज किया।
निकोले डेरकच

1
@AxelGuilmin युप। वास्तव में केवल अल्फा चैनल का उपयोग किया जाता है, इसलिए यह किसी भी रंग का हो सकता है जब तक कि पारदर्शिता वही हो जो आप चाहते हैं।
एंथनी मैटॉक्स

1
यह अब Xcode 7.3 (7D175) के साथ काम करता है! यद्यपि स्वीकृत उत्तर एक बहुत ही सहज ज्ञान युक्त हल है, लेकिन मैं इसके बजाय इस उत्तर को प्राथमिकता देता हूं।
nstein

43

टेम्प्लेट या xib में UIImageView के साथ टेम्प्लेट रेंडरिंग मोड का उपयोग करना बहुत ही छोटी गाड़ी है, जो iOS 7 और iOS 8 दोनों पर है।

IOS 7 पर

UIImage स्टोरीबोर्ड / xib से ठीक से डिकोड नहीं किया गया है। यदि आप विधि imageView.image.renderingModeमें संपत्ति का निरीक्षण करते हैं viewDidLoad, तो आप देखेंगे कि यह हमेशा होता है UIImageRenderingModeAutomatic, भले ही आप इसे अपने xcassets फ़ाइल में टेम्पलेट छवि के रूप में रेंडर करने के लिए सेट करें।

वर्कअराउंड करने के लिए, आपको मैन्युअल रूप से रेंडरिंग मोड सेट करना होगा:

self.imageView.image = [self.imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

IOS 8 पर

UIImage ठीक से डिकोड किया गया है और इसकी renderingModeसंपत्ति दर्शाती है कि xcassets फ़ाइल में क्या चुना गया था लेकिन छवि टिंटेड नहीं है।

वर्कअराउंड करने के लिए, आपके पास दो विकल्प हैं:

  1. सेट tintColorमें संपत्ति उपयोगकर्ता निर्धारित क्रम गुण के बजाय निरीक्षक फलक गुण।

या

  1. मैन्युअल रूप से tintColor रीसेट करें:
UIColor *tintColor = self.imageView.tintColor;
self.imageView.tintColor = nil;
self.imageView.tintColor = tintColor;

आप अपना पसंदीदा विकल्प चुन सकते हैं, दोनों ही छवि को ठीक से चित्रित कर सकते हैं।

(यदि आप Xcode 6.2 के साथ संकलित कर रहे हैं, तो बस करना self.imageView.tintColor = self.imageView.tintColor;काफी है, लेकिन यदि आप Xcode 6.3 के साथ संकलन कर रहे हैं तो यह अब और काम नहीं करता है)

निष्कर्ष

यदि आपको आईओएस 7 और आईओएस 8 दोनों का समर्थन करने की आवश्यकता है, तो आपको दोनों वर्कआर्ड की आवश्यकता होगी। यदि आपको केवल iOS 8 का समर्थन करना है, तो केवल एक वर्कअराउंड की आवश्यकता है।


2
धन्यवाद। केवल वर्कअराउंड # 2 मेरे लिए Xcode 7 और iOS 8 में काम कर रहा है
surfrider

3
मैं पुष्टि करता हूं कि iOS 8 के लिए iOS 8 के लिए वर्कअराउंड भी मूल्यवान है।
माइकल पिरोटे

1
मैं निश्चित रूप से एक्सकोड 7 पर एक ही चीज देख रहा हूं - उपयोगकर्ता विशेषता समाधान ठीक था। धन्यवाद!
जियोफ्रे विस्मैन

मैन्युअल रूप से takeColor को awakeFromNib में रीसेट करना यह किया! (छवि .xcassets कैटलॉग में भी टेम्प्लेट करने के लिए सेट की गई थी, अन्यथा आपको मूल से एक टेम्प्लेट छवि बनानी होगी)। धन्यवाद!!
घोड़े की नाल

15

ImageView RenderingMode को स्टोरीबोर्ड में टिंट रंग का उपयोग करने के लिए सेट करना एक-लाइनर के लिए कम किया जा सकता है:

[self.imageView setImage:[self.imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]];

तब छवि और टिंट रंग सभी स्टोरीबोर्ड में सेट किए जा सकते हैं।


13

आप एक एक्सटेंशन के साथ .xib मुद्दों को ठीक कर सकते हैं:

import UIKit

// fixing Bug in XCode
// http://openradar.appspot.com/18448072
extension UIImageView {
    override open func awakeFromNib() {
        super.awakeFromNib()
        self.tintColorDidChange()
    }
}

स्त्रोत: https://gist.github.com/buechner/3b97000a6570a2bfbc99c005cb010bac

कमाल है, यह बग अब लगभग 4-5 साल से है।


3
इसे उत्तर के रूप में चुना जाना चाहिए
farzadshbfn

अभी भी एक बग और यह अभी भी iOS 12.0 के रूप में इसे ठीक करता है।
सैम सोफेस

अभी भी iOS 12.1 में एक बग
Cesare

असत्य लोग, असत्य।
Mat

8

आप या renderingModeतो से सेट नहीं कर storyboardसकते xib। यह प्रोग्रामेटिक रूप से एक्सेस कर सकता है।

उदाहरण के लिए:

UIImage *unSeletedImage = [UIImage imageNamed:@"UnSelected.png"];
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

3
मुझे लगता है, आपने अपने कोड में छोटे टाइप किए हैं। दूसरी पंक्ति होनी चाहिएUIImage *selectedImage = [unSeletedImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
आर्टेम स्टीफनेंको

8

स्टोरीबोर्ड में टिंटकलर और क्लास सेट करें।

//
//  TintColoredImageView.swift
//  TintColoredImageView
//
//  Created by Dmitry Utmanov on 14/07/16.
//  Copyright © 2016 Dmitry Utmanov. All rights reserved.
//

import UIKit

@IBDesignable class TintColoredImageView: UIImageView {

    override var image: UIImage? {
        didSet {
            let _tintColor = self.tintColor
            self.tintColor = nil
            self.tintColor = _tintColor
        }
    }


    override init(frame: CGRect) {
        super.init(frame: frame)
        initialize()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initialize()
    }

    override init(image: UIImage?) {
        super.init(image: image)
        initialize()
    }

    override init(image: UIImage?, highlightedImage: UIImage?) {
        super.init(image: image, highlightedImage: highlightedImage)
        initialize()
    }

    func initialize() {
        let _tintColor = self.tintColor
        self.tintColor = nil
        self.tintColor = _tintColor
    }

}

यह एकमात्र उत्तर है जिसने नई स्विफ्ट पर काम किया है। धन्यवाद।
साइमन मैकोनो

मेरे लिए कुछ अजीब कारण के लिए काम नहीं करता है ... क्या यह स्टोरीबोर्ड में रंग को अपडेट करना है?
Cesare

4

इसे ठीक करना बहुत आसान है

बस कक्षा UIImageViewPDF बनाएं और इसे अपने स्टोरीबोर्ड में उपयोग करें

IB_DESIGNABLE
@interface UIImageViewPDF : UIImageView

@end

@implementation UIImageViewPDF

- (void) didMoveToSuperview
{
    [super didMoveToSuperview];
    self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    id color = self.tintColor;
    self.tintColor = color;
}

@end

3

एक और समाधान एक UIImageViewउपवर्ग बनाने के लिए है :

final class TemplateImageView: UIImageView {
    override func awakeFromNib() {
        super.awakeFromNib()
        guard let oldImage = image else { return }
        image = nil
        image = oldImage.withRenderingMode(.alwaysTemplate)
    }
}

फिर बस क्लास को इंटरफ़ेस बिल्डर में सेट करें TemplateImageView


सबसे अच्छा उपाय !!
इरशाद मोहम्मद

2

स्टोरीबोर्ड से सेट होने का सरल तरीका:

@IBDesignable
public class CustomImageView: UIImageView {
    @IBInspectable var alwaysTemplate: Bool = false {
        didSet {
            if alwaysTemplate {
                self.image = self.image?.withRenderingMode(.alwaysTemplate)
            } else {
                self.image = self.image?.withRenderingMode(.alwaysOriginal)
            }

        }
    }
}

IOS 10 और स्विफ्ट 3 पर ठीक काम करता है


1

IOS 9 tintColorमें इंटरफ़ेस बिल्डर में संपत्ति अभी भी छोटी है।

ध्यान दें कि ImageViewगुणों को सीधे लिखने वाली लाइनों को लिखने के अलावा एक काम करने वाला समाधान रेंडर को सेट करना है: एसेट कैटलॉग में टेम्प्लेट इमेज, और कॉल जैसे:

[[UIImageView appearanceWhenContainedInInstancesOfClasses:@[[MyView class]]] setTintColor:[UIColor whiteColor]];

1

मैंने tintColorइंटरफ़ेस बिल्डर में रनटाइम विशेषता जोड़कर इस मुद्दे को ठीक किया ।

नोट: आपको अभी भी अपनी छवियों को अपनी Images.xcassets फ़ाइल में टेम्पलेट छवि के रूप में प्रस्तुत करने की आवश्यकता होगी।

यहां छवि विवरण दर्ज करें


0

यदि आप एक IBOutlet बनाते हैं तो आप इसे अपनी awakeFromNib विधि में बदल सकते हैं ...

self.myImageView.image = [self.myImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

जबकि @ Moby का उत्तर अधिक सही है - यह अधिक रसीला हो सकता है।


1
प्रश्न यह था कि इसे स्टोरीबोर्ड (या xib) में कैसे किया जाए, कोड में नहीं।
आर्टेम स्टेपानेंको

@artem - हाँ, क्षमा करें, मुझे यह अनुमान लगाने का कोई मतलब नहीं था कि मेरे पास आपके प्रश्न का उत्तर है। एक IBOutlet के माध्यम से इस से निपटने का एक सरल तरीका इंगित करता है
amergin

0

पागल यह बग अभी भी iOS 12.1 में है! स्टोरीबोर्ड / xibs के लिए: UIImageView के लिए एक टैग जोड़ना एक त्वरित फिक्स हो सकता है।

स्विफ्ट 4.2

view.viewWithTag(1)?.tintColorDidChange()

0
extension UIImageView {

   @IBInspectable var renderModeTemplate : Bool {
       get{
           return image?.renderingMode == .alwaysTemplate
       }

       set{
          image = image?.withRenderingMode(newValue ? .alwaysTemplate:.alwaysOriginal)
       }
   }
}

स्टोरीबोर्ड में UIImageView चुनें और निरीक्षक का चयन करें, संपत्ति सेट करें renderModeTemplate= On स्टोरीबोर्ड में


0

जैसा कि रुडोल्फ ने भी ऊपर उल्लेख किया है , मैं इस तरह से एक साधारण वर्ग को परिभाषित करूंगा:

import UIKit

@IBDesignable class TintImage: UIImageView{
    override func layoutSubviews() {
        super.layoutSubviews()
 
        image = image?.withRenderingMode(.alwaysTemplate)
    }
}

इस परिभाषा के बाद, बस स्टोरीबोर्ड में एक छवि दृश्य जोड़ें और इसके कस्टम वर्ग को चुनें TintImage। यह स्टोरीबोर्ड में "टिंट" चयन को सक्रिय करेगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.