UICollectionViewCell के लिए गोल कोने और ड्रॉप छाया जोड़ना

Question

इसलिए मैं पहले से ही छाया को जोड़ने के लिए 2 दृश्य जोड़ने पर विभिन्न पोस्टों के माध्यम से चला गया, लेकिन मैं अभी भी इसे काम पर नहीं ला सकता हूं अगर मैं इसे जोड़ना चाहता हूं UICollectionViewCell। मैंने उप-वर्ग किया UICollectionViewCell, और यहां मेरा कोड है जहां मैं सेल के कंटेंट दृश्य में विभिन्न UI तत्वों को जोड़ता हूं और परत में छाया जोड़ता हूं:

[self.contentView setBackgroundColor:[UIColor whiteColor]];

self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(0, 1);
self.layer.shadowRadius = 1.0;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowOpacity = 0.5;
[self.layer setShadowPath:[[UIBezierPath bezierPathWithRect:self.bounds] CGPath]];

मैं यह जानना चाहूंगा कि गोल कोने और छाया को कैसे जोड़ा जाए UICollectionViewCell।

Comments

मुझे लगता है कि आपको दूसरों को समझने के लिए अपने प्रश्न को सुधारने की आवश्यकता है। यह वास्तव में गड़बड़ है कि आपने क्या पूछा है

— दिनेश राजा

ठीक है, मैं सिर्फ यह जानना चाहता हूं कि UICollectionViewCell में गोल कोने और छाया को कैसे जोड़ा जाए

— विन्सेन्ट

थोड़ा हटकर - शैडोराडियस या सेटशेडो पपथ का उपयोग करें, दोनों को करने में कोई मतलब नहीं है क्योंकि वे अनिवार्य रूप से इस संदर्भ में एक ही निर्देश हैं (सभी गोल कोनों)। एक छायापथ आवश्यक है जहां आप अधिक जटिल आकृतियों या गोल कोनों को सभी कोनों पर लागू नहीं करना चाहते हैं।

— ओलिवर डेंगी

Answer 1

इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया। यदि आप अपने सभी साक्षात्कारों को UICollectionViewCell सामग्री दृश्य में रखते हैं, जो कि आप शायद हैं, तो आप दोनों परिणामों को प्राप्त करने के लिए सामग्री की परत पर कक्ष और सीमा पर छाया सेट कर सकते हैं।

cell.contentView.layer.cornerRadius = 2.0f;
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;

cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:cell.contentView.layer.cornerRadius].CGPath;

स्विफ्ट 3.0

self.contentView.layer.cornerRadius = 2.0
self.contentView.layer.borderWidth = 1.0
self.contentView.layer.borderColor = UIColor.clear.cgColor
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.layer.shadowRadius = 2.0
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath

Comments

यह मेरे लिए अच्छी तरह से काम करने के बाद मैं जोड़ाcell.layer.backgroundColor = [UIColor clearColor].CGColor;

— nacross

किसी भी विचार क्यों यह केवल मेरे शीर्ष कोनों को गोल करता है?

— user3344977

@ user3344977 हो सकता है कि नीचे की ओर क्लिप लगी हो? के रूप में कोनों में गोल कर रहे हैं, लेकिन सेल के दृश्य भाग के नीचे

— CoderNinja

मुझे लगता है कि यह मेरे शीर्ष कोनों को गोल करता है और मेरे निचले कोनों को भी नहीं।

— फतहोकू 15

जब आप सेलेक्ट / डिलेक्ट / मूव सेल करते हैं तो आपको गोल रहने के लिए कोने कैसे मिलते हैं? मेरे कोनों को तब तक चौकोर किया जाता है जब तक मैं सेल पर सांस लेता हूं, इसके बाद शुरू में सही ढंग से खींचता है।

— एड्रियन

Answer 2

स्विफ्ट 3 संस्करण:

cell.contentView.layer.cornerRadius = 10
cell.contentView.layer.borderWidth = 1.0

cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).cgPath

Comments

मुझे प्रत्येक सेल के दाएं कोने और नीचे एक छाया प्रभाव जोड़ने की आवश्यकता है, और जिस तरह से कोड ऊपर काम करता है, वह एक छायादार रंग के साथ सेल को भर देता है ...

— जो सेंने

Answer 3

मामले में यह मदद करता है: यहां कोनों को गोल करने के लिए स्विफ्ट है:

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

सेल सेल को नियंत्रित करने वाला एक चर है: अक्सर, आप इस का उपयोग करेंगे override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

का आनंद लें!

Answer 4

यहां स्विफ्ट 4 समाधान, हर कोनों और न केवल शीर्ष कोनों को गोल करने के लिए अद्यतन किया गया है :

