How to create custom background for UITableView section?

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
    }
}