การเพิ่มมุมโค้งมนและเงาตกใน UICollectionViewCell

ดังนั้นผมแล้วเดินผ่านโพสต์ต่างๆเกี่ยวกับการเพิ่มมุมมองที่ 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ผมอยากจะทราบวิธีการเพิ่มมุมโค้งมนและเงา

วิธีแก้ปัญหาเหล่านี้ไม่ได้ผลสำหรับฉัน หากคุณวางมุมมองย่อยทั้งหมดของคุณลงในมุมมองเนื้อหา UICollectionViewCell ซึ่งคุณน่าจะเป็นคุณสามารถตั้งค่าเงาบนเลเยอร์ของเซลล์และเส้นขอบบนเลเยอร์ของ contentView เพื่อให้ได้ผลลัพธ์ทั้งสอง

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;

Swift 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

เวอร์ชัน Swift 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

ในกรณีที่ช่วยได้: นี่คือความรวดเร็วในการปัดเศษมุม:

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

โดยเซลล์เป็นตัวแปรควบคุมเซลล์: บ่อยครั้งคุณจะใช้สิ่งนี้ใน override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

สนุก!

นี่คือโซลูชันSwift 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

ตั้งค่าแอตทริบิวต์สำหรับมือถือที่ไม่ได้layercontentView

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

SWIFT 4.2

ควรเพิ่มสิ่งนี้ในเซลล์หรือเซลล์ที่กำหนดเองของคุณ

        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

ซึ่งจะทำให้คุณได้เซลล์ที่มีขอบโค้งมนและเงาตกกระทบ

นี่คือคำตอบของฉันใกล้กับคนอื่น ๆ แต่ฉันเพิ่มรัศมีมุมให้กับเลเยอร์มิฉะนั้นมุมจะไม่ถูกต้อง นอกจากนี้จะทำให้ส่วนขยายของเล็ก ๆ น้อย ๆ 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:)แหล่งข้อมูลเมื่อคุณเลิกจัดคิวเซลล์ของคุณ

คุณเพียงแค่ต้อง (a) ตั้งค่าcornerRadiusและ (b) shadowPathให้เป็นรูปสี่เหลี่ยมผืนผ้าโค้งมนที่มีรัศมีเดียวกับcornerRadius:

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

ฉันต้องทำการเปลี่ยนแปลงเล็กน้อยสำหรับSwift :

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;

คำตอบของ Mike Sabatini ทำงานได้ดีหากคุณกำหนดค่าคุณสมบัติของเซลล์โดยตรงบน collectionView cellForItemAt แต่ถ้าคุณพยายามตั้งค่าในคลาสย่อย wakeFromNib () ของ UICollectionViewCell ที่กำหนดเองคุณจะลงท้ายด้วยการตั้งค่า bezierPath ที่ไม่ถูกต้องบนอุปกรณ์ที่ไม่ ไม่ตรงกับความกว้างและความสูงที่ตั้งไว้ก่อนหน้านี้ใน Storyboard (IB) ของคุณ

ทางออกสำหรับฉันคือสร้าง func ภายในคลาสย่อยของ 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}
 }

ฉันใช้วิธีต่อไปนี้เพื่อให้ได้เอฟเฟกต์ประเภทนี้:

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

อันนี้ใช้ได้ผลสำหรับฉัน

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

คุณสามารถตั้งค่าสีเงารัศมีและออฟเซ็ตในวิธีUICollectionViewDataSourceในขณะที่สร้างUICollectionViewCell

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

นี่คือวิธีแก้ปัญหาของฉัน คล้ายกับคำตอบอื่น ๆ โดยมีข้อแตกต่างที่สำคัญอย่างหนึ่ง ไม่ได้สร้างเส้นทางที่ขึ้นอยู่กับขอบเขตของมุมมอง ทุกครั้งที่คุณสร้างเส้นทางตามขอบเขตและระบุไปยังเลเยอร์คุณจะพบปัญหาเมื่อปรับขนาดได้และต้องตั้งค่าวิธีการเพื่ออัปเดตเส้นทาง

วิธีแก้ปัญหาที่ง่ายกว่าคือหลีกเลี่ยงการใช้อะไรก็ตามที่ขึ้นอยู่กับขอบเขต

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

เมื่อใดก็ตามที่ขนาดของเซลล์เปลี่ยนมุมมอง API จะทำงานทั้งหมดภายใน

ฉันพบสิ่งสำคัญ: UICollectionViewCell ต้องมี backgroundColor เป็นclearสีเพื่อให้สิ่งเหล่านี้ทำงานได้