contentView.layer.cornerRadius = 6.0
contentView.layer.borderWidth = 1.0
contentView.layer.borderColor = UIColor.clear.cgColor
contentView.layer.masksToBounds = true

layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2.0)
layer.shadowRadius = 6.0
layer.shadowOpacity = 1.0
layer.masksToBounds = false
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath
layer.backgroundColor = UIColor.clear.cgColor

Comments

स्विफ्ट 4,2 में भी काम करता है, थेल्स

— ShadeToD

मैं एक समाधान की तलाश कर रहा था ... धन्यवाद छोटे मासिमो: 'डी

— मासिमो पॉलिमेनी

Answer 5

layerसेल के लिए विशेषताएँ सेट करें , नहीं contentView।

CALayer * layer = [cell layer];
[layer setShadowOffset:CGSizeMake(0, 2)];
[layer setShadowRadius:1.0];
[layer setShadowColor:[UIColor redColor].CGColor] ;
[layer setShadowOpacity:0.5]; 
[layer setShadowPath:[[UIBezierPath bezierPathWithRect:cell.bounds] CGPath]];

Comments

यह मेरे लिए काम नहीं लगता है। मैं एक यूटेबुल्यूसेल के लिए समान कोड का उपयोग करता हूं, लेकिन यह एक संग्रह दृश्य में काम नहीं करता है। यह अजीब है कि एक ही कोड cv सेल में कैसे काम करेगा।

— जेसन

मेरी उपरोक्त टिप्पणी के लिए एक अद्यतन। मैंने पाया कि UICollectionViewCells UITableViewCells की तुलना में एक अलग छाया ऑफसेट का उपयोग करता है। यदि आप एक छाया नहीं देख रहे हैं, तो ऑफसेट को बदलने की कोशिश करें (वाई मूल्य ने मेरी मदद की)।

— जेसन

Answer 6

स्विफ्ट 4.2

अपने कस्टम सेल या cellForItemAt में इसे जोड़ना चाहिए: यदि आप cellForItemAt का उपयोग कर रहे हैं: अप्रोच सेल्फ -> सेल

        self.layer.cornerRadius = 10
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.lightGray.cgColor

        self.layer.backgroundColor = UIColor.white.cgColor
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 2.0, height: 4.0)
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false

यह आपको एक गोल बॉर्डर और एक ड्रॉप शैडो के साथ एक सेल देगा।

Answer 7

यहां मेरा जवाब है, दूसरों के करीब है, लेकिन मैं एक कोने की त्रिज्या को परत में जोड़ता हूं अन्यथा कोने सही तरीके से नहीं भरेंगे। इसके अलावा, यह एक अच्छा सा विस्तार करता है UICollectionViewCell।

extension UICollectionViewCell {
func shadowDecorate() {
    let radius: CGFloat = 10
    contentView.layer.cornerRadius = radius
    contentView.layer.borderWidth = 1
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 1.0)
    layer.shadowRadius = 2.0
    layer.shadowOpacity = 0.5
    layer.masksToBounds = false
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
    layer.cornerRadius = radius
}

}

collectionView(_:cellForItemAt:)अपने सेल को डिलीट करने के बाद आप इसे डेटा स्रोत पर कॉल कर सकते हैं ।

Answer 8

आपको बस (ए) सेट cornerRadiusऔर (बी) सेट shadowPathकरने के लिए एक ही त्रिज्या के साथ एक गोल जड़ होना चाहिए cornerRadius:

self.layer.cornerRadius = 10;
self.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.layer.cornerRadius] CGPath];

Comments

किसी भी विचार क्यों यह केवल मेरे निचले कोनों को गोल करता है?

— user3344977

लगता है कि जो भी परत आप गोल कर रहे हैं वह आंशिक रूप से कुछ द्वारा अस्पष्ट है। विवरण के बिना उससे आगे नहीं जा सकते।

— तीमुथियुस मूस

हे टिम, मैंने बस यह सवाल पूछा था। मुझे लगता है कि आप इसे जल्दी से प्राप्त कर पाएंगे। क्या यह इसलिए है क्योंकि मेरे पास सेल के नीचे / "नीचे" पर छाया है? stackoverflow.com/q/27929735/3344977

— user3344977

Answer 9

मुझे स्विफ्ट के लिए कुछ मामूली बदलाव करने थे :

cell.contentView.layer.cornerRadius = 2.0;
cell.contentView.layer.borderWidth = 1.0;
cell.contentView.layer.borderColor = UIColor.clearColor().CGColor;
cell.contentView.layer.masksToBounds = true;

cell.layer.shadowColor = UIColor.grayColor().CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0);
cell.layer.shadowRadius = 2.0;
cell.layer.shadowOpacity = 1.0;
cell.layer.masksToBounds = false;
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).CGPath;

