It is not possible to set the shadow to a UICollectionViewCell and have rounded corners. Can only do one job at a time

Question

I have a subclass of UICollectionViewCell and I need to round its corners and add a shadow. A cell looks like a square map, and the cells have a good space between them.

So, “below” each cell, I would like to add a shadow. I can do this, but then my camera only has rounded corners at the bottom. The top just has normal angles. I need rounded corners for all four corners.

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

I found one solution that should have used this method, which you will find in my code below:

[UIBezierPath bezierPathWithRoundedRect: cornerRadius:]

But that didn't work either. Is it possible that this does not work for me due to the way I try to add only the shadow “bottom” / bottom of the cell? It seems that most of these answers are provided for questions on which the developer wants to add a shadow around the entire cell.

I suppose I would like to add a special subview to my subclass of UICollectionViewCell , but I would like to use it as a last resort.

I am targeting iOS 7+ and using Xcode 6.1.1.

Here is the code I'm using inside my subclass of UICollectionViewCell to try to achieve shadow and 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 are not rounded. If I set self.layer.masksToBounds to YES , the shadow does not work, but all four corners are rounded. I just can't figure out how to get around all four corners and make the shadow work.

Answer 1

Looking at a sample project, Timothy Moose was kind enough to share comments, I realized that I literally do everything almost the same way he did.

Due to disappointment, I again looked at my nib cell nib and it finally hit me. I added a UIView to the top of the cell. This view served as a color banner and also functioned as a container for other UIImageView and UILabel .

Top The UICollectionViewCell successfully rounded the top corners, but you would never know, because the color UIView was at the top of the cell and was as wide as the cell.

Stupid mistake, many times her little things.

Here is the last code that I use to achieve four rounded corners and shadow under a UICollectionViewCell . self.banner is an optional UIView that UIView top corners of the cell:

 - (void)load:(CustomUserObject *)customObject { self.customObject = customObject; // Round the banner 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 use shadow usage

cell.dropShadow ()