วิธีสร้าง TableView มุมโค้งใน iOS

Table View สำคัญที่สุดใน iOS ทุกแอปใน App Store ใช้ Table View แสดงรายการแนวตั้ง

อ่านรายละเอียด

ขั้นตอนที่ 1: สร้างโปรเจกต์

Xcode → New Project → Single View Application → ชื่อ "TableViewWithRoundedCorner"

ขั้นตอนที่ 2: เพิ่ม UITableView

Main.storyboard: เพิ่ม TableView

ขั้นตอนที่ 3-5: ตั้งค่า Delegate/DataSource และ Custom Cell

@IBOutlet tableView ตั้ง Delegate/DataSource ใน viewDidLoad

เปลี่ยนสีพื้นหลัง ViewController เพิ่ม Prototype Cell + Label

สร้าง Class TableViewCell (UITableViewCell) ตั้ง Class ให้ Cell

ขั้นตอนที่ 6: Implement Delegate Methods

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 2 }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return 80 }
}

ขั้นตอนที่ 7: ทำมุมโค้ง

ใน viewDidLoad:

tableView.layer.cornerRadius = 10
tableView.layer.backgroundColor = UIColor.cyan.cgColor