[ios] UITableViewCell이란 무엇인가?

장일규·2022년 3월 27일
post-thumbnail

The visual representation of a single row in a table view를 해석해보면 tableView에서 단일 행의 시각적 표현이라고 한다.

tableView는 테이블의 기본 모양을 관리하지만 실제 콘텐츠를 표시하는 셀(UITableViewCell 개체)은 앱에서 제공한다.

설정 앱에 있는 개별 항목들을 Cell이라고 한다.

설정 앱에는 총 13개의 Cell이 존재한다.

tableView Cell의 구조

Content only

Cell내부는 세개의 영역으로 구분하지만, 기본 상태에서는 Content View가 Cell Frame전체를 차지한다.

Cell UI구성 시 Content View 내부에서 구성한다.

With accessory view

Accessory view는 항상 Cell의 오른쪽에 표시된다.

Cell은 다양한 Accessory view를 가지고 있다.

  • Cell Content: 셀의 왼쪽 부분이고 주로 문자열, 이미지 등 고유 식별자

  • Accessory View: 상세보기, 재정렬, 스위치 등 컨트롤 객체

In edit mode

Accessory view, Cell Content, Accessory view 세개의 영역으로 나뉘어 진다.

편집모드에서는 왼쪽은 Editing Control인데 애플 문서에는 Delete Control가 표시되어있다.
여튼, 이쪽에는 Delete Control, 또는 Add Control 중 하나가 될 수 있다.

재정렬이 가능한 경우에는 재정렬 컨트롤이 Accessory view에 나타난다.
재정렬 컨트롤을 눌러 셀을 드래그하게 되면 위아래로 순서를 변경할 수 있다.

설정에 있는 언어 및 지역에 있는 Cell을 확인해보면..

편집 컨트롤 / 셀 콘텐츠 / 재정렬 컨트롤로 구성이 되어 있다.

UITableViewCell.CellStyle

다양한 CellStyle에 대한 열거이다.

세 구역 중에 ContentView는 UI구성에 제한이 없고,

양 사이드에 표시되는 Control들은 미리 지정되어 있는 스타일들을 고정으로 사용하기 때문에 제한적인 커스터마이징만 가능하다.

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

표준 스타일의 콘텐츠 영역은 한 개 이상의 문자열 그리고 이미지를 지닐 수 있고, 이미지가 오른쪽으로 확장됨에 따라 문자열이 오른쪽으로 밀려난다.

UITableViewCell 클래스는 셀 콘텐츠에 세 가지 프로퍼티가 정의되어 있다.

  • textLabel: UILabel: 주제목 레이블
  • detailTextLabel: UILabel: 추가 세부 사항 표시를 위한 부제목 레이블
  • imageView: UIImageView: 이미지 표시를 위한 이미지뷰

UITableView의 CellStyle

UIKit은 4가지의 기본적인 CellStyle을 제공한다.

  • .default
    • 기본 스타일인 default는 textLabel과 imageView로 구성되어 있다.
  • .value1

셀 왼쪽에는 검은색 텍스트와 왼쪽 정렬된 레이블이 있는 셀의 스타일이다.

오른쪽에는 텍스트가 더 작고 오른쪽 정렬된 레이블이 있다.

설정 프로그램을 사용 시 .value1 스타일의 셀을 사용한다.

  • value2

셀 왼쪽에 오른쪽 정렬 및 파란색 텍스트가 있는 레이블이 있는 셀의 스타일.

셀 오른쪽에는 왼쪽 정렬 및 검은색 텍스트가 더 작은 레이블이 있다.

Phone/Contacts 응용 프로그램은 이 스타일의 셀을 사용한다.

  • .subtitle

맨 위에 왼쪽 정렬된 레이블이 있고,

그 아래에 왼쪽 정렬된 레이블이 더 작은 회색 텍스트로 있는 셀 스타일이다.

표준 셀 구성에서는 텍스트와 이미지의 간단한 조합을 표시하지만 원하는 내용을 표시하는 사용자 정의 셀을 정의할 수 있다.
또한 머리글 및 바닥글 보기를 제공하여 셀 그룹에 대한 추가 정보를 제공할 수 있다.

참고 링크

uitableviewcell
cellstyle

0개의 댓글