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
Generally, if something is clipping, there may be two main reasons:
clipsToBounds
set to true
.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