Answer 10

माइक सबातिनी का उत्तर ठीक काम करता है, यदि आप सेल गुणों को सीधे संग्रह व्यू सेलफॉरइमेटएएमएटी पर कॉन्फ़िगर करते हैं, लेकिन यदि आप उन्हें कस्टम UICollectionViewCell Cclass के awakeFromNib () में सेट करने का प्रयास करते हैं, तो आप उन डिवाइसों पर गलत bezierPath सेट के साथ समाप्त हो जाएंगे। आपके स्टोरीबोर्ड (IB) में पहले से सेट की गई चौड़ाई और ऊंचाई से मेल नहीं खाते।

मेरे लिए समाधान UICollectionViewCell के उपवर्ग के अंदर एक कवक पैदा कर रहा था और इसे इस तरह से CellForItemAt से कॉल कर रहा था:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? CustomCollectionViewCell{
        cell.configure())
        return cell
    }
    else {
        return UICollectionViewCell()
    }
}

और CustomCollectionViewCell.swift पर:

class CustomCollectionViewCell: UICollectionViewCell{
    func configure() {
    contentView.layer.cornerRadius = 20
    contentView.layer.borderWidth = 1.0
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2.0)
    layer.shadowRadius = 2.0
    layer.shadowOpacity = 0.5
    layer.masksToBounds = false
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath}
 }

Answer 11

यह एक मेरे लिए काम किया

cell.contentView.layer.cornerRadius = 5.0
cell.contentView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
cell.contentView.layer.borderWidth = 0.5

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: cell.contentView.frame.size.height - width, width:  cell.contentView.frame.size.width, height: cell.contentView.frame.size.height)

border.borderWidth = width
cell.contentView.layer.addSublayer(border)
cell.contentView.layer.masksToBounds = true
cell.contentView.clipsToBounds = true

Answer 12

मैं इस तरह के प्रभाव को पूरा करने के लिए निम्नलिखित विधि का उपयोग करता हूं:

extension UICollectionViewCell {
    /// Call this method from `prepareForReuse`, because the cell needs to be already rendered (and have a size) in order for this to work
    func shadowDecorate(radius: CGFloat = 8,
                        shadowColor: UIColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3),
                        shadowOffset: CGSize = CGSize(width: 0, height: 1.0),
                        shadowRadius: CGFloat = 3,
                        shadowOpacity: Float = 1) {
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true

        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = shadowOffset
        layer.shadowRadius = shadowRadius
        layer.shadowOpacity = shadowOpacity
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

Answer 13

UICollectionViewDataSource विधि में आप छाया रंग, त्रिज्या और ऑफसेट सेट कर सकते हैं, जबकि UICollectionViewDell

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 1.0
cell.layer.shadowOpacity = 0.5
cell.layer.masksToBounds = false

Answer 14

यहाँ मेरा समाधान पर ले रहा हूँ। यह एक महत्वपूर्ण अंतर के साथ अन्य उत्तरों के समान है। यह एक ऐसा मार्ग नहीं बनाता है जो दृश्य की सीमा पर निर्भर है। किसी भी समय आप सीमा के आधार पर एक रास्ता बनाते हैं और इसे उस परत को प्रदान करते हैं जिसे आप आकार बदलने पर मुद्दों में चला सकते हैं, और पथ को अपडेट करने के लिए सेटअप विधियों की आवश्यकता होती है।

एक सरल उपाय यह है कि किसी भी चीज का उपयोग करने से बचें जो सीमा पर निर्भर है।

let radius: CGFloat = 10

self.contentView.layer.cornerRadius = radius
// Always mask the inside view
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 1.0)
self.layer.shadowRadius = 3.0
self.layer.shadowOpacity = 0.5
// Never mask the shadow as it falls outside the view
self.layer.masksToBounds = false

// Matching the contentView radius here will keep the shadow
// in sync with the contentView's rounded shape
self.layer.cornerRadius = radius

अब जब कभी कोशिकाओं का आकार बदलता है, तो एपीआई आंतरिक रूप से सभी काम करेगा।

Comments

मेरी राय में सबसे साफ जवाब। त्रिज्या को सिंक में रखने के विचार से प्यार करें।

— Kirill Kudaev

Answer 15

मुझे एक महत्वपूर्ण बात मिली: clearइन उपरोक्त कार्य को करने के लिए UICollectionViewCell के पास रंग के रूप में पृष्ठभूमि रंग होना चाहिए ।

Comments

यह बहुत महत्वपूर्ण है कि छाया को न काटें! इस जवाब को अनदेखा न करें, धन्यवाद ए लॉट, यार!

— डेन्नीडॉग