如何使 UICollectionViewCells 具有圆角和阴影？

Posted 2023-02-23

【中文标题】如何使 UICollectionViewCells 具有圆角和阴影？

【英文标题】：How to make UICollectionViewCells have rounded corners and drop shadows?

【发布时间】：2018-10-13 20:38:15

【问题描述】：

我已经看到类似问题的其他一些答案，但没有一个解决方案对我有用，即使进行了一些调整。

正如标题所示，我希望我的UICollectionViewCells 具有圆角和阴影（或除顶部外的所有侧面的阴影）。到目前为止，我所做的是将两个视图添加到我的UICollectionViewCell - mainView，它显示单元格的必要内容并具有圆角，以及shadowView，它具有阴影。两个视图都不是另一个视图的子视图，它们一起存在于同一个单元格中。它们的尺寸完全相同，mainView 显然显示在shadowView 之上。这是我当前的代码实现：

let mainView = cell.viewWithTag(1003) as! UIView       
mainView.layer.cornerRadius = 10.0
mainView.layer.borderWidth = 1.0
mainView.layer.borderColor = UIColor.clear.cgColor
mainView.layer.masksToBounds = true

let shadowView = cell.viewWithTag(1002) as! UIView
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOffset = CGSize(width: 0, height: 2.0)
shadowView.layer.shadowRadius = 2.0
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.masksToBounds = false
shadowView.layer.shadowPath = UIBezierPath(roundedRect: shadowView.bounds, cornerRadius: mainView.layer.cornerRadius).cgPath

以下是这段代码产生的结果： 有人会认为mainView的角不够圆，阴影不够大。

然而，在移除shadowView 并将UICollectionView 的背景设置为黑色后，您可以看到mainView 的角实际上是圆的：

所以这意味着问题在于shadowView 的阴影大小。但是，我尝试增加阴影偏移和阴影半径，但没有任何效果。大多数更改要么在mainView 周围产生了非常厚的阴影，要么进一步减少了mainView 的四舍五入，要么什么也没做。

这是故事板中相关UITableViewCell 的视图层次结构的图像：

【问题讨论】：

您是如何设法在单元格中添加左右间距的？我的单元格的阴影被容器视图切断

【参考方案1】：

这里是Cell 代码：

class CollectionViewCell: UICollectionViewCell 
    override init(frame: CGRect) 
        super.init(frame: frame)


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

        contentView.layer.masksToBounds = true
        layer.cornerRadius = 10
    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

这里是使用代码：

import UIKit

private let reuseIdentifier = "Cell"

class CollectionViewController: UICollectionViewController 

    override func viewDidLoad() 
        super.viewDidLoad()

        self.collectionView!.register(CollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
        (self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout).itemSize = CGSize(width: 100, height: 100)
    

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return 10
    

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
        cell.backgroundColor = .white
        return cell
    

结果如下：

【参考方案2】：

更新

感谢您通过环聊聊天。我下载了你的代码，mainView 和 shadowView 为零。

我注意到您对 CollectionViewCells 不满意。

话虽如此。我很高兴介绍我们的朋友Runtime Attributes

无需接触您的代码。选择一个视图并添加您的runtime attribute key 并设置值。

输出：

继续，为影子和其他人做些工作。

---

mainView 是四舍五入的，但 shadowView 占据了所有功劳。

您需要在两个视图上启用clipsToBounds：

mainView.clipsToBounds = true

【讨论】：

在两个视图上启用clipsToBounds 后，根本不会显示任何阴影或圆角。

'mainView'不是shadow view的子view吗？！如果我错了，请纠正我；我会更新我的代码

不，它们是同一个单元格中的不同视图。

@Kevin2566 “分离”是什么意思？其中之一必须是根视图。

根视图是集合视图。我所指的单元格仅包含两个视图 - shadowView 和 mainView。单元格本身内部没有单一的根视图。