[iOS] TableView 정리

테이블뷰 정리

---

Index

1. 테이블뷰란?

• 테이블 뷰 기본 형태
• 테이블 뷰 스타일
• 테이블뷰 생성
• 테이블뷰 구성요소

2. 테이블뷰 셀이란?

• 테이블뷰 셀의 구조
• 테이블뷰 셀의 기본 기능
• 커스텀 테이블뷰 셀

3.DataSource와 Delegate?

• 데이터 소스
• 델리게이트

---

1. 테이블뷰란?

테이블뷰는 iOS 애플리케이션에서 많이 활용하는 사용자 인터페이스다.

테이블뷰는 리스트 형태를 지니며 스크롤 이용이 가능해 많은 정보를 보여줄 수 있다.

다양한 용도로 사용하는 테이블뷰의 특징과 구성요소에 대해 알아본다.

테이블 뷰 기본 형태

이미 다양한 iOS 앱에서 만나 익숙한 테이블뷰 형태에 대해 보다 구체적으로 알아보도록 한다.

• 테이블뷰는 하나의 열(column)과 여러 줄의 행(row)을 지니며, 수직으로 스크롤이 가능하다.

• 각 행은 하나의 셀(Cell)에 대응한다.

• 섹션(Section)을 이용해 행을 시각적으로 나눌 수 있다.

• 헤더(Header)와 푸터(Footer)에 이미지나 텍스트를 추가해 추가 정보를 보여줄 수 있다.

테이블 뷰 스타일

테이블뷰는 크게 두가지 스타일(일반, 그룹)로 나뉜다.

각 테이블뷰의 특징에 대해 살펴보자.

• 일반 테이블뷰(Plain TableView)

  • 더이상 나뉘지 않는 연속적인 행의 리스트 형태
  • 하나 이상의 섹션을 가질 수 있으며, 각 섹션은 여러 개의 행을 지닐 수 있다.
  • 각 섹션은 헤더 혹은 푸터를 홉션으로 지닐 수 있다.
  • index를 이용한 빠른 탐색을 하거나 옵션을 선택할 때 용이하다.

• 그룹 테이블뷰(Grouped TableView)

  • 섹션을 기준으로 그룹화되어있는 리스트 형태
  • 하나 이상의 섹션을 가질 수 있으며, 각 섹션은 여러 개의 행을 지닐 수 있다.
  • 각 섹션은 헤더 혹은 푸터를 옵션으로 지닐 수 있다.
  • 정보를 특정 기준에 따라 개념적으로 구분할 때 적합하다.
  • 사용자가 정보를 빠르게 이해하는 데 도움이 된다.

테이블뷰 생성

테이블뷰를 생성하고 관리하기 좋은 방법은 스토리보드에서 커스텀 UITableViewController 클래스의 객체를 이용하는 것이다.

스토리보드에서 테이블뷰의 특성을 지정할 떄, 동적 프로토타입 혹은 정적 셀을 선택할 수 있다.

새로운 테이블뷰를 생성할때의 기본값은 동적 프로토타입이다.

테이블뷰 구성요소

테이블뷰를 구성하기 위해서는 셀(Cell), 델리게이트(Delegate), 데이터 소스(Data Source)의 개념이 꼭 꼭 필요하다!

2. 테이블뷰 셀이란?

테이블뷰의 셀이란 테이블뷰를 이루는 개별적 행(row)으로, UITableViewCell 클래스를 상속받는다.

UITableViewCell 클래스에 정의된 표준 스타일을 활용하여 문자열 또는 이미지 등을 표현하는 셀을 생성할 수 있다.

테이블뷰 셀의 구조

기본적으로 테이블뷰의 셀은 아래와 같이 크게 콘텐츠 영역과 액세서리 뷰 영역으로 이루어져있다.

| 셀 컨텐츠 | 액세서리 뷰 |

컨텐츠 영역: 셀의 왼쪽 부분에는 주로 문자열, 이미지 혹은 고유 식별자 등이 입력된다.

액세서리뷰 영역: 오른쪽 작은 부분의 액세서리뷰로 상세보기, 재정렬, 스위치 등과 같은 컨트롤 객체가 위치한다.

테이블뷰 셀의 기본 기능

UITableViewCell 클래스를 상속받는 기본 테이블뷰 셀은 표준 스타일을 이용할 수 있다.

표준 스타일의 컨텐츠 영역은 한 개 이상의 문자열과 이미지를 지닐 수 있으며, 이미지가 확장됭메 따라 문자열이 오른쪽으로 밀려난다.

UITableViewCell 클래스는 셀 컨텐츠에 세 가지 property가 정의되어 있다.

• textLabel: UILabel -> 주제목 레이블
• detailTextLabel: UILabel -> 부제목 레이블
• imageView: UIImageView -> 이미지 표시를 위한 이미지뷰

커스텀 테이블뷰 셀

UITableViewCell 클래스에서 제공하는 표준 스타일 셀을 이용해 이미지와 문자열을 표현할 수 있으나, 기본 형태를 벗어나 다양한 앱의 요구를 충족시키기 위해서는 커스텀 셀을 이용해야 한다.

커스텀 셀을 이용하면 이미지를 오른쪽에 위치시키는 등 원하는 시각적 형태를 만들어낼 수 있다.

3.DataSource와 Delegate?

DataSource 와 Delegate는 테이블뷰 구현을 위한 필수요소다.

테이블뷰에 원하는 정보를 표시하고, 사용자 선택에 적절히 반응하는 테이블뷰 구현을 위해 꼭 필요한 데이터 소스와 델리게이트에 대해 알아보도록 한다.

UITableView 객체는 데이터 소스와 델리게이트가 없다면 정상동작이 어려우므로 두 객체가 꼭 필요하다.

MVC패턴에서 데이터 소스는 Model과 관련되어 있으며, 델리게이트는 테이블 뷰 모양과 동작을 관리하기에 Controller의 역할을 하고 테이블뷰가 View 역할을 한다.

데이터 소스와 델리게이트 덕분에 테이블뷰를 매우 유연히 만들 수 있다.

데이터 소스

• 테이블뷰 데이터 소스 객체는 UITableViewDataSource 프로토콜을 채택한다.

• 데이터 소스는 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블뷰 객체에 제공한다.

• 데이터 소스는 데이터 모델의 델리게이트로, 테이블뷰의 시각적 모양에 대한 최소한의 정보를 제공한다.

델리게이트

• 테이블뷰 델리게이트 객체는 UITableViewDelegate 프로토콜을 채택한다.

• 델리게이트는 테이블뷰의 시각적인 부분 수정, 행의 선택 관리, 액세서리뷰 지원, 행 개별 편집등을 도와준다.

정리

• 테이블뷰를 구성하기 위해서는 셀(Cell), 델리게이트(Delegate), 데이터 소스(Data Source)의 개념이 꼭 꼭 필요하다

• MVC패턴에서 데이터 소스는 Model과 관련되어 있으며, 델리게이트는 테이블 뷰 모양과 동작을 관리하기에 Controller의 역할을 하고 테이블뷰가 View 역할을 한다.

• 데이터 소스는 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블뷰 객체에 제공한다.

• 델리게이트는 테이블뷰의 시각적인 부분 수정, 행의 선택 관리, 액세서리뷰 지원, 행 개별 편집등을 도와준다.