[IOS] UITableView(1) - UITableView의 기본 구조와 개념

 

UITableView

 

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

Apple Developer Documentation

 

 

 

UITableView는 여러개의 Cell을 가지고 있고 하나의 열과 여러 줄의 행을 지니고 있으며 수직으로만 스크롤이 가능하게 만들어진 UI이다. 섹션을 이용해 행을 그룹화하여 콘텐츠를 좀 더 쉽게 탐색할 수 있다. 또한 cell에 헤더와 푸터에 사진과 이모티콘등 추가적인 정보표시 가능하다. 해당 사진은 UITableView의 대표적인 예시인 연락처와 설정 페이지이다. 

 

테이블 뷰는 Plain(일반 테이블 뷰), Grouped(그룹테이블 뷰)로 나눌 수 있다. 위의 사진에서 연락처가 plain, 설정이 grouped 모양이다.

1. plain - 여러개의 섹션을 가질 수 있고, 각 섹션은 헤더나 푸터를 가질 수 있다. 주로 indexing을 통한 탐색, 옵션 선택등의 상황에 이용된다.
2. Grouped 뷰 - 여러개의 섹션을 기준으로 그룹화가 되어잇는 테이블 뷰이다. 특정 기준에 따라 정보들을 분류해 배치하기에 효과적 요즘에는 insetgrouped라는 새로운 스타일로 나왔다.

 

 

 

UITableView Cell

셀은 테이블 뷰의 구성원소이다. 즉 하나의 행을 의미한다. UITableViewCell 클래스에 기본적인 스타일이 정해져 있고, 여기에 서브뷰를 추가하거나 셀을 수정해 커스텀셀을 디자인 할 수 있다.

 

테이블 뷰 셀은 기본적으로 content only, with accessory view, in edit mode 3가지의 구조를 가지고 있다. 이 중에서 주로 사용되는 것이 with accessory view이다. with accessory view는 컨텐츠 영역에는 문자열, 이미지, 식별자 등이 위치하고, 엑세서리 영역에서는 상세보기. 재정렬 등의 조장을 위한 객체가 존재한다.

 

기본적으로 테이블 뷰 셀의 프로퍼티는 이름, 설명, 사진 세가지로 정의 되어있다. 만약 이미지가 포함된다면 이미지가 왼쪽에 삽입되고 이름과 설명이 오른쪽으로 밀려나 위치하게 된다. 기본 프로퍼티를 이용하면 단순하고 익숙한 테이블 뷰를 만들 수 있다. 그러나 만약 앱에 어울리는 컨셉 / 디자인 셍을 따로 디자인하고자 한다면, 컨텐츠 뷰 안에 서브뷰를 삽입해서 구성해주고나 UITableVeiwCell의 서브 클래스를 만들어 디자인해줄 수 있다.

 

 

 

 

dequeResuablecell

테이블 뷰는 특이한 형태로 화면에 출력된다. 코드를 작성해 보면 테이블뷰에 셀 넣기위해 dequeResuablecell라는 함수가 사용된다. 조금 구체적으로 설명해보자면, dequeResuablecell은 스토리보드에서 정의한 셀을 identity를 통해 가져오고 indexpath([section index, row index]로 이루어진 배열) 위치에서 해당 셀을 재사용한다. 여기서 특이한 점은 "재사용"이다. 테이블 뷰는 특이하게도 셀을 재사용하며 작동한다. 예를 들어 천개의 셀이 있다면 각각 만들어서 메모리에 할당하면 메모리 낭비가 심하다. 극단적으로 만들고자 하는 셀이 1억개라면? 사실상 불가능하다. 따라서 deque를 통해 cell을 재사용하고 스크롤을 할때마다 안의 내용물만을 바꾸어 준다. 훨씬 효율적인 방법이라고 할 수 있다.

 

 

 

 

DataSource, delegate

UITableView 객체는 Delegate와 DataSource가 필수적이다. MVC(model, view, controller)에 따라서 데이터소스는 데이터를 받아 뷰를 그려주는 역할을 수행한며 델리게이트는 테이블 뷰의 외관과 동작을 주관하는 역할을 수행한다. 대다수의 경우 델리게이트와 데이트소스는 같은 객체이며 UITableViewController의 하위 클래스이다. 해당 클래스를 상속하여 필요에 따라 코드를 수정해주며 사용하면 된다.

 

 DataSource 

테이블 뷰를 생성하고 수정할 때 필요한 정보들을 제공한다. 외형의 형성을 위한 필수적인 최소한의 데이터만을 제공한며 데이터소스는 UITableDataSource 프로토콜을 따른다. 이것은 두 개의 메서드를 필수로 포함해야 한다. 

1. numberOfRowsInSection : 각 섹션에서 몇 개의 행을 보여줄 지 결정하는 매서드
2. cellForRowAtIndexPath : 각 행에서 어떤 정보를 보여줄 지 제공하는매서드

그 위에도 헤터, 푸터, 행의 삽입과 삭제 등에 관련된 여러 메서드를 오버라이딩해서 사용이 가능하다.

 

 Delegate

델리게이트는 UITableViewDelegate 프로토콜을 채택한다. 이 프로토콜은 데이터소스와 달리 필수로 요구하는 메서드는 없지만, 테이블 뷰의 외형에 대한 설정을 하는 다양한 메서드를 가지고 있다. 테이블 뷰의 섹션, 엑세서리뷰, 각각의 행에 대한 수정, 편집모드의 접근제어 등을 할 수 있다.