ฉันจะสร้าง TableView ที่มีมุมโค้งมนใน iOS ได้อย่างไร

Table View เป็นหนึ่งในส่วนที่สำคัญที่สุดและเป็นพื้นฐานของแอปพลิเคชัน iOS นักพัฒนา iOS ทุกคนควรคุ้นเคย

เกือบทุกแอปพลิเคชันที่คุณเห็นใน App Store ใช้มุมมองตาราง

มุมมองตารางบน iOS จะแสดงเนื้อหาที่เลื่อนในแนวตั้งเพียงคอลัมน์เดียว โดยแบ่งออกเป็นแถว แต่ละแถวในตารางจะมีเนื้อหาในแอปของคุณเพียงชิ้นเดียว ตัวอย่างเช่น แอปรายชื่อจะแสดงชื่อผู้ติดต่อแต่ละรายในแถวแยก และหน้าหลักของแอปการตั้งค่าจะแสดงกลุ่มการตั้งค่าที่มี

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับมุมมองตารางได้ที่นี่

https://developer.apple.com/documentation/uikit/uitableview

ในโพสต์นี้ เราจะมาดูกันว่าเราจะสร้างมุมมองตารางที่มีมุมโค้งมนได้อย่างไร

มาเริ่มกันเลย

ขั้นตอนที่ 1 − เปิด Xcode → โครงการใหม่ → แอปพลิเคชั่นมุมมองเดียว → ตั้งชื่อมันว่า "TableViewWithRoundedCorner"

ขั้นตอนที่ 2 − เปิด Main.storyboard และเพิ่ม UITableView ดังที่แสดงด้านล่าง

ขั้นตอนที่ 3 − ใน ViewController.swift ตอนนี้สร้าง @IBoutlet ของ tableview จาก Main.storyboard แล้วตั้งชื่อเป็น tableView

ขั้นตอนที่ 4 − ใน ViewController.swift ในเมธอด viewDidLoad ให้เพิ่มผู้รับมอบสิทธิ์และแหล่งข้อมูลไปยัง tableView ดังที่แสดงด้านล่าง

@IBOutlet var tableView: UITableView!
override func viewDidLoad() {
   super.viewDidLoad()
   tableView.delegate = self
   tableView.dataSource = self
}

ขั้นตอนที่ 5 − เปิด Main.storyboard และเปลี่ยนสีพื้นหลังของ ViewController เพิ่มเซลล์ต้นแบบและป้ายกำกับภายในเซลล์ตามที่แสดง

ตอนนี้เพิ่มหนึ่งไฟล์สำหรับเซลล์ tableview ใหม่ของประเภทย่อย UITableViewCell และเพิ่มเป็นไฟล์เดียวกัน

ตอนนี้เปิด ViewController.swift และปฏิบัติตามโปรโตคอลและใช้วิธีการมอบหมายดังต่อไปนี้

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

ขั้นตอนที่ 6 − เรียกใช้โครงการ แต่มุมมองตารางจะไม่มาพร้อมกับมุมโค้งมน ให้เขียนโค้ดด้านล่างในวิธีการโหลดมุมมอง

tableView.layer.cornerRadius=10 //set corner radius here
tableView.layer.backgroundColor = UIColor.cyan.cgColor

สำหรับรหัสที่สมบูรณ์ -

import UIKit
class ViewController: UIViewController {
   @IBOutlet var tableView: UITableView!
   override func viewDidLoad() {
      super.viewDidLoad()
      tableView.delegate = self
      tableView.dataSource = self
      tableView.layer.cornerRadius=10 //set corner radius here
      tableView.layer.backgroundColor = UIColor.cyan.cgColor
   }
}
extension ViewController: UITableViewDataSource, UITableViewDelegate {
   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) → Int {
      return 2
   }
   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) → UITableViewCell {
      let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
      return cell
   }
   func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) → CGFloat {
      return 80
   }
}