[Swift/UIKIt] UITableView에 대해 알아보자! ①

안녕하세요 콩리또 입니다. 🌯

오늘은 UITableView에 대해 소개해드리려고 합니다.

제가 UIKit으로 제일 처음 만들어 본 컴포넌트인데요 

그래서 더 정이가네요..

 

 

사실 그냥 TableView가 CollectView보다는 만만해보였음..

 

모든 포스팅 말투는 편한 말투로 작성합니다!

피드백은 댓글로 부탁드려요!

감사합니다🥰

---

 

🤔 UI Table View란?

UITableView는 데이터를 목록 형태로 보여줄 수 있는 기본적인 컴포넌트임

그리드가 아닌 그냥 리스트를 만들고 싶으면 UITableView를 사용하면 쉽게 만들 수 있음

 

아이폰에서 많이 본 익숙한 List 형태가 바로 TableView

 

특징

• UIscrollview를 상속 받고 있어 스크롤이 가능해 많은 정보의 리스트를 보여 줄 수 있음
• 여러 개의 cell을 가질 수 있음
• 하나의 열과 여러 줄의 행을 가지고 있어 수직으로만 스크롤 가능
• 섹션을 통해 행을 그룹화하여 콘텐츠를 좀 더 쉽게 탐색 할 수 있음
• 섹션의 header과 footer에 View를 구성하여 추가적인 정보를 표시할 수 있음

 

 

---

 

🤔 UI Table View를 구현하려면?

tableView는  UITableView DataSource와 UITableView Delegate를 채택하여 구현 할 수 있음

델리게이트와 데이터 소스의 정의 따라 tableView의 모습과 Cell 선택 시어떤 행위를 할 것인지 등을 결정함

 

① UITableView DataSource

데이터를 받아 리스트 모양을 그려주는 역할을 함,

총 섹션은 몇 개고 각 섹션의 행은 몇 줄이며 Cell에는 어떤 정보를 표시할 것인지 등을 정의 함 

 

② UITableView Delegate

TableView의 동작과 외관을 담당,

View가 변경되는 사항을 Delegate가 담당하고 view는 Delegate에 의존하여 View를 새로고침함

행의 높이, 행 선택 시 어떤 행동을 할건지 등을 정의 할 수 있음

 

 

---

🤔 UITableView DataSource

• UITableView DataSource는 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블 뷰 객체에 제공
• UITableView Data Source protocol에 정의된 메소드
  • Optional이 아닌 2개의 메소드는 UITableView Data Source에 필수로 구현을 해줘야함
  • UITableView Data Source protocol를 타입에 채택하고 정의된 메소드를 구현해주면 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블 뷰 객체에 제공할 수 있음

 

DataSource 메소드

메소드 (링크를 누르면 애플 문서로 직행~!)	기능
func tableView(UITableView, numberOfRowsInSection: Int) -> Int	⭐️필수 구현 메소드 - 각 섹션에 표시할 행의 갯수를 묻는 메소드, - Int타입의 값을 넣으면 해당 값만큼 행이 늘어남 - 보통 “데이터Array.count” 로 작성
func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell	⭐️ 필수 구현 메소드 - 특정 인덱스 로우에 셀에 대한 정보를 넣어 셀을 반환하는 메소드 - 셀을 구성하고 보여줄 데이터를 설정한 후에 해당 메소드에 반환하면 구성한 셀이 테이블 뷰에 표시됨
func numberOfSections(in: UITableView) -> Int	- 총 섹션의 갯수를 묻는 메소드 - Int타입의 값을 넣으면 해당 값만큼 섹션 표시
func tableView(UITableView, titleForHeaderInSection: Int) -> String?	- 해당 섹션의 헤더 타이틀을 묻는 메소드 - 특정 섹션에 표시하고 싶은 문자열을 반환하면 표시됨
func tableView(UITableView, titleForFooterInSection: Int) -> String?	- 해당 섹션의 푸터 타이틀을 묻는 메소드 - 특정 섹션에 표시하고 싶은 문자열을 반환하면 표시됨
func tableView(UITableView, canEditRowAt: IndexPath) -> Bool	- 특정 위치의 행이 편집 가능한지 묻는 메소드 - true를 반환하면 해당 셀에 스와이프 메뉴를 사용할 수 있음(굳)
func tableView(UITableView, canMoveRowAt: IndexPath) -> Bool	- 특정 위치의 행이 테이블 내의 다른 위치로 이동할 수 있는지 여부를 묻는 메소드 - 행의 위치이동 기능 구현 시 사용
func sectionIndexTitles(for: UITableView) -> [String]?	- 테이블 뷰 섹션 인덱스를 묻는 메소드 (색인 기능)   예) 문자열 배열을 반환하면 아이폰 연락처 앱처럼 오른쪽에 초성과 알파벳으로 색인을 할 수 있는 뷰가 추가
func tableView(UITableView, sectionForSectionIndexTitle: String, at: Int) -> Int	- 인덱스에 해당하는 섹션을 알려주는 메소드    예) 아이폰 연락처 앱에서 색인을 눌렀을 때, 인덱스 중 몇번째가 눌렸는지 알려줌 - 어느 섹션으로 이동할지 섹션의 인덱스 값을 리턴해주면, 인덱스를 선택하였을 때 해당 섹션으로 이동
func tableView(UITableView, commit: UITableViewCell.EditingStyle, forRowAt: IndexPath)	- 스와이프 모드, 편집 모드에서 버튼을 선택하면 호출되는 메소드 -만약 버튼이 선택되었을때, 행이 사라지거나 추가가되면 해당 메소드는 행에 변경사항을 commit 해야함
func tableView(UITableView, moveRowAt: IndexPath, to: IndexPath)	- 행이 다른 위치로 이동하면 어디에서 어디로 이동했는지 알려주는 메소드

