Configuring the Cells for Your Table

Panther·2021년 8월 26일

https://developer.apple.com/documentation/uikit/views_and_controls/table_views/configuring_the_cells_for_your_table

"Specify the appearance and content of your table’s rows by defining one or more prototype cells in your storyboard."

스토리보드에서 하나 혹은 하나 이상의 프로토타입 셀을 정의해 테이블 행의 모양 및 컨텐트를 구체화합니다.

Overview

셀은 테이블 행의 시각적 표현을 제공합니다. 대부분의 테이블에서 하나 혹은 두 가지 다른 타입의 셀을 제공합니다. 가장 중요한 정보가 나타날 수 있도록 셀을 디자인하시기 바랍니다. 셀에서 뷰와 뷰 설정을 신중하게 선택함으로써 그렇게 하시기 바랍니다.

스토리보드 파일에서 디자인 시점의 셀의 모양을 구체화할 수 있습니다. Xcode는 각 테이블에 하나의 프로토타입 셀을 제공하며, 필요한 경우 프로토타입 셀을 추가할 수 있습니다. 프로토타입 셀은 셀 모양에 대한 템플릿 역할을 합니다. 프로토타입 셀은 표시하길 원하는 뷰와 셀 컨텐트 영역 내부에 정렬을 포함합니다. 런타임 시점에 테이블의 데이터 소스 객체는 프로토타입으로부터 실제 셀을 생성하고, 앱 데이터로 셀을 설정합니다.

셀 모양 디자인 방법에 대한 팁은 Human Interface Guidelines: Tables를 보시기 바랍니다.

Human Interface Guidelines: Tables
https://developer.apple.com/design/human-interface-guidelines/ios/views/tables/

Assign a Reuse Identifier to Each Cell

재사용 아이덴티파이어는 테이블 셀의 생성 및 재활용을 가능하게 합니다. 재사용 아이덴티파이어는 테이블의 각 프로토타입 셀에 할당하는 스트링입니다. 스토리보드에서 프로토타입 셀을 선택하고 아이덴티파이어 특성에 비어있지 않은 값을 할당해야 합니다. 테이블 뷰에 있는 각 셀은 고유한 재사용 아이덴티파이어를 갖고 있어야 합니다.

런타임에 셀 객체가 필요한 경우 원하는 셀에 대한 재사용 아이덴티파이어를 전달하면서 테이블 뷰의 dequeueReusableCell(withIdentifier:for:) 메소드를 호출해야 합니다. 테이블 뷰는 이미 생성된 셀의 internal 큐를 유지합니다. 큐가 요청된 타입의 셀을 포함하면, 테이블 뷰는 해당 셀을 반환합니다. 그렇지 않으면 스토리보드에 있는 프로토타입 셀을 사용해 새로운 셀을 생성합니다. 재사용 셀은 스크롤링처럼 중요한 시점 동안 메모리 할당을 최소화시켜 성능을 향상시킵니다.

var cell = tableView.dequeueReusableCell(withIdentifier: "myCellType", for: indexPath)

Configure a Cell with a Built-In Style

셀을 설정하는 가장 간단한 방법은 UITableViewCell에서 제공하는 내장된 스타일 중 한 가지를 사용하는 것입니다. 이러한 스타일을 있는 그대로 사용할 수 있습니다. 이 경우 셀 관리를 위한 커스텀 서브클래스 제공이 필요하지 않습니다. 각 스타일은 셀 컨텐트 영역 내부에서 레이블의 포지션을 결정하는 스타일과 함께 하나 혹은 두 레이블을 통합합니다. 대부분의 스타일은 셀 컨텐트의 leading edge에 이미지를 통합하기도 합니다.

표준 스타일 중 한 가지로 프로토타입 셀을 설정하려면 스토리보드에서 셀을 선택하고 셀의 스타일 속성을 커스텀이 아닌 한 가지로 설정해야 합니다.

tableView(_:cellForRowAt:) 메소드에서 UITableViewCell의 속성인 textLabel, detailTextLabel, imageView를 사용해 셀의 컨텐트를 설정할 수 있습니다. 이와 같은 속성은 뷰를 포함하지만, 셀 객체는 스타일이 상응하는 컨텐트를 지원하는 경우 오직 뷰만 할당할 수 있습니다. 예를 들어 기본 셀 스타일은 세부 스트링을 지원하지 않기 때문에 이 스타일에서 detailTextLabel 속성은 nil입니다. 아래 예시 코드는 기본 셀 스타일을 사용하는 셀 설정 방법을 보여줍니다.

