How do I create a TableView with rounded corners in iOS?

Table View is one of the most important and fundamental part of iOS application, Every iOS developer should be familiar with it.

Almost every application you see in App store use table view.

Table views on iOS display a single column of vertically scrolling content, divided into rows. Each row in the table contains one piece of your app’s content. For example, the Contacts app displays the name of each contact in a separate row, and the main page of the Settings app displays the available groups of settings

You can read more about table view here,

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

In this post we will see how we can create table view with rounded corners.

So, let’s get started,

Step 1 − Open Xcode → New Project → Single View Application → Let’s name it “TableViewWithRoundedCorner”

Step 2 − Open Main.storyboard and add UITableView as shown below,

Step 3 − In ViewController.swift now create, @IBoutlet of tableview from Main.storyboard and name it tableView.

Step 4 − In ViewController.swift, In viewDidLoad method, add delegate and datasource to tableView as show below.

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

Step 5 − Open Main.storyboard and change the background color of ViewController, add prototype cell and label inside the cell as shown.

Now add one file for new tableview cell of subtype UITableViewCell and add to the same.

Now open ViewController.swift and conform to protocol and implement the delegate methods as below.

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

Step 6 − Run the project but table view will not come with rounded corners to do so, write the below code in view did load method.

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

For complete code −

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