UITableViewCell：子视图阴影被其他单元格和表视图外部切断？

Question

我有一个单元格垂直间距为 10 像素的设计。我想在这些单元格周围设置阴影（实际上我将这些阴影应用到每个单元格的子视图），但这是我得到的结果：

正如您所看到的，阴影被其他单元格和表格视图页眉/页脚切断。

这是我的代码：

视图控制器

final class SCVC: UIViewController {
    @IBOutlet weak var tableView: UITableView! {
        didSet {
            tableView.backgroundColor = .clear
            tableView.separatorStyle = .none
        }
    }

    override func viewDidLoad() {
        tableView.register(UINib(nibName: "ShadowCell", bundle: .main), forCellReuseIdentifier: "ShadowCell")
        view.backgroundColor = .white
    }
}

extension SCVC: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return tableView.dequeueReusableCell(withIdentifier: "ShadowCell", for: indexPath) as! ShadowCell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView(frame: CGRect(origin: .zero,
                                              size: CGSize(width: tableView.bounds.width,
                                                           height: 20)))
        headerView.backgroundColor = .clear
        let label = UILabel(frame: CGRect(origin: CGPoint(x: 16, y: 8),
                                          size: CGSize(width: headerView.frame.width - 32,
                                                       height: 34)))
        label.backgroundColor = .clear
        label.text = "Header view"
        headerView.addSubview(label)
        return headerView
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }
    
    func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }
}

细胞

final class ShadowCell: UITableViewCell {
    @IBOutlet weak var innerView: UIView! {
        didSet {
            innerView.backgroundColor = .white
            innerView.layer.cornerRadius = 10.0
            innerView.layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
            innerView.layer.shadowOpacity = 1.0
            innerView.layer.shadowRadius = 24.0
            innerView.layer.shadowOffset = CGSize(width: 0, height: 8)
        }
    }
}

单元XIB

我该如何解决这个问题？

谢谢您的帮助

Answer 1

一般来说，如果有东西被剪裁，可能有两个主要原因：

1. clipsToBounds

   设置为

   true

   。

2. backgroundColor

   不是

   .clear

因此，要解决您的问题，您需要修复单元格及其内容视图的问题。您可以在 xib 中或在代码中执行此操作：

cell.clipsToBounds = false
cell.contentView.clipsToBounds = false
cell.backgroundColor = .clear
cell.contentView.backgroundColor = .clear

Answer 2

我的收藏视图剪掉了阴影：

myCollectionView.clipsToBounds = false ✅