iOS 프로그래밍: 테이블 뷰 (Swift, 스토리보드) 1 - 테이블 뷰 추가

iOS 프로그래밍에서 테이블 뷰(Table View)란 위의 그림처럼 목록이 있고 그 목록을 클릭할 수 있는 구성요소를 말합니다. 이 테이블 뷰를 생성하는 방법을 스위프트(Swift), 스토리보드(Storyboard) 기준으로 알아보겠습니다.

1) 테이블 뷰(Table View) 오브젝트 추가

오른쪽 상단의 [+] 버튼을 클릭합니다.
table을 검색한 뒤 Table View 오브젝트를 메인 뷰로 끌어와 추가합니다.

테이블 뷰를 양쪽으로 잡아당겨 화면에 꽉 채웁니다.

2) 테이블 뷰에 오토 레이아웃 설정

테이블 뷰를 마우스 오른쪽 버튼 또는 control + 마우스 왼쪽 버튼을 누른 채로 View (위 그림의 파란색 영역)으로 드래그합니다.

shift 버튼을 누른 채 메뉴를 클릭해 위의 그림처럼 체크박스를 표시합니다. 이후 제약(constraints)가 생기며 자동 레이아웃이 설정됩니다.

3) 테이블 뷰에 테이블 뷰 셀(Table View Cell) 추가하기

1번에 나온 방법과 같이 오브젝트를 추가하는데 Table View Cell을 드래그해 추가합니다. 위 그림과 같이 될 것입니다.

4) 뷰 컨트롤러에서 UITableViewDataSource, UITableViewDelegate 프로토콜 상속받기

먼저 테이블 뷰를 표시하기 위해 컨트롤러에서 반드시 제공해야 하는 정보가 2가지 있습니다.

테이블 뷰의 셀은 총 몇 개? (UITableViewDataSource)
테이블 뷰를 어떻게 보여줄 것인가 ? (UITableViewDelegate)

이러한 정보를 제공하기 위해 UITableViewDataSource, UITableViewDelegate 프로토콜을 구현해야 합니다. 뷰 컨트롤러 클래스의 최상단 부분에 다음 두 개 프로토콜을 추가합니다.

import UIKit

// 필수1: 테이블 뷰 셀 몇 개? (UITableViewDataSource)
// 필수2: 테이블 뷰 어떻게 보여줄까? (UITableViewDelegate)
class ViewController: UIViewController,
                            UITableViewDelegate,
                            UITableViewDataSource {
    // ...

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

}

위 부분을 추가하면 다음과 같은 에러가 발생할 것입니다. [Fix] 버튼을 눌러 프로토콜 조각(protocol stub)을 추가합니다.

눌렀다면 다음 부분이 추가될 것입니다.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // ...code...
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // ...code...
}

두 함수 모두 UITableViewDataSource와 관련된 부분입니다.

첫 번째 함수는 테이블 뷰에 몇 개의 줄(row; 행)을 표시할 것인지를 구현합니다. Int 값을 리턴하라고 나와 있으므로 return 10 등으로 작성합니다.

두 번째 함수는 해당 row에 무슨 셀을 표시할 지를 결정합니다. UITableViewCell을 리턴하라고 합니다.

예제 코드를 작성하면 아래와 같습니다.

// UITableViewDataSource
// 테이블 뷰에서 행(row)의 개수를 반환
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 2
}

// 행을 구성하는 셀을 반환
// 하나의 재활용 가능한 셀(Reusable Cell)을 반환
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    
    return cell
}

dequeReusableCell은 재활용 가능한 셀을 큐(queue)의 형태로 추가/제거합니다. 만약 재사용 큐에 셀이 존재한다면 현재 재사용 큐에 있는 셀을 dequeue(꺼냄)해주고, 재사용 큐에 셀이 없으면 새로운 셀을 생성합니다.
for:는 셀의 위치를 지정하는 색인 경로입니다. 항상 데이터 원본 개체에서 제공하는 인덱스 경로를 지정해야 합니다. indexPath를 적으면 됩니다.
cell:은 아까 추가한 테이블 뷰 셀의 구분자(identifier)를 적는 곳입니다. 이 구분자를 통해 셀을 가져오고 그 셀을 재활용합니다. 구분자 추가 방법은 밑에서 설명하겠습니다.

5) 테이블 뷰 셀에 구분자(identifier) 추가

메인 스토리보드에서 테이블 뷰 셀을 선택한 뒤, 오른쪽에서 Show the Attributes Inspector(위 그림의 빨간 박스 아이콘)를 선택한 뒤, Identifier에 아까 프로토콜 조각에서 지정했던 cell 구분자를 입력합니다.
Accessory에 Checkmark를 지정하면 오른쪽에 체크마크가 표시됩니다.