Rounded corner radius with shadow in collection view cell

Question

I want to create cell with rounded corner radius and shadow. The problem is that my content view doesn't clip to bounds and leave empty spaces in corners

class CollectionViewCell: UICollectionViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        
        setupView()
    }

    func setupView() {

        self.contentView.layer.masksToBounds = true
        self.contentView.clipsToBounds = true
        self.layer.masksToBounds = false
        self.layer.cornerRadius = 15
        self.layer.borderWidth = 1
        self.layer.borderColor = Colors.greenColor.cgColor
        self.layer.shadowColor = UIColor.red.cgColor
        self.layer.shadowRadius = 5
        self.layer.shadowOpacity = 1.0
        self.contentView.layer.shadowOffset = CGSize(width: 0, height: 0)
        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
    }

I assume that the problem can be caused by code below, but I've changed values to 0 and it didn't help.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

}

I will appreciate for indicators.

you could find the solution here https://stackoverflow.com/questions/18113872/uicollectionviewcell-with-rounded-corners-and-drop-shadow-not-working/26976272 — belal medhat, Jan 30 '22 at 22:25

score 0 · Answer 1 · answered Jan 30 '22 at 22:59

you can try adding an additional View container

override func awakeFromNib() {
    super.awakeFromNib()
    
    let view = UIView(frame: CGRect(x: 10, y: 10, width: 60, height: 60))
    contentView.addSubview(view)
    
    view.layer.borderWidth = 2
    view.layer.cornerRadius = 15
    view.layer.borderColor = UIColor.gray.cgColor
    
    view.layer.shadowColor = UIColor.red.cgColor
    view.layer.shadowOffset = CGSize(width: 5, height: 5)
    view.layer.shadowRadius = 5
    view.layer.shadowOpacity = 1.0
    
}

score 0 · Answer 2 · answered Jan 31 '22 at 05:14

this extension will help you in storyboard:)

@IBDesignable extension UIView {

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

Rounded corner radius with shadow in collection view cell

2 Answers2