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

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

https://stackoverflow.com/questions/65824228/uitableviewcell-subviews-shadows-cut-off-by-other-cells-and-outside-of-table-vi January 21, 2021 at 05:11PM