Table Views
커스터마이징 가능한 행의 단일 열에 데이터를 표현하는 것
하나의 열로 보여지는데 각각의 행은 사용자가 정의할 수 있는 뷰이다.
테이블 뷰의 구성
테이블 뷰는 수직 스크롤이 되는 단일 열의 뷰로 row와 section으로 분리된다.
row
앱과 관련하여 표현하고 싶은 하나의 데이터를 나타낸다.
section
관련된 row끼리 하나로 묶어 그룹화한다.
테이블 뷰와 관련된 object
테이블 뷰는 여러 object의 공동 작업으로 표현된다.
1. Cells
Cell은 콘텐츠를 시각화해서 나타낸다. UIKit에서 기본을 제공하는 Cell을 사용하거나, 사용자가 직접 정의해서 사용할 수 있다.
2. Table view controller
테이블 뷰를 관리하기 위해 UITableViewController를 사용하게 된다. 다른 뷰 컨트롤러를 사용할 수 있지만 테이블 뷰의 일부 작업을 실행하기 위해서는 테이블 뷰 컨트롤러가 필요할 수 있다.
3. Your data source object
UITableViewDataSource 프로토콜을 채택하고 테이블에 나타낼 데이터를 제공한다.
4. Your delegate object
UITableViewDelegate 프로토콜을 채택하고 테이블의 컨텐츠와 사용자간의 상호작용을 관리한다.
Cell에 데이터 표현하기
테이블 뷰는 데이터 기반 인터페이스로 UITableViewDataSource 프로토콜을 채택한 개체를 통해 데이터를 제공받는다.
테이블 뷰의 데이터는 row와 section을 통해 구성하는데, row는 개별 데이터를 표시하고 section은 관련된 row를 묶어서 표현한다. section은 반드시 필요하지는 않지만 계층화된 데이터를 구성하기 좋은 방법이다.
Row와 Section의 개수
테이블 뷰는 화면에 보여지기 전에 Row와 Section의 개수를 요구한다. data source object가 관련된 메서드를 제공한다.
var hierarchicalData = [[String]]()
override func numberOfSections(in tableView: UITableView) -> Int {
return hierarchicalData.count
}
override func tableView(_ tableView: UITableView,
numberOfRowsInSection section: Int) -> Int {
return hierarchicalData[section].count
}
// hierarchicalData = [["봄", "여름", "가을", "겨울"], ["딸기", "바나나"]]
// section = 2, 전체 row = 6테이블 뷰의 데이터를 관리하기 위해 Array 사용을 고려하는 것이 좋다. Array는 테이블 뷰의 구성과 일치하여 Row와 Section의 수를 나타내기 쉽다.
예시의 hierarchicalData 배열은 이중배열로 Section의 수는 배열의 count이고, Row는 자식 배열의 count 즉 각 Section 배열의 count가 된다.
ex) 첫 번째 Section의 Row 수 = hierarchicalData[1].count = 4
Cell 구성
Cell은 테이블 뷰 Row의 템플릿 역할을 하는 UITableViewCell 개체이다.
Cell은 뷰이므로 레이블이나 이미지 뷰, 또는 다른 뷰를 추가해 subview를 가지고 constraints를 통해 정렬할 수 있다.
테이블 뷰를 추가하면 이미 가진 프로토타입의 Cell이 포함되어 있다. Cell 스타일을 변경할 수 있는데 UIkit에서 제공하는 표준 스타일에서 선택하거나 사용자 정의 스타일을 사용할 수도 있다.
스토리보드에서 프로토타입 Cell 작업
- Cell Style을 지정
- 속성에서 identifier을 입력
- 사용자 정의 Cell에는 view와 constraints 추가
- 사용자 정의 Cell의 Class 정의
Row 구성
data source object의 tableView(_:cellForRowAt:) 메서드를 이용
tableView(_:cellForRowAt:)
- 테이블 뷰의
dequeueReusableCell(withIdentifier:for:)를 통해 Cell 개체 불러오기
- withIdentifier: Cell의 identifier
- for: indexPath
- Cell의 뷰 구성하기
cell.textLabel!.text = "Row \(indexPath.row)"- 테이블 뷰에 Cell을 return하기
테이블 뷰는 Cell의 생성을 요청하지 않는 대신 Cell을 lazy하게 관리해서 보여지는 Cell 또는 근처에 있는 Cell만 요청한다. Cell을 lazy하게 생성해서 메모리 사용을 줄일 수 있지만 대신 data source object은 빠르게 Cell을 생성해야 한다. 따라서 tableView(_:cellForRowAt:)에서는 데이터를 로드하거나 긴 작업은 수행하지 않는게 좋다.
