[iOS] UICollectionView vs UITableView

Youngwoo Lee·2021년 9월 2일

iOS

목록 보기

25/46

UICollectionView 와 UITableView의 각 특징

사실 UICollectionView에 대해서 공부를 하면서, List형태로 cell들의 Layout을 변경하면 TableView를 만들면 될 것 같다는 생각이 들었다. TableView와 CollectionView의 차이점에 대해서 생각해보고 어떨 경우에 두 개체를 어떤 환경에서 사용하는게 적합한지 알아보자!

UITableView

리스트 형태로 정보를 보여줄 수 있는 뷰이다
하나의 열(column)과 여러 행(row)을 지니며, 수직으로만 스크롤이 가능하다
섹션(section)을 이용해서 행을 시각적으로 그룹화할 수 있다
헤더(header)와 푸터(footer)에 이미지나 텍스트를 추가해서 추가 정보를 보여줄 수 있다

TableView Style

일반 테이블뷰(Plain TableView)
그룹 테이블뷰(Grouped TableView)
- 섹션을 기준으로 그룹화되어 있는 리스트 형태이다
- 각 섹션은 헤더 혹은 푸터를 옵션으로 지닐 수 있다

TableView 생성

동적 프로토타입(Dynamic Prototypes)

셀 하나를 디자인해 이를 다른 셀의 템플릿으로 사용하는 방식
같은 레이아웃의 셀을 여러 개 이용해 정보를 표시하는 경우
데이터 소스(UITableViewDataSource) 인스턴스에 의해 콘텐츠를 관리하며, 셀의 개수가 상황에 따라 변하는 경우에 사용된다

정적 셀(Static Cells)

고유의 레이아웃과 고정된 수의 행을 가지는 테이블뷰에 사용
테이블뷰를 디자인하는 시점에 테이블의 형태와 셀의 개수가 정해져 있는 경우 사용
셀의 개수가 변하지 않음

TableView 구성요소

Cell, delegate, dataSource

TableView Cell

테이블뷰를 이루는 개별 행(row), UITableViewCell 클래스를 상속받는다

Cell Content (셀 콘텐츠)
- 세 가지 프로퍼티를 이용해서 표준 TableViewCell 을 구성할 수 있다
- textLabel : UILabel 주제목 레이블
- detailTextLabel: UILabel 추가 세부 사항 표시를 위한 부제목 레이블
- imageView: UIImageView 이미지 표시를 위한 이미지뷰
Accessory View (액세서리뷰)
- accessoryType 프로퍼티를 이용해서 변경시켜줄 수 있다
- none, disclosureIndicator, detailButton, detailDisclosureButton, checkmark

UITableViewDelegate

// 특정 위치 행의 높이를 묻는 메서드
 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?)

UITableViewDataSource

 @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)

UICollectionView

그리드와 스택, 타일, 그리고 원형 배열을 포함하여 다양한 유연성을 제공하는 인터페이스이다
Cell, Supplementary View, Decoration View, Layout Object 로 구성되어 있다
Cell : 컬렉션뷰의 주요 콘텐츠를 표시한다. 컬렉션뷰는 컬렉션뷰 데이터 소스 객체에서 표시할 셀에 대한 정보를 가져온다. 각 셀은 UICollectionViewCell 클래스의 인스턴스 또는 UICollectionViewCell 을 상속받은 클래스의 인스턴스이다
Supplementary View : 섹션에 대한 정보를 표시한다. 셀과 달리 보충 뷰는 필수는 아니며, 사용법과 배치 방식은 사용되는 레이아웃 객체가 제어합니다. 헤더와 푸터를 예로 들 수 있다
Layout Object: 레이아웃 객체는 컬렉션뷰 내의 아이템 배치 및 시각적 스타일을 결정합니다. 컬렉션뷰 데이터 소스 객체가 뷰와 표시할 콘텐츠를 제공한다면, 레이아웃 객체는 크기, 위치 및 해당 뷰의 레이아웃과 관련된 특성들을 결정한다

UICollectionView

컬렉션뷰의 콘텐츠가 보이는 영역을 정의

UICollectionViewController

컬렉션뷰를 관리하는 뷰 컨트롤러이다

UICollectionViewDataSource protocol

필수적으로 제공해야 한다. 컬렉션뷰의 콘텐츠를 관리하고 해당 컨텐츠를 표시하기 위한 뷰를 제공한다

UICollectionViewDelegate protocol

사용자와의 상호작용과 셀 강조 표시 및 선택 등을 관리한다

UICollectionReusableView / UICollectionViewCell

컬렉션에 표시된 모든 뷰는 UICollectionReusableView 클래스의 인스턴스여야 한다. 이 클래스는 컬렉션뷰에서 사용중인 뷰 재사용 메커니즘을 지원한다. 새로운 뷰를 만드는 대신, 뷰를 재사용하여 성능을 향상시킨다

UICollectionViewLayout

컬렉션 뷰 내부의 셀 및 재사용 가능한 뷰의 위치, 크기 및 시각적 속성을 정의한다
https://engineering.linecorp.com/ko/blog/ios-refactoring-uicollectionview-1/

UICollectionViewLayoutAttribute

레이아웃 프로세스 중에 컬렉션뷰에 셀과 재사용가능한 뷰를 표시하는 위치와 방법을 알려준다

UICollectionViewUpdateItem

레이아웃 객체는 아이템이 삽입, 삭제, 혹은 컬렉션 뷰 내에서 이동할 때마다 레이아웃 객체는 UICollectionViewUpdateItem 클래스의 인스턴스를 받는다

UICollectionView : 사용자에게 보여질 컬렉션 형태의 뷰

UICollectionViewCell : UICollectionView 인스턴스에 제공되는 데이터를 화면에 표시하는 역할을 담당

UICollectionReusableView : 뷰 재사용 메커니즘을 지원한다

UICollectionViewFlowLayout : 컬렉션뷰를 위한 디폴트 클래스로, 그리드 스타일로 셀들을 배치하도록 설계되어 있다. scrollDirection 프로퍼티를 통해 수평 및 수직 스크롤을 지원한다

UICollectionViewLayoutAttributes : 컬렉션뷰 내의 지정된 아이템의 레이아웃 관련 속성을 관리한다

UICollectionViewDataSource : 컬렉션뷰에 필요한 데이터 및 뷰를 제공하기 위한 기능을 정의한 프로토콜이다

UICollectionViewDelegate : 컬렉션뷰에서 아이템의 선택 및 강조 표시를 관리하고 해당 아이템에 대한 작업을 수행할 수 있는 기능을 정의한 프로포톨입니다

UICollectionViewDelegateFlowLayout 프로토콜 : UICollectionViewLayout 객체와 함께 그리드 기반 레이아웃을 구현하기 위해 정의한 프로토콜이다

contentView
backgroundView
selectedBackgroundView
isSelected
isHighlighted

func dragStateDidChange(_:) : 셀의 드래그 상태가 변경되면 호출된다

UICollectionViewDataSource

CollectionView DataSource 객체는 CollectionView에 있어서 가장 중요한 객체이며, 필수로 제공되어야 합니다. 컬렉션뷰의 콘텐츠를 관리하고 해당 컨텐츠를 표현하는데 필요한 뷰를 만듭니다. 데이터소스 객체를 구현하려면 UICollectionViewDataSource 프로토콜을 준수하는 객체를 만들어야 합니다. 그리고 데이터소스 객체는 최소한 collectionView(_: numberOfItemsInSection:) 과 collectionView(_:cellForItemAt:) 메서드를 구현해야 하며 나머지 메서드는 선택사항이다