프로그래밍/iOS

Filling a Table with Data

병인 2021. 1. 5. 00:30

data source object를 사용하여 테이블의 셀을 동적으로 만들고 설정하거나 스토리보드에서 정적으로 제공한다.

Overview

테이블 뷰는 인터페이스의 데이터 기반 요소이다. data source object, 즉 UITableViewDataSource 프로토콜을 채택하는 오브젝트를 사용하여 해당 데이터의 각 부분을 화면에 렌더링하는 데 필요한 뷰와 함께 앱의 데이터를 제공한다. 테이블 뷰는 화면에 뷰를 정렬하고 data source object와 함께 작동하여 해당 데이터를 최신 상태로 유지한다.

 

테이블 뷰는 데이터를 행과 섹션으로 구성된다. 행은 개별 데이터 항목을 표시하고 섹션은 관련 행을 함께 그룹화한다. 섹션은 필수는 아니지만 이미 계층적인 데이터를 구성하는 좋은 방법이다. 예를 들어, 연락처 앱은 각 연락처의 이름을 연속으로 표시하고 그 사람 성의 첫 글자를 기준으로 행을 섹션으로 그룹화한다.

 

Provide the Numbers of Rows and Sections

화면에 표시되기 전에 테이블 뷰는 행 및 섹션 수를 지정하도록 요청한다. data source object는 다음 두 가지 방법을 사용하여 이 정보를 제공한다.

func numberOfSections(in tableView: UITableView) -> Int  // Optional 
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

이러한 메서드를 구현할 때 가능한 한 빨리 행 및 섹션 수를 반환해야 한다. 이렇게 하려면 행 및 섹션 정보를 쉽게 검색 할 수 있는 방식으로 데이터를 구조화해야 할 수 있다. 예를 들어 배열을 사용하여 테이블의 데이터를 관리 할 수 있다. 배열은 테이블 뷰 자체의 자연스러운 구성과 일치하므로 섹션과 행을 모두 구성하는 데 좋은 도구이다.

 

아래 예제 코드는 다중 섹션 테이블의 행 및 섹션 수를 반환하는 data source 메서드의 구현을 보여준다. 이 테이블에서 각 행은 문자열을 표시하므로 구현시 각 섹션에 대한 문자열 배열을 저장한다. 섹션을 관리하기 위해 구현에서는 arrays의 array(hierarchicalData라고 함)을 사용한다. 섹션 수를 가져 오기 위해 data source는 hierarchicalData 배열의 항목 수를 반환한다. 특정 섹션의 행 수를 가져 오기 위해 data source는 각 하위 배열의 항목 수를 반환한다.

var hierarchicalData = [[String]]() 

override func numberOfSections(in tableView: UITableView) -> Int {
   return hierarchicalData.count
}

override func tableView(_ tableView: UITableView, 
                        numberOfRowsInSection section: Int) -> Int {
   return hierarchicalData[section].count
}

Define the Appearance of Rows

셀을 사용하여 스토리보드 파일에서 테이블 행의 모양을 정의한다. 셀은 테이블의 행에 대한 템플릿처럼 작동하는 UITableViewCell 오브젝트이다. 셀은뷰이며 컨텐츠를 표시하는 데 필요한 모든 서브 뷰를 포함 할 수 있다. 콘텐츠 영역에 레이블, 이미지 뷰 및 기타 뷰를 추가하고 제약 조건을 사용하여 해당 뷰를 정렬 할 수 있다.

 

앱의 인터페이스에 테이블 뷰를 추가하면 설정 할 수 있는 하나의 프로토타입 셀이 포함된다. 더 많은 프로토타입 셀을 추가하려면 테이블 뷰를 선택하고 프로토타입 셀 속성을 업데이트하시오. 각 셀에는 모양을 정의하는 스타일이 있다. UIKit에서 제공하는 표준 스타일 중 하나를 선택하거나 커스텀 스타일을 정의 할 수 있다.

 

다음 그림은 각각 표준 셀 스타일 중 하나를 사용하는 두 개의 프로토타입 셀이 있는 테이블을 보여준다.

스토리보드 파일에서 각 프로토타입 셀에 대해 다음 작업을 수행한다.

  • 셀 스타일을 커스텀으로 설정하거나 표준 셀 스타일 중 하나로 설정한다.
  • 비어 있지 않은 문자열을 셀의 Identifier 속성에 지정하시오.
  • 커스텀 셀의 경우 셀에 뷰 및 제약 조건을 추가한다.
  • Identity inspector에서 커스텀 셀의 클래스를 지정하시오.

커스텀 뷰가 있는 셀을 만들 때 UITableViewCell의 하위 클래스를 정의하여 해당 뷰를 관리한다. 하위 클래스에서 앱의 데이터를 표시하는 커스텀 뷰에 대한 outlet을 추가하고 해당 outlet를 스토리보드 파일의 actual view에 연결한다. 런타임에 셀을 설정하려면 이러한 outlet이 필요하다.

 

