ios - 如何为 UITableView 部分创建自定义背景?
问题描述
我正在尝试为我的 tableview 部分创建自定义背景。我要的外观是这样的:
请问如何自定义表格视图部分的背景/图层,而不仅仅是单个单元格?
编辑:澄清一下——我说的是“最新交易”下的白色背景。因此,该部分的顶部是圆形的(底部也是如此),但所有行都是矩形的。
解决方案
创建UITableViewCell
子类并添加一个UIView
白色。为单元格添加视图的左右填充。向这个新添加的视图添加UILabel
和其他UI
元素,而不是添加 incell
或其contentView
. 将cell
背景颜色设置为UIColor.groupTableViewBackground
class CustomCell: UITableViewCell {
let bgView = UIView()
let label = UILabel()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() {
backgroundColor = .groupTableViewBackground
bgView.backgroundColor = .white
bgView.translatesAutoresizingMaskIntoConstraints = false
addSubview(bgView)
label.translatesAutoresizingMaskIntoConstraints = false
bgView.addSubview(label)
bgView.topAnchor.constraint(equalTo: topAnchor).isActive = true
bgView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
bgView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
bgView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
label.heightAnchor.constraint(equalToConstant: 30).isActive = true
label.topAnchor.constraint(equalTo: bgView.topAnchor, constant: 5).isActive = true
label.bottomAnchor.constraint(equalTo: bgView.bottomAnchor, constant: -5).isActive = true
label.leadingAnchor.constraint(equalTo: bgView.leadingAnchor, constant: 5).isActive = true
label.trailingAnchor.constraint(equalTo: bgView.trailingAnchor, constant: -5).isActive = true
}
}
在您的tableView
. 并将您的视图控制器背景颜色和tableView
背景颜色设置为UIColor.groupTableViewBackground
cellForRowAt
检查单元格是该部分的第一个还是最后一个单元格。如果它是该部分的第一个单元格,则将角半径应用于左上角、右上角。如果单元格是该部分的最后一个单元格,则将角半径应用于左下角、右下角。如果单元格在中间,则删除角半径。
class TableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
tableView.backgroundColor = .groupTableViewBackground
tableView.register(CustomCell.self, forCellReuseIdentifier: "CustomCell")
tableView.separatorInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 10)
tableView.tableFooterView = UIView()
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return "Section \(section) Title"
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 4
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as? CustomCell
?? CustomCell(style: .default, reuseIdentifier: "CustomCell")
if indexPath.row == 0 {//first cell of this section
cell.bgView.layer.cornerRadius = 15.0
cell.bgView.layer.masksToBounds = true
cell.bgView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
} else if indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1 {//last cell of this section
cell.bgView.layer.cornerRadius = 15.0
cell.bgView.layer.masksToBounds = true
cell.bgView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
} else {
cell.bgView.layer.cornerRadius = 0
}
cell.label.text = "Row \(indexPath.row)"
return cell
}
}
推荐阅读
- java - 在java中扩展泛型的限制,有什么办法绕过它?
- php - PHP多维数组值的数据库插入的SQL语法
- python - Docker 映像构建失败。Jupyter 命令“nbconvert”找不到 ipython 笔记本
- c# - Visual Studio 2017 更新到 15.8.1/15.8.2 后的 Xamarin Android 应用程序项目构建问题
- vba - 为什么我的第二个表格范围没有转移到目标工作表?
- javascript - OutlookWeb 上 getCallbackTokenAsync 的 Office js Api 错误
- c# - 如何在 C# 中读取嵌套的 json 对象
- ios - Firebase Cloud Functions 响应错误 iOS
- javascript - TestCafe - 单击链接后等待页面加载
- r - R - for循环中新创建的列表中缺少值