Làm cách nào để tạo TableView với các góc tròn trong iOS?

Table View là một trong những phần cơ bản và quan trọng nhất của ứng dụng iOS, Mọi nhà phát triển iOS nên làm quen với nó.

Hầu hết mọi ứng dụng bạn thấy trong App Store đều sử dụng dạng bảng.

Chế độ xem bảng trên iOS hiển thị một cột nội dung cuộn theo chiều dọc, được chia thành các hàng. Mỗi hàng trong bảng chứa một phần nội dung ứng dụng của bạn. Ví dụ:ứng dụng Danh bạ hiển thị tên của từng liên hệ trong một hàng riêng biệt và trang chính của ứng dụng Cài đặt hiển thị các nhóm cài đặt có sẵn

Bạn có thể đọc thêm về chế độ xem bảng tại đây,

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

Trong bài đăng này, chúng ta sẽ xem cách chúng ta có thể tạo chế độ xem bảng với các góc tròn.

Vì vậy, hãy bắt đầu,

Bước 1 - Mở Xcode → Dự án mới → Ứng dụng một lần xem → Đặt tên cho nó là “TableViewWithRoundsCorner”

Bước 2 - Mở Main.storyboard và thêm UITableView như hình dưới đây,

Bước 3 - Trong ViewController.swift bây giờ tạo, @IBoutlet của tableview từ Main.storyboard và đặt tên là tableView.

Bước 4 - Trong ViewController.swift, Trong phương thức viewDidLoad, thêm ủy nhiệm và nguồn dữ liệu vào tableView như hiển thị bên dưới.

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

Bước 5 - Mở Main.storyboard và thay đổi màu nền của ViewController, thêm ô nguyên mẫu và nhãn bên trong ô như hình.

Bây giờ, hãy thêm một tệp cho ô chế độ xem bảng mới của loại phụ UITableViewCell và thêm vào cùng một tệp.

Bây giờ, hãy mở ViewController.swift và tuân theo giao thức và triển khai các phương thức ủy quyền như bên dưới.

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

Bước 6 - Chạy dự án nhưng chế độ xem bảng sẽ không có các góc tròn để làm như vậy, hãy viết đoạn mã dưới đây trong phương thức tải của chế độ xem.

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

Để có mã hoàn chỉnh -

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