---

 

🤔 UITableView Delegate

• UITableView Delegate는 테이블 뷰의 시각적인 부분을 설정하고, 행의 액션관리, 액서세리 뷰 지원 그리고 테이블 뷰의 개별 행 편집을 도와줌
• 필수 구현 메소드는 없음

 

Delegate 메소드

메소드 (링크를 누르면 애플 문서로 직행~!)	기능
func tableView(UITableView, didSelectRowAt: IndexPath)	- 행이 선택되었을 때 호출되는 메소드 - 선택 시의 액션을 넣으면 됨
func tableView(UITableView, didDeselectRowAt: IndexPath)	행이 선택 해제되었을때 호출되는 메소드
func tableView(UITableView, heightForRowAt: IndexPath) -> CGFloat	특정 행의 위치를 묻는 메소드
func tableView(UITableView, viewForHeaderInSection: Int) -> UIView?	지정된 섹션의 헤더뷰에 표시할 View가 뭔지 묻는 메소드
func tableView(UITableView, viewForFooterInSection: Int) -> UIView?	지정된 섹션의 푸터뷰에 표시할 View가 뭔지 묻는 메소드
func tableView(UITableView, heightForHeaderInSection: Int) -> CGFloat	지정된 섹션의 헤더뷰의 높이를 묻는 메소드
func tableView(UITableView, heightForFooterInSection: Int) -> CGFloat	지정된 섹션의 푸터뷰의 높이를 묻는 메소드
func tableView(UITableView, willBeginEditingRowAt: IndexPath)	테이블 뷰가 편집모드에 들어갔을때 호출되는 메소드
func tableView(UITableView, didEndEditingRowAt: IndexPath?)	테이블 뷰가 편집모드에 빠져나왔을때 호출되는 메소드
func tableView(UITableView, willDisplay: UITableViewCell, forRowAt: IndexPath)	테이블 뷰가 셀을 사용하고 행을 그리기 직전에 호출되는 메소드 / 화면에 셀이 표시되면 WillDisplay 메소드 호출
func tableView(UITableView, didEndDisplaying: UITableViewCell, forRowAt: IndexPath)	테이블 뷰로부터 셀이 화면에 사라지면 호출되는 메소드 / 화면에 셀이 사라지면 DidEndDisplay 메소드 호출

---

 

자! 오늘은 UITableView가 무엇이고 어떤 기능들이 있는지 살펴보았습니다.

2편에서는 어떤식으로 UITableView를 구현하는지에 대해 포스팅 하겠습니다!

읽어주셔서 감사합니다!

 

오늘도 좋은하루 되세요~

 

---

 

출처

https://developer.apple.com/documentation/uikit/views_and_controls/table_views

https://developer.apple.com/documentation/uikit/uitableviewdatasource