TableView란?
- 여러 개의 cell을 가지고 있고, 하나의 열과 여러 줄의 행을 지니고 있으며, 수직으로만 스크롤 가능하다.
- 섹션을 이용해 행을 그룹화하여 콘텐츠를 좀 더 쉽게 탐색할 수 있다.
- 섹션의 헤더와 푸터에 View를 구성하여 추가적인 정보를 표시할 수 있다.
1️⃣ Storyboard와 ViewController가 잘 연결되었는지 확인
1. 왼쪽 navigation bar > ViewController 클릭 > 클래스 이름 확인
2. navigation bar > Main.storyboard > ViewController 클릭
-> 오른쪽 인스펙터 영역에서 identity inspector
-> Custom Class명이 1과 일치하는지 확인
2️⃣ Main Storyboard에서 UI 구현
2-1) Object 추가하기
1. TableView 생성 (drag&drop)
2. Table View Cell을 Table View에 추가 (drag&drop)
3. Table View Cell 안에 원하는 요소 추가
2-2) Auto Layout 설정하기; consraints
Auto Layout을 설정하려면 ✔️ 위치와 ✔️ 크기를 알아야 한다.
<Constraints 설정>
1. Table View (-> 상위 뷰인 Safe Area를 상대로 한다)
a. Table View를 Control 키 누른 상태로 Safe Area로 드래그
b. 메뉴가 뜨면 shift키 누른 상태로 항목 선택
c. Table View의 size 인스펙터 영역에서 Leading 값 수정 ( # 위치 설정 )
2. Table View Cell 안에 있는 Object ( -> 상위 뷰인 Content View 를 상대로 한다)
<Constraints 항목>
- Leading Space to Container : 왼쪽 간격 설정
- Center Vertically in Containter : 상하 가운데 배치
- 기타
참고) 한 object A의 constraint를 잘 설정했으면 나머지 objects는 A를 상대로 constraint를 걸어도 된다.
2-3) TableView를 코드에 연결하기
1. Main Storyborad에서 오른쪽 상단에 줄글처럼 생긴 [Adjust Editor Options] 클릭 > Assistant 클릭하여
스토리보드와 뷰컨트롤러 코드가 함께 보이도록 한다.
2. Table View를 Ctrl 키를 누른 채 코드로 드래그한다.
3. 나타나는 창을 잘 설정한 후 Connect 한다.
2-4) Custom Cell을 코드에 연결하기 ( + reusable identifier 설정)
1. 새로운 Cocoa Touch Class 파일 생성
custom cell을 표현하는 코드를 만들기 위해, 먼저 TableViewCell 파일을 새로 만든다.
2. TableViewCell과 연결
클래스 이름을 복사하여,
1. Main 스토리보드 > TableViewCell의 Identity 인스펙터 > Custom Class > Class에 붙여넣는다.
2. Main 스토리보드 > TableViewCell의 Attributes 인스펙터 > Identifier에 붙여넣는다.
(*cell은 재사용되므로 재사용 구분자인 identifier가 필요하다. -> custom cell 객체의 이름을 똑같이 넣으면 된다.)
3️⃣ ViewController에서 테이블 구현하기
UICollectionView 또는 UITableView를 구현할 때는 다음 세 가지를 반드시 알아야 한다.
1. Data : 테이블에 어떤 데이터를 올릴 것인지
2. Presentation : 셀을 어떻게 표현할 것인지 (행 수, 셀의 object들에 연결할 데이터)
3 Layout : 셀의 레이아웃을 어떻게 할 것인지 (셀 높이/너비)
3-1) Data 구조화하기
1. Struct 생성
TodoModel이라는 Swift 파일을 새로 생성하여 데이터 구조를 만든다.
2. 샘플 데이터 생성
ViewController에서 아래처럼 예시 데이터를 만들어 둔다.
let todoList: [TodoModel] = [
TodoModel(id: 1, title: "밥먹기", isDone: true),
TodoModel(id: 1, title: "Lv1 완성하기", isDone: false)
]
3-2) DataSource 세팅하기
1. UIViewController 오버라이드 함수 안에 TableView.dataSource = self 라는 코드를 추가하고,
맨 아래쪽에 extension 으로 UITableViewDataSource 를 상속하여 필수구현 함수를 구현한다.
이렇게 DataSource를 세팅하면 드디어 시뮬레이터에 테이블이 보이기 시작한다.
3-3) 테이블 object에 데이터 연결하기
아직 data가 table UI Component에 반영되지 않았다. 우리는 UI Component에 데이터를 업데이트해야 한다!
2-4)에서 만들어 둔 TableViewCell 파일에서 데이터를 업데이트하는 함수를 만들고,
셀을 가져오는 DataSource 메소드에 반영하자.
<Todo>
1. UI Component를 코드와 연결
2. UI Component에 데이터를 업데이트하는 메소드 작성
3. DataSource 메소드에 사용
1. UI Component를 코드와 연결 (TableViewCell 파일)
우선 UI Component를 연결해야 한다.
Main 스토리보드 > Content View > Editor options > Assistant 클릭
-> 상단 바에서 ViewController ➡️ TableViewCell 파일로 이동
-> Ctrl 키 누른 채로 UI Component를 코드로 드래그
2. UI Component에 데이터를 업데이트하는 메소드 작성
셀을 구성한다는 의미의 configure 함수를 만들자.
3. DataSource 메소드에 사용
다시 ViewController 코드로 돌아와서,
configure 함수가 적용된 cell을 가져오도록 코드를 수정하자.
그런데 cell은 UITableViewCell 타입이고,
configure(_:)는 UITableViewCell을 상속받은 custom cell(MyTodoListTableViewCell 타입)이다.
따라서, cell을 MyTodoListTableViewCell 타입으로 다운캐스팅 시켜주어야 한다.
