(iOS) 테이블 뷰 (TableView)

TableView

TableView의 데이터 표현 방식

TableView는 표면적으로는 단순히 목록 형태의 데이터를 화면에 표시해주는 역할을 한다. 하지만 내부적으로 보면 계층 구조를 이루는 콘텐츠의 상위 카테고리들을 정렬하여 표현해주며, 그 속에서 사용자가 원하는 항목에 쉽게 접근할 수 있도록 도와준다.

네비게이션 컨트롤러와 테이블 뷰 컨트롤러는 계층적 성격의 콘텐츠를 표현하기에 알맞고, 서로 상호 보완적인 역할을 하게 된다. 네비게이션 컨트롤러는 수직적인 정보들을 직렬로 표현하며, 테이블뷰 컨트롤러는 수평적인 정보들을 병렬로 배열하게된다.

TableView의 계층구조

1. TableView Controller
   • ViewController를 바탕으로 만들어진 특수한 컨트롤러이다.
   • 화면 전체를 목록형식으로 나타낼때 사용된다.
   • 하나의 씬은 하나의 뷰 컨트롤러가 필요하다. 따라서 TableViewController가 있으면 ViewController는 필요가 없다.
2. Table View
   • TableViewController의 루트 뷰이다. 목록 형식의 데이터를 표현하는 View이다.
   • 일반 ViewContorller에 TableView객체만 추가하여 사용할 수 도 있다.
3. Table View Cell
   • Table View는 목록을 구성하는 객체이고, Table View Cell은 목록 안에 들어갈 행들을 구성하는 뷰이다.
4. Content View
   • Cell(하나하나의 행) 내부에 들어갈 콘텐츠를 담당하는 Veiw이다.

Prototype Cell

Cell을 쉽게 디자인할 수 있도록 해주는 객체를 말한다. 쉽게 말하면 틀만 제공해주고, 내부에 버튼이나 텍스트 레이블등이 공간을 차지하지 않는다.

왼쪽에 Title 레이블이 차지하는 공간이 Cell Content영역이고, 오른쪽에 버튼이 있는 부분을 Accessory View라고 한다.

표준 편집 인터페이스

코코아 터치 프레임워크에는 프로토타입 셀에 위 그림과 같은 표준 편집 인터페이스를 제공한다. 오른쪽에 있는 Reordering Control 을 통해 순서를 정렬할 수 있고, 왼쪽의 Editting Control 영역의 버튼을 통해 삭제하거나 추가하는 기능을 사용할 수 있다.

DataSource

TableVeiw의 데이터 표현 방법은 2가지가 있다. 정적 타입, 동적 타입.

테이블 뷰를 통해 표현하려는 데이터가 매번 갱신되는 동적인 타입이라면, Dynamic Prototypes를 선택해야하며, dataSource가 필요하다. dataSource와 테이블 뷰를 연결하는 과정을 데이터 바인딩이라고 한다.

데이터 바인딩 (TableView와 DataSource 연결)

UITableViewDataSource라는 프로토콜에 의존하여 연동된다. 아래의 두가지 내용을 필수 메소드를 통해 나타낸다.

• TableViewController를 사용하는 경우에는 자동으로 메소드가 클래스내부에 추가되어있다.
• ViewController에서 extension메소드를 통해 UITableViewDelegate UITableViewDataSource를 해주면 빨간 경고버튼이 뜨는데, 눌러주면 자동으로 추가된다.

1. 테이블이 몇 개의 행으로 구성되는가? -> tableView(_:numberOfRowInSection:)
   • 테이블 뷰가 생성해야 할 셀 개수를 반환한다.
   • 이 메소드를 통해 시스템은 몇개의 행을 생성할지 정한다.
2. 테이블뷰의 각 셀은 어떻게 구성되는가? -> tableView(_:cellForRowAt:)
   • 셀 하나하나에 대해 계속 호출되게 된다.
   • 셀 내부에 들어갈 콘텐츠를 구성하고, 그것을 반환한다. (셀 인스턴스를 반환한다)

사용자 액션 처리 메소드

tableView(_:didSelectRowAt:) 메소드는 사용자가 테이블 뷰에서 특정 셀을 터치했을때 호출된다.

즉, 특정 셀을 선택했을때 detail 내용을 표시하는 화면으로 전환한다거나 하는 코드를 작성할때 필요한 메소드이다. 몇 번째 셀을 선택했는지 indexPath 의 .row를 통해 알 수 있고, 이 메소드 내부에 셀 선택시 동작할 기능을 구현하면 된다.

ReusableCell

iOS시스템은 수 많은 테이블 뷰의 셀에대한 객체들을 일일이 다 만들지 않는다. 메모리를 절약하기 위해, 당장의 화면에 표시될 만큼만 셀을 생성하게 된다. 그리고 셀셀 객체를 저장하는 공간인 재사용 큐를 만들어 두고 필요할때 꺼내어 사용한다. 그리고 필요가 없어진 셀은 다시 재사용 큐에 저장된다.

즉, 코드와 함께 말하자면dequeueReusableCell(withIdentifier:) 메소드가 호출 되었을때 입력된 아이디에 맞는 인스턴스가 재사용 큐에 저장되어 있다면 인스턴스를 꺼내어 재사용하고, 없다면 새로 생성하여 제공하는 방식으로 동작한다.

프로토타입셀의 객체 제어하기

프로토타입셀은 셀 내부에 있는 레이블, 이미지 뷰 등의 화면요소를 소스코드에서 참조하는 방법은 두가지이다.

(1) Tag값 사용하기 viewWithTag(_:)

• 정수값을 사용하기 때문에, 관리가 어렵다
• 구현이 쉽다. 어트리뷰트 인스펙터에서 Tag번호를 붙여준 뒤에 소스코드에서 cell.viewWithTag(<태그번호>)메소드를 호출하여 참조할 수 있다.
• cell.viewWithTag메소드는 반환타입이 UIView이므로, 해당 객체의 클래스로 다운캐스팅 해주어야한다. 예를들어 label 이라면 <참조한 객체> as? UILabel

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell")!
            let label = cell.viewWithTag(10) as? UILabel
            label?.text = dataSet[indexPath.row]
            return cell
        }
    }

아웃렛 변수 연결하여 참조하기 (커스텀 클래스 구현하기)

• 프로토타입 셀을 제어할 커스텀 클래스를 구현해야한다.
• 1번 보다 구현이 어렵지만, 추후 관리는 더 편하다.

1. 클래스 파일을 생성해준다.

import UIKit
class TableViewCell: UITableViewCell {
    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var priceLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

2. 스토리보드의 셀에서 방금 생성한 클래스파일을 지정하여 연결해준다.

3. 스토리보드에서 셀의 객체들을 아웃렛 변수로 연결해준다. (당연히 방금만든 커스텀 셀 클래스에)
4. ViewController 파일로 돌아가서,tableView(_:cellForRowAt: 메소드에서 cell을 선언하는 부분을 방금 생성한 커스텀 셀 클래스로 다운캐스팅을 해준다. 그리고 함수 내부에 레이블 등 각 View에 대한 속성을 작성하면된다.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = pizzaTableView.dequeueReusableCell(withIdentifier: "pizzaCell") as! TableViewCell
            cell.nameLabel.text = "PIZZA"
      return cell
    }