UITableViewCell: subviews shadows cut off by other cells and outside of table view?

Question

I have a design with cells with a vertical spacing of 10px. I would like to set shadows around these cells (actually I apply these shadows to a subview of each of these cells), but here is the result I am getting:

As you can see the shadow is being cut off both by the other cells and by the table view header/footer.

Here is my code:

The view controller

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

The cell

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

The cell XIB

How could I fix this?

Thank you for your help

Answer 1

Generally, if something is clipping, there may be two main reasons:

1. clipsToBounds set to true.
2. backgroundColor is not .clear

so to solve your problem you need to fix those for both cell and it's content view. you can do it in your xib, or in the code:

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