셀 모양을 설정하는 방법에 대한 자세한 내용은 Configuring the Cells for Your Table을 참조하시오.

Create and Configure Cells for Each Row

테이블 뷰가 화면에 나타나기 전에 테이블 뷰는 data source object에게 테이블의 보이는 부분 또는 그 근처의 행에 대한 셀을 제공하도록 요청한다. data source object의 tableView(_:cellForRowAt:) 메서드는 빠르게 respond 해야 한다. 다음 순서로 이 메서드를 구현한다.

  1. 테이블 뷰의 dequeueReusableCell(withIdentifier:for:) 메서드를 호출하여 셀 오브젝트를 검색한다.
  2. 앱의 커스텀 데이터로 셀의 뷰를 설정한다.
  3. 셀을 테이블 뷰로 리턴한다.

표준 셀 스타일의 경우 UITableViewCell에는 설정해야 하는 뷰가 있는 속성이 포함되어 있다. 커스텀 셀의 경우 디자인 타임에 셀에 뷰를 추가하고 액세스 할 outlet을 추가한다.

 

아래 예제 코드는 단일 텍스트 레이블을 포함하는 셀을 구성하는 data source method의 버전을 보여준다. 셀은 표준 셀 스타일 중 하나인 기본 스타일을 사용한다. 기본 스타일 셀의 경우 UITableViewCell의 textLabel 속성에는 데이터로 구성하는 레이블 뷰가 포함된다.

override func tableView(_ tableView: UITableView,
                        cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // Ask for a cell of the appropriate type.
   let cell = tableView.dequeueReusableCell(withIdentifier: "basicStyleCell", for: indexPath)

   // Configure the cell’s contents with the row and section number.
   // The Basic cell style guarantees a label view is present in textLabel.
   cell.textLabel!.text = "Row \(indexPath.row)"
   return cell
}

테이블 뷰에서는 테이블의 각 행에 대해 셀을 만들지 않아도 된다. 대신 테이블 뷰는 셀을 lazy하게 관리하여 테이블의 보이는 부분에 있거나 근처에 있는 셀만 요청한다. 셀을 lazy하게 생성하면 테이블에서 사용하는 메모리 양이 줄어든다. 그러나 data source object가 셀을 빠르게 만들어야 함을 의미하기도 한다. tableView(_:cellForRowAt:) 메서드를 사용하여 테이블의 데이터를 로드하거나 긴 작업을 수행하지 마시오.

노트
표준 셀 스타일을 사용하는 것 외에도 원하는 뷰를 포함하는 커스텀 셀을 정의 할 수 있다. 셀 구성에 대한 자세한 내용은 Configuring the Cells for Your Table을 참조하시오.

Prefetch Data to Improve Performance

테이블 뷰의 스크롤 성능은 중요하다. 테이블의 데이터를 가져오는 데 데이터베이스에서 가져오는 것과 같이 비용이 많이 드는 Operation이 포함 된 경우, 미리 가져오는 data source object(UITableViewDataSourcePrefetching 프로토콜을 채택하는 오브젝트)를 사용하여 데이터가 뷰로 스크롤 되기 전에 비동기적으로 로드하기 시작한다.

 

prefetching data source를 구현하는 방법에 대한 정보는 UITableViewDataSourcePrefetching을 참조하시오.

Specify Data Statically in the Storyboard

prototyping 중이거나 테이블 내용이 변경되지 않을 때 정적 테이블을 사용하여 시간을 절약하시오. 정적 테이블을 사용하면 스토리보드 파일에서 테이블의 모든 데이터를 미리 지정한다. data source object를 구현하지 않는다. 런타임시 UIKit은 스토리보드에서 해당 데이터를 로드하고 관리한다. 런타임에 정적 테이블의 데이터를 변경할 수 없으므로 shipping 앱에서 데이터를 조금만 사용할 수 있다.

스토리보드 파일에서 정적 테이블을 설정한다.

  1. 스토리보드에 UITableViewController 오브젝트를 추가한다.
  2. 테이블 뷰 컨트롤러의 테이블 뷰를 선택하시오.
  3. 속성 관리자에서 테이블 뷰의 Content 속성을 Static Cell로 변경한다.
  4. 테이블 뷰의 Section 속성을 사용하여 테이블의 섹션 수를 지정하시오.
  5. 각 섹션의 Row 속성을 원하는 행 수로 설정하시오.
  6. 원하는 뷰와 콘텐츠로 각 셀을 구성한다.

중요
정적 데이터가 있는 테이블 뷰에는 해당 데이터를 관리하기 위해 UITableViewController 오브젝트가 필요하다.

나중에 테이블 뷰의 콘텐츠를 업데이트 할 가능성이 있는 경우 정적 데이터를 사용하지 마시오. 테이블 뷰에 정적 데이터가 포함 된 UITableViewController에 data source object를 할당하는 것은 프로그래머 오류이다.

 

[원문]

 

Apple Developer Documentation

 

developer.apple.com

 

저작자표시 비영리 변경금지