TableView?
데이터를 리스트 형태로 보여주기 위하여 사용됨
Scroll View를 상속받아, 스크롤을 이용하여 많은 정보를 보여줄 수 있음
테이블 뷰 기본 형태
- 하나의 열(column)과 여러 줄의 행(row)
- 각 행은 하나의 셀(cell)에 대응
- Section을 이용해 행을 시각적으로 나눌 수 있음
- header와 footer에 이미지나 텍스트를 추가해 정보를 보여줄 수 있음
구성 요소
- cell
- delegate
- data source
TableView Cell
- tableView를 이루는 개별적인 행
DataSource & Delegate
DataSource
- 테이블 뷰 데이터 소스 객체는 UITableViewDataSource 프로토콜을 채택
- 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블 뷰 객체에 제공
- 섹션이 몇 개인지, 섹션의 행은 몇 개인지, 행에 어떤 정보를 표시할 것인지 등
- numberOfRowsInSection, cellForRowAt 메소드는 필수로 구현해야 함
Delegate
- 테이블 뷰 델리게이트 객체는 UITableViewDelegate 프로토콜 채택
- 테이블 뷰의 시각적인 부분 설정
- 테이블 뷰의 동작과 외관을 담당
- 행의 높이, 행을 선택하면 어떤 액션을 할 건지 등
- 테이블 뷰의 세세한 부분 조정 가능
- 필수로 구현해야 하는 메소드는 없음
구현해 보자!
- TableView 삽입
- TableViewCell 추가
style은 하고 싶은 대로!
코드상에서 TableViewCell 객체를 불러와야 하므로, identifier 지정해 준다.
- protocol 채택, 위임해 주기, 프로토콜 메소드 구현
프로토콜을 채택하면, 프로토콜의 메소드를 구현해 주어야 하는 것 잊지 말자,,,!
코드를 extension을 이용하여 예쁘게 정리해 봅시당
- 테이블 뷰를 이용해 보여줄 데이터도 만들어 보자
- numberOfRowsInSection 메소드 구현
배열 name.count로 행 개수 지정해 준다
(섹션은 따로 만들지 않았음)
- cellForRowAt 메소드 구헌
- 반환값을 보면 UITableViewCell인 것을 알 수 있음
- dequeueReusableCell(widthIdentifier:for:)?
테이블 뷰는 모두 셀을 재사용하고, 재사용 구조는 큐임
메모리 낭비를 줄이기 위해서 셀을 재사용함 - indexPath?
tableView의 행을 식별하는 인덱스 경로 라고 하는데, 한번 파봅시당
indexPath가 뭔지 이해해 보기 위해 print(indexPath) 코드를 추가해 보면 출력 결과는 밑과 같음.
indexPath는 [ , ] 형태로 구성되어 있고, [섹션, 행]임을 알 수 있음
그럼 indexPath.row는 행인 것도 알 수 있다!
따라서 cell의 textLabel을 name[indexPath.row]로 지정해 주면 됨
구현 결과
출처)
https://zeddios.tistory.com/100
https://www.boostcourse.org/mo326/lecture/16887/?isDesc=false
fastcampus - 30개 프로젝트로 배우는 ios 앱 개발
