UITableViewCell:子视图阴影被其他单元格切断并在 table 视图之外?
UITableViewCell: subviews shadows cut off by other cells and outside of table view?
我的设计中单元格的垂直间距为 10 像素。我想在这些单元格周围设置阴影(实际上我将这些阴影应用于每个单元格的子视图),但这是我得到的结果:
如您所见,阴影被其他单元格和 table 视图 header/footer 切断了。
这是我的代码:
视图控制器
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单元格
我该如何解决这个问题?
感谢您的帮助
一般情况下,如果出现剪裁,可能有以下主要原因:
- clipsToBounds 设置为 true。
- 背景颜色不清晰
因此,要解决您的问题,您需要为单元格及其内容视图修复这些问题。你可以在你的 xib 中完成,或者在代码中完成:
cell.clipsToBounds = false
cell.contentView.clipsToBounds = false
cell.backgroundColor = .clear
cell.contentView.backgroundColor = .clear
我的设计中单元格的垂直间距为 10 像素。我想在这些单元格周围设置阴影(实际上我将这些阴影应用于每个单元格的子视图),但这是我得到的结果:
如您所见,阴影被其他单元格和 table 视图 header/footer 切断了。
这是我的代码:
视图控制器
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单元格
我该如何解决这个问题?
感谢您的帮助
一般情况下,如果出现剪裁,可能有以下主要原因:
- clipsToBounds 设置为 true。
- 背景颜色不清晰
因此,要解决您的问题,您需要为单元格及其内容视图修复这些问题。你可以在你的 xib 中完成,或者在代码中完成:
cell.clipsToBounds = false
cell.contentView.clipsToBounds = false
cell.backgroundColor = .clear
cell.contentView.backgroundColor = .clear