override func tableView(_ tableView: UITableView, 
             cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // Reuse or create a cell. 
   let cell = tableView.dequeueReusableCell(withIdentifier: "basicStyle", for: indexPath)

   // For a standard cell, use the UITableViewCell properties.
   cell.textLabel!.text = "Title text"
   cell.imageView!.image = UIImage(named: "bunny")
   return cell
}

Configure a Cell with Custom Views

표준 스타일이 아닌 다른 모양의 경우 커스텀 셀 스타일을 사용할 수 있습니다. 커스텀 셀을 사용하면 셀 내부에 뷰를 구체화할 수 있으며, 뷰의 설정, 크기, 위치를 설정할 수 있습니다. 레이블과 이미지처럼 정적인 뷰는 셀에 대한 최선의 컨텐트입니다. 컨트롤처럼 사용자 상호작용을 요구하는 뷰는 피하시기 바랍니다. 셀 내부에 스크롤 뷰, 테이블 뷰, 컬렉션 뷰, 기타 복잡한 컨테이너 뷰를 포함하지 않아야 합니다. 셀에 스택 뷰를 넣을 수도 있지만, 성능 향상을 위해 스택 뷰에 들어가는 아이템의 수를 최소화하시기 바랍니다.

커스텀 셀을 설정하려면 테이블에서 프로토타입 셀에 뷰를 드래그해야 합니다. 아래 그림은 커스텀 레이아웃 및 뷰에 대한 형식 설정을 갖는 셀을 보여주고 있습니다. 셀 컨텐트 영역 내부에 뷰를 위치시키기 위해 제약을 사용할 수 있습니다. 제약을 설정할 때 셀의 컨텐트 영역 사이에 대한 차이를 유지하기 위해 "Constrain to margins"를 사용하시기 바랍니다.

커스텀 셀의 경우 셀의 뷰에 접근하려면 UITableViewCell 서브클래스를 정의할 필요가 있습니다. 서브클래스에 아웃렛을 추가하고 이러한 아웃렛을 프로토타입 셀에 있는 상응하는 뷰에 연결해야 합니다.

class FoodCell: UITableViewCell {
    @IBOutlet var name : UILabel?
    @IBOutlet var plantDescription : UILabel?
    @IBOutlet var picture : UIImageView?
}

데이터 소스의 tableView(_:cellForRowAt:) 메소드에서 값을 뷰에 할당하기 위해 셀의 아웃렛을 사용해야 합니다.

override func tableView(_ tableView: UITableView, 
             cellForRowAt indexPath: IndexPath) -> UITableViewCell {

   // Reuse or create a cell of the appropriate type.
   let cell = tableView.dequeueReusableCell(withIdentifier: "foodCellType", 
                         for: indexPath) as! FoodCell

   // Fetch the data for the row.
   let theFood = foods[indexPath.row]
        
   // Configure the cell’s contents with data from the fetched object.
   cell.name?.text = theFood.name
   cell.plantDescription?.text = theFood.description
   cell.picture?.image = theFood.picture
        
   return cell
}

Change the Height of Rows

테이블 뷰는 셀을 나타내는 셀로부터 구분해서 셀의 높이를 추적합니다. UITableView는 행에 대한 기본값 크기를 제공하지만, 테이블 뷰의 rowHeight 속성에 커스텀 값을 할당해서 기본값 높이를 오버라이드 할 수 있습니다. 모든 행의 높이가 같을 때 이 속성을 사용하시기 바랍니다. 그렇게 하는 것은 딜리게이트 객체로부터 높이 값을 반환하는 것보다 더 효율적입니다.

모든 행의 높이가 같지 않은 경우 혹은 동적으로 변하는 경우에는 딜리게이트 객체의 tableView(_:heightForRowAt:) 메소드를 사용해서 높이를 제공하시기 바랍니다. 이 메소드를 구현하는 경우 테이블에 있는 모든 행에 값을 제공해야 합니다. 아래 예시 코드는 각 섹션의 첫 번째 행에 커스텀 높이를 반환하면서 다른 행들은 모두 기본값 높이를 사용하는 방법을 보여주고 있습니다.

