क्यों मास्कटबाउंड्स = यस कैलेयर छाया को रोकता है?

Question

निम्नलिखित स्निपेट के साथ, मैं एक ड्रॉप छाया प्रभाव को अपने एक UIView में जोड़ रहा हूं। जो बहुत अच्छा काम करता है। लेकिन जैसे ही मैंने व्यू के मास्कटॉब्स प्रॉपर्टी को YES पर सेट किया । ड्रॉप छाया प्रभाव किसी भी अधिक प्रदान नहीं किया गया है।

self.myView.layer.shadowColor = [[UIColor blackColor] CGColor];
self.myView.layer.shadowOpacity = 1.0;
self.myView.layer.shadowRadius = 10.0;
self.myView.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
self.myView.layer.cornerRadius = 5.0;
self.myView.layer.masksToBounds = YES; // <-- This is causing the Drop shadow to not be rendered
UIBezierPath *path = [UIBezierPath bezierPathWithCurvedShadowForRect:self.myView.bounds];
self.myView.layer.shadowPath = path.CGPath;
self.myView.layer.shouldRasterize = YES;

क्या आपके पास इस पर कोई विचार है?

Answer 1

क्योंकि छाया दृश्य के बाहर किया गया एक प्रभाव है, और जो मास्क YES पर सेट होता है, वह UIV को बताएगा कि वह कुछ भी आकर्षित नहीं करेगा जो कि स्वयं बाहर है।

यदि आप छाया के साथ एक गोलाकार दृश्य चाहते हैं तो मेरा सुझाव है कि आप इसे 2 विचारों के साथ करें:

UIView *view1 = [[UIView alloc] init];
UIView *view2 = [[UIView alloc] init];

view1.layer.cornerRadius = 5.0;
view1.layer.masksToBounds = YES;
view2.layer.cornerRadius = 5.0;
view2.layer.shadowColor = [[UIColor blackColor] CGColor];
view2.layer.shadowOpacity = 1.0;
view2.layer.shadowRadius = 10.0;
view2.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
[view2 addSubview:view1];
[view1 release];

Comments

शापित! यह समझ आता है!

— 13:42 पर jchatard

बहुत बहुत धन्यवाद ... इसने मेरी बहुत मदद की। आप के लिए आभारी .. :)

— innodeasapps

बस एक नोट, सुनिश्चित करें कि इस मामले में पर्यवेक्षक [view2] का एक स्पष्ट पृष्ठभूमि रंग है, यह मेरी समस्या वैसे भी थी

— एडम कार्टर

@GangstaGraham सुनिश्चित करें कि आप view1 को view1 के उप-भाग के रूप में जोड़ रहे हैं।

— pxpgraphics

वास्तव में मुझे क्या चाहिए!

— रोहन सैनप

Answer 2

यह अब iOS 6 है, चीजें बदल सकती हैं। TheSquad का जवाब मेरे लिए तब तक काम नहीं करता जब तक कि मैं एक और पंक्ति जोड़ने में कामयाब नहीं हो जाता view2.layer.masksToBounds = NO;, अन्यथा छाया दिखाई नहीं देती। हालाँकि दस्तावेज़ कहता masksToBoundsहै कि डिफ़ॉल्ट रूप से NO है, मेरा कोड इसके विपरीत दिखाता है।

यहां बताया गया है कि मैं छाया के साथ एक गोल कोने वाला बटन कैसे बनाता हूं, जो मेरे ऐप में सबसे अधिक उपयोग किए जाने वाले कोड स्निपेट में से एक है।

button.layer.masksToBounds = YES;
button.layer.cornerRadius = 10.0f;

view.layer.masksToBounds = NO;      // critical to add this line
view.layer.cornerRadius = 10.0f;
view.layer.shadowOpacity = 1.0f;
// set shadow path to prevent horrible performance
view.layer.shadowPath = 
    [UIBezierPath bezierPathWithRoundedRect:_button.bounds cornerRadius:10.0f].CGPath;      

[view addSubview:button];

संपादित करें

यदि विचारों को एनिमेटेड या स्क्रॉल करने की आवश्यकता है, तो masksToBounds = YESटैक्स प्रदर्शन में उल्लेखनीय रूप से, जिसका अर्थ है कि एनीमेशन शायद लड़खड़ा जाएगा। गोल कोने और छाया और चिकनी एनीमेशन या स्क्रॉलिंग प्राप्त करने के लिए, इसके बजाय निम्नलिखित कोड का उपयोग करें:

button.backgroundColor = [UIColor clearColor];
button.layer.backgroundColor = [UIColor redColor].CGColor;
button.layer.masksToBounds = NO;
button.layer.cornerRadius = 10.0f;

view.layer.shadowOpacity = 0.5f;
view.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:_button.bounds cornerRadius:10.0f].CGPath;
view.layer.shadowOffset = CGSizeMake(0.0f, 4.0f);
view.layer.shadowRadius = 2.0f;
view.layer.masksToBounds = NO;
view.layer.cornerRadius = 10.0f;  

[view addSubview:button];

Comments

पहले उत्तर के लिए +1। आपके अपडेट किए गए उत्तर गोल कोनों के लिए काम नहीं करेंगे .. यदि आप "मास्क" को "NO" पर सेट करते हैं तो गोल कोने गायब हो जाएंगे। अच्छा प्रदर्शन प्राप्त करने के लिए आप "shouldRasterize" संपत्ति का उपयोग करने के बदले बदलने के बजाय।

