Ios 如何使UICollectionViewCell具有圆角和阴影？

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

正如标题所示，我希望我的

UICollectionViewCell

s具有圆角和阴影（或除顶部以外的所有侧面的阴影）。到目前为止，我所做的是将两个视图添加到我的

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

视图层次结构的图像：

更新 谢谢你的闲聊。我下载了你的代码，

mainView

和

shadowView

为零

• 我注意到你对CollectionViewCells不太满意

这么说吧。我非常高兴向大家介绍我们的朋友

运行时属性

不接触你的代码。选择一个视图并添加

运行时属性键

，然后设置值

输出：

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

---

mainView

是四舍五入的，但是

shadowView

占据了所有的积分

您需要在两个视图上启用

clipstobunds

：

mainView.clipsToBounds = true

使现代化 谢谢你的闲聊。我下载了你的代码，

mainView

和

shadowView

为零

• 我注意到你对CollectionViewCells不太满意

这么说吧。我非常高兴向大家介绍我们的朋友

运行时属性

不接触你的代码。选择一个视图并添加

运行时属性键

，然后设置值

输出：

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

---

mainView

是四舍五入的，但是

shadowView

占据了所有的积分

您需要在两个视图上启用

clipstobunds

：

mainView.clipsToBounds = true

---

以下是

单元格

代码：

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
    }
}

结果如下：

---

这是

单元格

代码：

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
    }
}

结果如下：

---

在两个视图上启用

clipsToBounds

后，将不显示任何阴影或圆角。“mainView”不是阴影视图的子视图吗？！如果我错了，请纠正我；我将更新代码号，它们是同一单元格中的独立视图。@Kevin2566“独立”是什么意思？其中一个必须是根视图。根视图是集合视图。我所指的单元格仅包含两个视图-

shadowView

和

mainView

。单元格本身内部没有单一的根视图。在两个视图上启用

clipsToBounds

后，根本不显示阴影或圆角。“mainView”不是阴影视图的子视图吗？！如果我错了，请纠正我；我将更新代码号，它们是同一单元格中的独立视图。@Kevin2566“独立”是什么意思？其中一个必须是根视图。根视图是集合视图。我所指的单元格仅包含两个视图-

shadowView

和

mainView

。单元格内部没有单一的根视图。您是如何在单元格中添加左右间距的？我的手机的阴影被ContainerView切断了你是如何在手机上增加左右间距的？我牢房的阴影被集装箱视图切断了