Table View

오늘은 iOS 애플리케이션에서 정보를 리스트 형태로 보여주기 위해 사용되는 테이블뷰에 대해서 알아보자. 이전에 SwiftUI를 이용하여 아이폰 기본 설정 앱을 섹션과 리스트를 주로 이용하여 클론 코딩해 보면서 이것을 UIKit에 적용하게 되면 어떻게 해야 할지 궁금했었는데 오늘은 이를 위해 Table View를 학습해 보고 정리해 보는 시간을 가져보자. 

 

---

1. 테이블뷰는 무엇인가?

 

테이블뷰는 리스트 형태를 가지고 있으며 스크롤이 가능해서 많은 정보를 사용자에게 쉽게 보여 줄 수 있다. 기본적인 형태는 아래와 같다.

 

• 하나의 열과 여러 줄의 행을 가지고 있으며 수직으로만 스크롤이 가능하다.
•  각 행은 하나의 cell에 대응된다.
• 섹션을 이용하여 행을 시각적으로 나눌 수 있다. 
• 헤더 및 푸터에 이미지나 텍스트를 추가하여 추가 정보를 보여 줄 수 있다. 

전체적으로 SwiftUI에서 다뤄본 개념들이 많아 스유로 작업을 해봤다면 크게 어렵지 않을 것이다. 

---

 

2. 테이블뷰 스타일

 

테이블뷰의 스타일은 크게 세 가지로 나뉜다. 

1. 일반 테이블(Plain)
   • 더 이상 나뉘지 않는 연속적인 행의 리스트 형태입니다.
   • 색인을 이용한 빠른 탐색을 하거나 옵션을 선택할 때 용이합니다.
2. 그룹 테이블(Group)
   • 섹션을 기준으로 그룹화되어 있는 리스트 형태입니다.
   • 정보를 특정 기준에 따라 개념적으로 구분할 때 적합합니다.
   • 사용자가 정보를 빠르게 이해하는 데 도움이 됩니다.
3. inset grouped
   • 그룹화된 섹션이 둥근 모서리로 삽입된 형태

일반, 그룹 테이블의 공통점 

• 하나 이상의 섹션을 가질 수 있으며, 각 섹션은 여러 개의 행을 지닐 수 있습니다.
• 각 섹션은 헤더 혹은 푸터를 옵션으로 지닐 수 있습니다.

 

3가지 테이블의 차이점은 글보다는 직접 실습해 보면서 확인해 보면 더 좋을 것 같다. 그리고 inset grouped의 경우 예전 자료를 찾아보면 나오지 않을 텐데 이는 OS 13.0 이후부터 추가된 것이라 그렇다고 하니 참고하면 좋을 것 같다.

---

 

3. 테이블뷰 셀

테이블뷰 셀은 테이블뷰를 이루는 개별적인 행으로 UITableViewCell 클래스를 상속받는다. 

 

이에 따라 테이블뷰 셀에서 왼쪽은 문자열이나 이미지와 같은 것이 입력되는 콘텐츠 영역, 오른쪽 부분에 상세 보기 및 재정렬과 같은 컨트롤 객체가 위치하고 있는 액세서리뷰 영역으로 구성되어 있다. 

 

 

---

 

4.  테이블뷰 데이터 소스와 델리게이트 

 

 

데이터 소스: 데이터를 받아서 뷰에 그려주는 역할을 함

델리게이트: 뷰에서의 동작을 제시해 준다. 사용자에게 보이는 것에 대한 동작을 수행

 

MVC 프로그래밍 디자인 패턴에서의 관점에서 다시 한번 정리한 부분을 살펴 본다면 데이터 소스는 애플리케이션의 데이터모델의 모델(M)과 관련이 있고, 델리게이트의 경우 테이블뷰의 모양과 동작을 관리하기 때문에 컨트롤러(C)의 역할로 이해하면 될 것이다. 그리고 나머지 뷰(V)의 역할은 테이블뷰에 해당된다. 

 

데이터 소스

 @required 
 // 특정 위치에 표시할 셀을 요청하는 메서드
 func tableView(UITableView, cellForRowAt: IndexPath) 
 
 // 각 섹션에 표시할 행의 개수를 묻는 메서드
 func tableView(UITableView, numberOfRowsInSection: Int)
 
 @optional
 // 테이블뷰의 총 섹션 개수를 묻는 메서드
 func numberOfSections(in: UITableView)
 
 // 특정 섹션의 헤더 혹은 푸터 타이틀을 묻는 메서드
 func tableView(UITableView, titleForHeaderInSection: Int)
 func tableView(UITableView, titleForFooterInSection: Int)
 
 // 특정 위치의 행을 삭제 또는 추가 요청하는 메서드
 func tableView(UITableView, commit: UITableViewCellEditingStyle, forRowAt: IndexPath)
 
 // 특정 위치의 행이 편집 가능한지 묻는 메서드
 func tableView(UITableView, canEditRowAt: IndexPath)

 // 특정 위치의 행을 재정렬 할 수 있는지 묻는 메서드
 func tableView(UITableView, canMoveRowAt: IndexPath)
 
 // 특정 위치의 행을 다른 위치로 옮기는 메서드
 func tableView(UITableView, moveRowAt: IndexPath, to: IndexPath)

 

 

---

 

델리게이트 

// 특정 위치 행의 높이를 묻는 메서드
 func tableView(UITableView, heightForRowAt: IndexPath)
 // 특정 위치 행의 들여쓰기 수준을 묻는 메서드
 func tableView(UITableView, indentationLevelForRowAt: IndexPath)

 // 지정된 행이 선택되었음을 알리는 메서드
 func tableView(UITableView, didSelectRowAt: IndexPath)

 // 지정된 행의 선택이 해제되었음을 알리는 메서드
 func tableView(UITableView, didDeselectRowAt: IndexPath)

 // 특정 섹션의 헤더뷰 또는 푸터뷰를 요청하는 메서드
 func tableView(UITableView, viewForHeaderInSection: Int)
 func tableView(UITableView, viewForFooterInSection: Int)

 // 특정 섹션의 헤더뷰 또는 푸터뷰의 높이를 물어보는 메서드
 func tableView(UITableView, heightForHeaderInSection: Int)
 func tableView(UITableView, heightForFooterInSection: Int)

 // 테이블뷰가 편집모드에 들어갔음을 알리는 메서드
 func tableView(UITableView, willBeginEditingRowAt: IndexPath)

 // 테이블뷰가 편집모드에서 빠져나왔음을 알리는 메서드
 func tableView(UITableView, didEndEditingRowAt: IndexPath?)

 

---

이번에는 Table View를 사용하기에 앞서 알아야하는 개념적인 부분을 위주로 정리 해보면서 학습 하였다. 다음시간에는 학습한 내용을 토대로 실습을 통해 어떻게 동작하는지 확실하게 알아보자!