— दिनेश राजा

यह अब 2020 में काम करता है। इतना आसान समाधान सिर्फ एक लाइन जोड़ने के लिए।

— 3

Answer 3

यह @TheSquad द्वारा पोस्ट किए गए उत्तर का स्विफ्ट 3 और IBDesignable संस्करण है।

मैंने स्टोरीबोर्ड फ़ाइल में परिवर्तन करते समय उसी अवधारणा का उपयोग किया। पहले मैंने अपना targetView स्थानांतरित किया (वह जिसे एक नए कंटेनर व्यू के अंदर कोने की त्रिज्या और छाया की आवश्यकता होती है) । तब मैंने कोड की निम्नलिखित पंक्तियाँ जोड़ दीं (संदर्भ: https://stackoverflow.com/a/35372901/419192 ) UIView क्लास के लिए कुछ IBDesignable विशेषताएँ जोड़ने के लिए:

@IBDesignable extension UIView {
/* The color of the shadow. Defaults to opaque black. Colors created
 * from patterns are currently NOT supported. Animatable. */
@IBInspectable var shadowColor: UIColor? {
    set {
        layer.shadowColor = newValue!.cgColor
    }
    get {
        if let color = layer.shadowColor {
            return UIColor(cgColor: color)
        }
        else {
            return nil
        }
    }
}

/* The opacity of the shadow. Defaults to 0. Specifying a value outside the
 * [0,1] range will give undefined results. Animatable. */
@IBInspectable var shadowOpacity: Float {
    set {
        layer.shadowOpacity = newValue
    }
    get {
        return layer.shadowOpacity
    }
}

/* The shadow offset. Defaults to (0, -3). Animatable. */
@IBInspectable var shadowOffset: CGPoint {
    set {
        layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)
    }
    get {
        return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)
    }
}

/* The blur radius used to create the shadow. Defaults to 3. Animatable. */
@IBInspectable var shadowRadius: CGFloat {
    set {
        layer.shadowRadius = newValue
    }
    get {
        return layer.shadowRadius
    }
}

/* The corner radius of the view. */
@IBInspectable var cornerRadius: CGFloat {
    set {
        layer.cornerRadius = newValue
    }
    get {
        return layer.cornerRadius
    }
}

इस कोड को जोड़ने के बाद, मैं स्टोरीबोर्ड पर वापस गया और अपने कंटेनर व्यू का चयन करने पर मुझे अब निरीक्षकों में विशेषताओं का एक नया सेट मिल सकता है:

अपनी पसंद के अनुसार इन विशेषताओं के लिए मूल्यों को जोड़ने के अलावा, मैंने अपने लक्ष्य दृश्य में एक कोने की त्रिज्या भी जोड़ी और मास्कटॉब्स प्रॉपर्टी को सच के रूप में सेट किया।

आशा है कि ये आपकी मदद करेगा :)

Answer 4

StoryBoard के साथ 3.0 संस्करण स्विफ्ट

@ TheSquad के साथ भी यही विचार है। वास्तविक दृश्य के तहत एक नया दृश्य बनाएं और निचले दृश्य में छाया जोड़ें।

1. वास्तविक दृश्य के तहत एक दृश्य बनाएँ

UIViewअपने लक्ष्य दृश्य के रूप में एक ही बाधा के साथ स्टोरीबोर्ड पर खींचें । लक्ष्य दृश्य के लिए बाध्य करने के लिए क्लिप की जाँच करें। यह भी सुनिश्चित करें कि नए दृश्य को लक्ष्य दृश्य से पहले सूचीबद्ध किया गया है ताकि लक्ष्य दृश्य नए दृश्य को कवर करे।

2. अब अपने कोड ऐड शैडो पर नए व्यू को लिंक करें

यह सिर्फ एक नमूना है। आप यहां जो चाहें कर सकते हैं

shadowView.layer.masksToBounds = false
shadowView.layer.shadowColor = UIColor.red.cgColor
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowOffset = CGSize(width: -1, height: 1)
shadowView.layer.shadowRadius = 3

shadowView.layer.shadowPath = UIBezierPath(rect: coverImage.bounds).cgPath
shadowView.layer.shouldRasterize = true

Answer 5

मेरे पास छाया और गोल कोनों के साथ कठोर प्रदर्शन के मुद्दे भी थे। शैडोपैथ भाग का उपयोग करने के बजाय, मैंने निम्नलिखित पंक्तियों का उपयोग किया, जिसने प्रदर्शन हिट को पूरी तरह से हल किया:

self.layer.shouldRasterize = YES;
self.layer.rasterizationScale = UIScreen.mainScreen.scale;

Comments

हालांकि, इस के साथ स्क्रीन को चेतन या रिलेआउट नहीं कर सकते।

— वान डू ट्रान

Answer 6

यहाँ समाधान में से एक है:

     @IBOutlet private weak var blockView: UIView! {
         didSet {
          blockView.backgroundColor = UIColor.white
          blockView.layer.shadowColor = UIColor.black.cgColor
          blockView.layer.shadowOpacity = 0.5
          blockView.layer.shadowOffset = CGSize.zero

          blockView.layer.cornerRadius = 10
        }
      }
      @IBOutlet private weak var imageView: UIImageView! {
        didSet {
          imageView.layer.cornerRadius = 10
          imageView.layer.masksToBounds = true

          imageView.layer.shouldRasterize = true
        }
      }