Can't set shadow on UICollectionViewCell and have rounded corners. Can only make one work at a time

Question

I have a UICollectionViewCell subclass and I need to round its corners and add a shadow as well. The cell looks like a square card, and the cells have a good amount of space in-between them.

So "underneath" every cell, I would like to add some shadow. I can successfully do this, but then my cell only has rounded corners on the bottom. The top just has normal corners. I need rounded corners for all four corners.

I have found solutions on here for UIViews that recommend adding a separate UIView as a subview, but I would prefer to avoid this for performance reasons.

I did find one solution which was to use this method which you will find in my code below:

[UIBezierPath bezierPathWithRoundedRect: cornerRadius:]

But that didn't work for me either. Is it possible that it's not working for me because of how I'm trying to only add the shadow "underneath" / at the bottom of the cell? It seems like most of these answers are provided for questions where the developer wants to add a shadow around the entire cell.

I guess I would be willing to add a special subview to my UICollectionViewCell subclass, but I would like to use that as a last resort.

I am targeting iOS 7+ and using Xcode 6.1.1.

Here is the code I am using inside my UICollectionViewCell subclass to try and achieve both the shadow and the rounded corners:

- (void)load:(CustomUserObject *)customObject
{
    self.customObject = customObject;

    // Round cell corners
    self.layer.cornerRadius = 12;

    // Add shadow
    self.layer.masksToBounds = NO;
    self.layer.shadowOpacity = 0.75f;
    self.layer.shadowRadius = 10.0f;
    self.layer.shouldRasterize = NO;
    self.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(self.frame.size.width/2 - (self.frame.size.width - 50)/2, self.frame.size.height, self.frame.size.width - 50, 10) cornerRadius:self.layer.cornerRadius].CGPath;

}

EDIT: If I set self.layer.masksToBounds to NO, the shadow works but the top corners do not round. If I set self.layer.masksToBounds to YES, the shadow does not work, but all four corners are now rounded. I just can't figure out how to round all four corners and get the shadow to work.

Answer 1

After looking at the sample project that Timothy Moose was kind enough to share in the comments, I realized that I was literally doing everything almost exactly like he was.

Out of frustration, I revisited my cell's nib file and it finally hit me. I had added a UIView to the top of the cell. This view was serving as a colored banner and was also functioning as a container for another UIImageView and a UILabel.

The top of the UICollectionViewCell was successfully rounding the top corners, but you never would have known because the colored UIView was at the top of the cell and was just as wide as the cell.

Stupid mistake, many times its the little things.

Here is the final code I am using to achieve four rounded corners and a shadow underneath the UICollectionViewCell. self.banner is the extra UIView that was hiding the cell's top corners:

- (void)load:(CustomUserObject *)customObject
{
    self.customObject = customObject;

    // Round the banner's corners
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.banner.bounds
                                                   byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
                                                         cornerRadii:CGSizeMake(10, 10)];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.banner.bounds;
    maskLayer.path = maskPath.CGPath;
    self.banner.layer.mask = maskLayer;

    // Round cell corners
    self.layer.cornerRadius = 10;

    // Add shadow
    self.layer.masksToBounds = NO;
    self.layer.shadowOpacity = 0.75f;
    self.layer.shadowRadius = 10.0f;
    self.layer.shouldRasterize = NO;
    self.layer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(self.frame.size.width/2 - (self.frame.size.width - 50)/2, self.frame.size.height, self.frame.size.width - 50, 10)].CGPath;

}

Answer 2

func dropShadow() {
    self.layer.masksToBounds = false
    self.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
    self.layer.shadowOpacity = 0.5
    self.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
    self.layer.shadowRadius = 4.0
    self.layer.cornerRadius = 5.0
}

//To drop shadow use

cell.dropShadow()