override func tableView(_ tableView: UITableView, 
           heightForRowAt indexPath: IndexPath) -> CGFloat {
   // Make the first row larger to accommodate a custom cell.
  if indexPath.row == 0 {
      return 80
   }

   // Use the default size for all other rows.
   return UITableView.automaticDimension
}

테이블 뷰는 시각화되는 행에 대한 높이만을 요청합니다. 사용자가 스크롤할 때, 테이블 뷰는 각각의 행이 나타날 때 높이를 제공하길 요청하며, 이는 행이 화면 밖으로 나갈 때와 화면으로 돌아올 때를 포함합니다.

Restore Your Cell's Original Appearance Before Reuse

셀이 화면 밖으로 나갈 때 테이블 뷰는 뷰 계층구조에서 셀을 제거하고 내부적으로 관리되는 재활용 큐에 위치시킵니다. 테이블 뷰의 dequeueReusableCell(withIdentifier:for:) 메소드를 사용해서 새로운 셀을 요청하면 테이블 뷰는 우선적으로 재사용 큐로부터 셀을 반환합니다. 큐가 비어있으면 테이블 뷰는 스토리보드로부터 새 셀을 인스턴스화합니다.

커스텀 셀 뷰의 모양을 변경하려면 셀 서브클래스의 prepareForReuse() 메소드를 구현하시기 바랍니다. 구현에서 셀 뷰의 모양을 원래 상태로 반환해야 합니다. 예를 들어 셀에 있는 뷰의 알파 속성을 변경하려면 해당 속성을 기존 값으로 반환해야 합니다. 셀 표시 설정을 할 때 레이블 텍스트를 지울 필요가 없고, 이미지를 nil로 설정할 필요도 없으며, tableView(_:cellForRowAt:) 메소드로 수정되는 어떤 것도 수행할 필요가 없습니다.

Add an Accessory View to Your Cell

액세서리 뷰는 선택적이며, 셀의 trailing edge에 나타나는 시스템에 의해 정의된 뷰입니다. 사용자와 표준 셀 동작을 소통하기 위해 액세서리 뷰를 사용할 수 있습니다. 예를 들어 행을 탭하면 행에 대한 더 많은 정보를 표시한다는 것을 사용자가 파악할 수 있도록 디테일 버튼을 추가할 수 있습니다.

액세서리 뷰를 설정하려면 아래처럼 합니다.

스토리보드에서 원하는 액세서리 뷰를 선택하기 위해 셀의 액세서리 특성을 사용해야 합니다.
코드에서 셀의 accessoryType 속성 값을 변경해야 합니다.

사용자는 액세서리 뷰가 탭되었을 때 특정 동작을 갖기를 기대합니다. 이와 같은 동작 구현 방법에 대한 내용은 UITableViewCell.AccessoryType을 보시기 바랍니다.

UITableViewCell.AccessoryType
https://developer.apple.com/documentation/uikit/uitableviewcell/accessorytype
https://velog.io/@panther222128/UITableViewCell.AccessoryType

Configuring the Cells for Your Table

Overview

Assign a Reuse Identifier to Each Cell

Configure a Cell with a Built-In Style

Configure a Cell with Custom Views

Change the Height of Rows

Restore Your Cell's Original Appearance Before Reuse

Add an Accessory View to Your Cell

See Also

Cells, Headers, and Footers

Adding Headers and Footers to Table Sections

UITableViewCell

UITableViewHeaderFooterView

Estimating the Height of a Table's Scrolling Area

UITableViewCell.AccessoryType

Adding Headers and Footers to Table Sections

0개의 댓글

Configuring the Cells for Your Table

Overview

Assign a Reuse Identifier to Each Cell

Configure a Cell with a Built-In Style

Configure a Cell with Custom Views

Change the Height of Rows

Restore Your Cell's Original Appearance Before Reuse

Add an Accessory View to Your Cell

See Also

Cells, Headers, and Footers

Adding Headers and Footers to Table Sections

UITableViewCell

UITableViewHeaderFooterView

Related Documentation

Estimating the Height of a Table's Scrolling Area

UITableViewCell.AccessoryType

Adding Headers and Footers to Table Sections

0개의 댓글