无法在UICollectionViewCell上设置阴影并具有圆角。一次只能做一件工作

问题描述

我有一个 UICollectionViewCell 子类，我需要绕过它的角落并添加阴影。该单元格看起来像一张方形卡片，并且单元格之间有足够的空间。

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.

我在这里找到了 UIViews 的解决方案，建议添加一个单独的 UIView 作为 subview ，但是出于性能方面的考虑，我宁愿避免这种情况。

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.

我想我会愿意添加特殊的 subview 到我的 UICollectionViewCell 子类中，但我想将其作为最后的手段。

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.

我定位到 iOS 7 + 并使用 Xcode 6.1.1。

这是我在 UICollectionViewCell 子类中使用的代码，试图同时实现阴影和圆角：

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;

}

编辑：如果我设置 self .layer.masksToBounds 到 NO ，阴影有效，但上角不圆。如果将 self.layer.masksToBounds 设置为 YES ，则阴影将不起作用，但是所有四个角现在均已圆化。我只是想不出如何绕过所有四个角并使阴影起作用。

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.

推荐答案

看完示例之后蒂莫西·穆斯（Timothy Moose）善于在评论中分享这个项目，我意识到我实际上在做所有事情几乎都和他一样。

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.

出于沮丧，我重新审视了我的牢房 nib 文件，它终于打了我。我在单元格的顶部添加了 UIView 。该视图用作彩色横幅，还用作另一个 UIImageView 和 UILabel 的容器。

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.

UICollectionViewCell 的顶部圆角成功，但是您永远不会知道，因为彩色的 UIView 位于单元格的顶部，并且与单元格一样宽。

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.

这是我用来在 UICollectionViewCell 下实现四个圆角和阴影的最终代码。 self.banner 是隐藏单元格顶部角落的额外 UIView ：

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;

}

这篇关于无法在UICollectionViewCell上设置阴影并具有圆角。一次只能做一件工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！