Swift로 테이블뷰 만들기(Table View)
테이블 뷰는 아이폰에서 가장 많이 쓰는 뷰중 하나일 거입니다. 아이폰 기본 앱중에 메세지나 기본 연락처도 테이블뷰로 구성된 앱입니다.
테이블뷰 구현방법
테이블뷰 구현하는 방법은 크게 두가지 입니다. 하나는 스토리보드에 테이블뷰 컨트롤러를 추가하는 방법이 있고, 나머지 한 방법은 뷰 컨트롤러에 테이블뷰를 추가하는 방법입니다.
왼쪽이 기본 뷰컨트롤러에 테이블뷰를 추가한 화면이고, 오른쪽이 테이블뷰 컨트롤러를 추가한 화면입니다. 저는 개인적으로는 왼쪽처럼 뷰 컨트롤러에 테이블뷰를 추가하는 방식을 선호합니다. 왜냐하면은 테이블뷰 크기를 제가 원하는데로 지정할수 있기 때문이죠. 그럼 저는 첫번째 방법으로 테이블뷰 구성하는 방법에 대해서 알려드리겠습니다.
1. TableView 꺼내기
Xcode 10 버전 부터는 라벨이나 테이블뷰등 꺼내는 생겼습니다. 아래의 사진에 버튼을 클릭하면은 TableView를 꺼낼수 있습니다.
2. DataSourse 와 Delegate 위임
애플은 IOS 개발시 MVC 패턴을 권장합니다. MVC 구조상 View는 자체적으로 작업을 처리할 수 없습니다. View는 화면을 갱신하는 역할을 하지만은 유저가 View를 터치했을때 그 변화를 Controller에 직접 전달하면은 안됩니다. iOS에서는 이럴 때 Delegate(또는 Data Source)을 사용하여 해결합니다. Delegate는 말그대로 위임한다는 뜻으로 유저가 화면에 값을 입력 할 때 혹은 터치나 드래그를 하여 event를 발생 시켰을 때, 프로그램에서 해야 할 일들을 Controller에게 위임합니다.
위임하는 방법은 코드상에서 위임하는 방법이 있고, 아래와 같이 스토리보드 상에서 위임하는 방법이 있습니다. 저는 아래 사진과 같이 테이블뷰를 꺼내오자마자 위임하는 방법을 선호합니다.
아래와 같이 말이죠.
3. TableView Cell 만들기
테이블뷰는 Static TableView와 dynamic Tableview가 있습니다. Static 테이블뷰는 스토리보드에서 내용을 입력하면은 그대로 출력이 됩니다. Dynamic Tableview는 데이터를 입력받아서 화면이 변하는 동적인 테이블뷰 입니다. 이런 동적인 테이블 뷰에 테이블뷰 셀은 매우 중요합니다. 테이블 어디에 자료가 입력될지, 사진이 들어갈지 등을 정해주기 때문이죠.
일단 Dynamic TableView에서 Prototype Cell을 한개로 설정합니다.
테이블뷰 셀이 추가됬습니다. 그리고 추가된 테이블뷰 셀의 Identifier를 지정합니다. 지정된 Identifier 값은 꼭 기억해 주시기 바랍니다. 테이블뷰 구현을 위해 코드 작성시 꼭 필요한 값이기 때문이죠. 저는 Identifier를 FirstCell로 지정했습니다. 그러면은 본격적으로 테이블뷰 구현을 위한 코드 작성을 시작해볼까요.
4, 코드 작성하기
우선 스토리보드에 만들어진 테이블뷰 아울렛을 뷰컨트롤러 코드에 추가합니다. 스토리보드에서 아래 사진과 같이 테이블뷰 아울렛을 뷰컨트롤러에 추가합니다. 스토리보드에서 테이블뷰를 Ctrl 클릭후 마우스로 끌면은 아웃렉 생성이 됩니다.
ViewController 코드에 직접 UITableViewDelegate와 UITableViewDataSource 프로토콜을 따른다고 선언하면 되지만은, 깔끔한 코드를 작성하기 위해서 Extension을 이용해서 두개의 프로토콜을 선언합니다. 선언만 하면은 에러가 발생합니다. 왜냐하면은 필수적으로 구현해야 하는 두가지의 메소드가 현재 없기 때문이죠.
<에러가 발생한 코드 화면>
아래와 같이 NumberOfRowInSection와 CellForRowAt 이 들어간 두개의 메소드는 필수적으로 들어가야 합니다.
NumberOfRowInSecion은 한 섹션에 Row가 몇개 들어갈 것인가, CellForRowAt은 Cell에 들어갈 데이터를 입력하는 Function입니다.
테스트상 Row 개수는 10개로 설정을 하겠습니다. 그리고 Row에 들어갈 값은 인덱스 값이 들어갈수 있도록 설정하겠습니다.
그리고 실행해 보겠습니다. 10개의 테이블 Row가 생성이 됬고, 각 Row에 Index값이 데이터로 들어갔습니다. 정상적으로 작동 되는게 확인되네요.
<코드 전문>
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
}
extension ViewController :UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "FirstCell", for: indexPath)
cell.textLabel?.text = "\(indexPath.row)"
return cell
}
}