iOS에서 모서리가 둥근 TableView를 어떻게 만듭니까?

Table View는 iOS 애플리케이션의 가장 중요하고 기본적인 부분 중 하나이며, 모든 iOS 개발자는 그것에 익숙해야 합니다.

App Store에서 볼 수 있는 거의 모든 애플리케이션은 테이블 보기를 사용합니다.

iOS의 테이블 보기는 세로로 스크롤되는 콘텐츠의 단일 열을 행으로 나누어 표시합니다. 테이블의 각 행에는 앱 콘텐츠의 한 부분이 포함됩니다. 예를 들어 연락처 앱은 각 연락처의 이름을 별도의 행에 표시하고 설정 앱의 기본 페이지에는 사용 가능한 설정 그룹이 표시됩니다.

여기에서 테이블 보기에 대한 자세한 내용을 읽을 수 있습니다.

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

이 게시물에서는 모서리가 둥근 테이블 보기를 만드는 방법을 살펴보겠습니다.

이제 시작하겠습니다.

1단계 − Xcode 열기 → 새 프로젝트 → 단일 보기 애플리케이션 → 이름을 "TableViewWithRoundedCorner"로 지정합니다.

2단계 − Main.storyboard를 열고 아래와 같이 UITableView를 추가합니다.

3단계 − 이제 ViewController.swift에서 Main.storyboard에서 tableview의 @IBoutlet을 만들고 이름을 tableView로 지정합니다.

4단계 − ViewController.swift에서 viewDidLoad 메소드에서 아래와 같이 tableView에 delegate와 datasource를 추가합니다.

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

5단계 − Main.storyboard를 열고 ViewController의 배경색을 변경하고 그림과 같이 셀 내부에 프로토타입 셀과 레이블을 추가합니다.

이제 하위 유형 UITableViewCell의 새 tableview 셀에 대해 하나의 파일을 추가하고 동일하게 추가하십시오.

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