带有圆角和阴影的 UICollectionViewCell 不起作用答案

【问题标题】：UICollectionViewCell with rounded corners AND drop shadow not working带有圆角和阴影的 UICollectionViewCell 不起作用
【发布时间】：2013-08-07 21:09:21
【问题描述】：

我希望我的 UICollectionViewCells 具有圆角和阴影，但我遇到了一个问题，我似乎只能拥有一个或另一个，但不能同时拥有。

为了绕过角落，我在单元格的初始化中使用了这段代码：

CALayer *layer = [self layer];
[layer setCornerRadius:4];
[layer setRasterizationScale:[[UIScreen mainScreen] scale]];
[layer setShouldRasterize:YES];

要添加阴影，我在单元格的初始化中使用以下代码：

CALayer *layer = [self layer];
[layer setMasksToBounds:NO];
[layer setRasterizationScale:[[UIScreen mainScreen] scale]];
[layer setShouldRasterize:YES];
[layer setShadowColor:[[UIColor blackColor] CGColor]];
[layer setShadowOffset:CGSizeMake(0.0f,0.5f)];
[layer setShadowRadius:8.0f];
[layer setShadowOpacity:0.2f];
[layer setShadowPath:[[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:layer.cornerRadius] CGPath]];

为了尝试圆角和阴影，我在单元格的初始化中使用了以下代码：

CALayer *layer = [self layer];
[layer setMasksToBounds:NO];
[layer setCornerRadius:4];
[layer setRasterizationScale:[[UIScreen mainScreen] scale]];
[layer setShouldRasterize:YES];
[layer setShadowColor:[[UIColor blackColor] CGColor]];
[layer setShadowOffset:CGSizeMake(0.0f,0.5f)];
[layer setShadowRadius:8.0f];
[layer setShadowOpacity:0.2f];
[layer setShadowPath:[[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:layer.cornerRadius] CGPath]];

但这只会产生阴影。

这是一个错误还是我做错了什么？

【问题讨论】：

我找到了解决办法。我在 Interface Builder 的 UICollectionViewCell 中添加了一个额外的 UIView（bgView），并将单元格的所有内容放入该 bgView 中。我还在单元格中创建了一个属性，并将一个 IBOutlet 连接到 bgView。在单元格的初始化中，我将阴影添加到单元格的图层。然后在我在 collectionView:cellForItemAtIndexPath: 中调用的 configCell 方法中，我将圆角添加到新的 bgView。我还必须确保将 UICollectionViewCell 的背景颜色设置为清晰。这行得通，但我仍然觉得不应该那么复杂。

标签： ios objective-c calayer uicollectionviewcell

【解决方案1】：

非常适合我：

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        ...
        cell.layer.masksToBounds = YES;
        cell.layer.cornerRadius = 6;
        ...
        return cell;
    }

【讨论】：

maskToBounds 会裁剪掉阴影效果。下面的拉尔克里希纳是一个更好的答案

【解决方案2】：

如果您将所有子视图放入UICollectionViewCell 内容视图中，您可能就是这样，您可以在单元格的图层上设置阴影并在contentView 的图层上设置边框以实现这两种结果。

cell.contentView.layer.cornerRadius = 2.0f;
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;

cell.layer.shadowColor = [UIColor lightGrayColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 1.0f;
cell.layer.masksToBounds = NO;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:cell.contentView.layer.cornerRadius].CGPath;

斯威夫特 4.0

cell.contentView.layer.cornerRadius = 2.0
cell.contentView.layer.borderWidth = 1.0
cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true
cell.layer.shadowColor = UIColor.lightGray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false
cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, cornerRadius: cell.contentView.layer.cornerRadius).cgPath

【讨论】：

应该在layoutSubviews里面设置：cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds,cornerRadius: cell.contentView.layer.cornerRadius).cgPath

【解决方案3】：

有一个棘手的时刻。偷工减料和阴影在一层中是互斥的功能。 Dropping shadow是frame扩展的过程，而corners是masking到bounds的过程。

解决方案在于功能分离。我建议为单元格层设置阴影，但为该单元格的 contentView 层偷工减料。

【讨论】：

【解决方案4】：

我想我遇到了类似的问题。我的问题是在我的UICollectionViewCell 子视图中的剪辑不能与阴影和圆形边框一起正常工作。当我在UIScrollView 中看到该视图（尽管作为标准UIView 子类）时，完全相同的代码工作得很好。

长话短说，在从-dequeueReusableCellWithReuseIdentifier:forIndexPath: 获得它之后，我将所有这些设置从initWithCoder 移到了稍后的位置。为我解决了这个问题。似乎UICollectionViews 在某些时候对他们的细胞层做了我不希望的事情？

【讨论】：

是的，这很奇怪。但是，在单元子类的 applyLayoutAttributes: 方法中进行设置对我有用。

【解决方案5】：

如果您使用子类来制作集合，请确保执行以下操作。

CALayer *layer = [self layer];
[layer setCornerRadius:_cornerRadius];
[layer setRasterizationScale:[[UIScreen mainScreen] scale]];
[layer setShouldRasterize:YES];
[layer setShadowColor:[[UIColor blackColor] CGColor]];
[layer setShadowOffset:CGSizeMake(0.0,4.0)];
[layer setShadowRadius:6.0f];
[layer setShadowOpacity:0.25];
[layer setShadowPath:[[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:layer.cornerRadius] CGPath]];

self.contentView.layer.cornerRadius = _cornerRadius;
self.contentView.layer.borderWidth= _borderWidth;
self.contentView.layer.borderColor = _borderColor.CGColor;
self.contentView.backgroundColor = [UIColor whiteColor];
self.backgroundColor = [UIColor clearColor];

像魅力一样工作。

【讨论】：