如何自定义 UITableView 及其单元格以获得清晰的颜色分隔符和单元格的不同长度取决于标题？

Question

到目前为止，我有 7 个没有分隔符的表格视图单元格，并且所有单元格的长度都是固定的。如何 1) 在它们之间添加一些清晰的颜色分隔符和 2) 将单元格背景颜色设置为橙色，但颜色应该只位于文本长度不同的标签下方？

这是我当前的代码：

class CafesView: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    let cafes = [
        "Banana Joe's",
        "College Eight Cafe",
        "Global Village",
        "Iveta",
        "Stevenson Coffee House",
        "Terra Fresca",
        "Vivas"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self

    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 7
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cafesCell = tableView.dequeueReusableCell(withIdentifier: "cafeCell", for: indexPath)
        cafesCell.textLabel?.text = cafes[indexPath.row]
        return cafesCell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return tableView.frame.height / 7
    }

    @IBAction func closeTapped(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }

}

class TableViewCell: UITableViewCell {

    override func layoutSubviews() {
        super.layoutSubviews()

        self.backgroundColor = .systemOrange
        self.roundCorners(corners: [.topLeft, .bottomLeft], radius: 10)

   }

}

Answer 1

添加此行以删除分隔线

tableView.separatorStyle = .none

然后，在UITableViewCell中添加一个标签（这里我添加了lblCafes），并将标签背景颜色设置为橙色。

您的代码将是，

    class CafesView: UIViewController, UITableViewDelegate, UITableViewDataSource {

        @IBOutlet weak var tableView: UITableView!

        let cafes = [
            "Banana Joe's",
            "College Eight Cafe",
            "Global Village",
            "Iveta",
            "Stevenson Coffee House",
            "Terra Fresca",
            "Vivas"
        ]

        override func viewDidLoad() {
            super.viewDidLoad()

            tableView.separatorStyle = .none

            tableView.delegate = self
            tableView.dataSource = self
        }

        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 7
        }

        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cafesCell = tableView.dequeueReusableCell(withIdentifier: "cafeCell", for: indexPath) as? TableViewCell
            cafesCell?.lblCafes?.text = cafes[indexPath.row]
            return cafesCell ?? UITableViewCell()
        }

        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return tableView.frame.height / 7
        }

        @IBAction func closeTapped(_ sender: UIButton) {
            self.dismiss(animated: true, completion: nil)
        }

    }

    class TableViewCell: UITableViewCell {

        @IBOutlet weak var lblCafes: UILabel!

        override func layoutSubviews() {
            super.layoutSubviews()

            self.lblCafes.backgroundColor = .systemOrange
            self.roundCorners(corners: [.topLeft, .bottomLeft], radius: 10)

       }
    }

如何自定义 UITableView 及其单元格以获得清晰的颜色分隔符和单元格的不同长度取决于标题？

How to customize UITableView and its cell to get clear color separator and different length of the cell depends on the title?

uitableview

ios

swift

swift5