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.

Karlkarla

Is there a reason you're trying to construct your own shadowPath instead of letting the system trace the layer? – Grigg

Have you tried shadowOffset? – Randalrandall

@IanMacDonald I just found an SO answer earlier on how to add shadow and that's how they were doing it. – Karlkarla

If you use self.layer.shadowRadius, self.layer.shadowOpacity, and self.layer.shadowOffset, the system will trace the edges of your layer. If you were to use an irregular mask (ie, a png with jagged transparent edges), it would trace those as well without requiring you to construct the path. – Grigg

Actually, it sounds like you might be using self.layer on the wrong object. If you want individual cells to have four rounded corners, make sure that self refers to the cell. If it refers to the collection view, then it will round the corners of the list (two top corners and two bottom corners). – Grigg

@IanMacDonald I removed the shadow path line and added offset. You are correct, but my top corners still won't round. Also, self does refer to the cell. This code is inside my UICollectionViewCell subclass. – Karlkarla

If you have multiple cells, are all of them flat on the top and rounded at the bottom? – Grigg

@IanMacDonald Yes, they are all consistent and stay that way even when scrolling. – Karlkarla

I pasted your code above into a custom cell and it rendered all four round corners. So I'd suggest you post more code and perhaps a screenshot. Note you should set shadowPath in setBounds (after calling [super setBounds:]) so that it gets updated anytime the bounds change. – Adorable

@TimothyMoose Would you be willing to share your code here as an answer, or better yet maybe even uploading the entire project file somewhere so I can download and look in Xcode? I tried overriding setBounds in the subclass and setting the shadow path there and it's still not working. – Karlkarla

@TimothyMoose If you would be willing to share a Github gist or upload the project somewhere that would be greatly appreciated. I looked at your screenshot and that is exactly what I am trying to achieve. Thanks! – Karlkarla

Here it is. The view controller subclasses TLCollectionViewController, but that class does absolutely nothing to the cell other than dequeue it. I'd suggest moving more and more parts of your code into this project until it breaks and then you'll have a good idea whats wrong. – Adorable

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;

}

Karlkarla

Glad you fixed it. My initial comment was that something must be obscuring it :) – Adorable

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()

Tartarean