How to create custom background for UITableView section? - ios

Question

I'm trying to create a custom background for my tableview section. The look I'm going for is this:
How do I customize the tableview section background/layer please, rather than just the individual cells?
Edit: Just to clarify - I'm talking about the white background under 'Latest Transactions'. So the top of the section is rounded (as is bottom) but all the rows are rectangular.

Answer 1

Create UITableViewCell subclass and add a UIView with white color. Add left & right padding for the view to the cell. Add UILabel and other UI elements to this newly added view instead of adding in cell or its contentView. Set cell background color as 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
}
}
Use this cell class in your tableView. And set your view controller background color and tableView background color as UIColor.groupTableViewBackground
In cellForRowAt check if the cell is first or last cell of the section. If it is the first cell of the section, apply corner radius to top left, top right corners. If the cell is the last cell of the section, apply corner radius to bottom left, bottom right corners. If the cell is in the middle remove corner radius.
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
}
}

Answer 2

Have a look at func headerView(forSection section: Int) -> UITableViewHeaderFooterView?
headerView(forSection:) - UITableView | Apple Developer

Answer 3

Use UITableViewDelegate method
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
<#code#>
}
This will help you to set the view of each section header programatically.

Answer 4

To create a section header in tableView, use UITableViewDelegate's tableView(_:viewForHeaderInSection:) and tableView(_:heightForHeaderInSection:) methods.
func getHeaderText(for section: Int) -> String? {
switch section {
case 0:
return "Latest Transactions"
default:
return "Other Transactions"
}
//Add other cases for different sections
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: UIScreen.main.bounds.width, height: 70.0)))
headerView.backgroundColor = .clear
let label = UILabel(frame: CGRect(x: 20, y: 0, width: headerView.bounds.width - 40, height: headerView.bounds.height))
label.text = self.getHeaderText(for: section)
label.font = UIFont.systemFont(ofSize: 16.0, weight: .semibold)
headerView.addSubview(label)
return headerView
//Customize the headerView as per your requirement
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 70.0
}
In the above code, you can configure the header label in getHeaderText(for:) for each section.
Also, I've created the headerView programatically. You can use a .xib for creating a custom headerView as well. That's completely your choice.
You can customize the headerView as per your requirements either programatically or in the interface.