개인공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

테이블 뷰에 동적으로 데이터 추가해보기

실시간으로 추가되는 데이터가 테이블뷰에 반영되는 것을 만들어보자!

tableView위에 button 하나를 만들어봅니다.

그리고 해당 버튼이 수행할 액션을 코드로 작성한다.
이전에 사용해봤던 dateFormatter를 사용함으로써 버튼을 누르면 날짜가 계속해서 업데이트되어 보여지는 화면을 구성해보자!

var dates: [Date] = []

let dateFormatter: DateFormatter = {
    let formatter: DateFormatter = DateFormatter()
    formatter.dateStyle = .medium
    formatter.timeStyle = .medium
    return formatter
}()

@IBAction func touchUpAddBtn(_ sender: UIButton) {
    dates.append(Date())
//        self.tableView.reloadData()  해당 섹션의 데이터만 가져오는 것이 아니라 전체 데이터를 다시 불러오게 된다 > 비효율
    self.tableView.reloadSections(IndexSet(2...2), with: UITableView.RowAnimation.automatic)
}

1. 변수 dates를 만들어 빈 array를 만들어준다.
2. dateFormatter를 사용
3. 해당 액션을 클릭할때마다 array에 데이터가 추가되어진다.
4. reloadSections를 사용하여 해당 섹션의 데이터만 불러오도록 하고
5. 추가되는 데이터가 애니메이션 효과가 적용된 상태로 보여지도록 한다.

이전 실습에서는 단순 섹션을 추가하고 해당 섹션에 데이터를 추가해줬기 때문에 기존 코드또한 조금 변경을 해줘야 한다.

func numberOfSections(in tableView: UITableView) -> Int {
    return 3  // section의 수를 3개로 늘려주고
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    switch section {
    case 0:
        return korean.count
    case 1:
        return english.count
    case 2:  // button section에 해당하는 case를 추가해준다
        return dates.count
    default:
        return 0
    }
}

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

    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)
    if indexPath.section < 2 {  // section이 2 이하일때 실행하도록 하고
        let text: String = indexPath.section == 0 ? korean[indexPath.row] : english[indexPath.row]
        cell.textLabel?.text = text
    } else {  // 그 외의 case에 대해 실행하는 코드를 추가해준다
        cell.textLabel?.text = self.dateFormatter.string(from: self.dates[indexPath.row])
    }

    return cell
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    if section < 2 {  // 해당 코드 또한 section이 2 이하일때 실행되도록 하고
        return section == 0 ? "한글" : "영어"
    }
    return nil  // 이외에는 nil을 리턴하도록 한다
}

작성한 코드를 실행해보면 아래와 같이 보여질 것이다!

개인공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

테이블 뷰 구현해보기

1. 프로젝트 하나를 만들어서 main.storyboard에서 tableView, tableViewCell을 만들어준다.
2. tableViewCell의 style은 각자 원하는 대로 그치만 지금은 basic으로 설정하며 identifier: cell로 지정해준다.

그리고 간단한 코드를 구현해보자!

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    let cellIdentifier: String = "cell"

    let korean: [String] = ["가", "나", "다", "라"]
    let english: [String] = ["a", "b", "c", "d"]
}

우리가 만든 outlet과 table view를 스토리보드에서 연결시켜준다.
실제 우리가 테이블뷰를 사용하기 위해서는 UITableViewDelegate와 UITableViewDataSource를 사용해야 한다.

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    let cellIdentifier: String = "cell"

    let korean: [String] = ["가", "나", "다", "라"]
    let english: [String] = ["a", "b", "c", "d"]
}

즉, 위 코드와 같이 UITableViewDelegate, UITableViewDataSource 프로토콜을 채택한다.
이를 사용하기 위해 스토리보드에서 직접 연결을 할 수도 있다.

그리고 코드로 구현해볼 수도 있다.

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    self.tableView.delegate = self
    self.tableView.dataSource = self
}

근데 이렇게 채택한 프로토콜을 사용하려하면 아래와 같은 오류가 계속 떠있을 것이다.

UITableViewDataSource가 정의되어 있는 곳으로 들어가보면 publie, optional 등 다양하게 구현되어있는 것을 볼 수 있다.
이때 옵셔널이 아닌것은 꼭 구현이 되어야 한다는 것을 의미한다.

그러니 우선 아래 두 함수를 구현해보도록 하자

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 0
}

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

첫번째 함수는 테이블뷰에 섹션에 해당하는 로우가 몇개인지를 알려달라는 메소드로 return을 통해 알려주게 되며 두번째는 로우마다 해당하는 셀을 돌려달라는 메소드이다. 지금 우리는 코드에서 한글섹션과 영어섹션 두개를 나누어서 구성을 해볼 것인데, 이를 구성하는 방법은 무엇일까? > tableView numberOfSection 사용

func numberOfSections(in tableView: UITableView) -> Int {
    return 2  // 두개의 섹션을 사용할 것
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    switch section {  // 각 섹션마다 다른 갯수를 돌려줄 것
    case 0:  // tableView의 section은 0부터 시작
        return korean.count  // 한글 array의 갯수만큼 돌려줌
    case 1:
        return english.count  // 영어 array의 갯수만큼 돌려줌
    default:
        return 0
    }
}

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

    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: self.cellIdentifier, for: indexPath)
    let text: String = indexPath.section == 0 ? korean[indexPath.row] : english[indexPath.row]
    cell.textLabel?.text = text  // 셀에 표현될 데이터

    return cell
}

잘 정렬되어 나왔지만, 섹션 구분이 좀 어려워보인다.

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return section == 0 ? "한글" : "영어"
}

위 코드를 추가하면 아래와 같게 보여진다.

좀더 보기 예쁘게 해주기 위해서는 스토리보드로 넘어가 테이블뷰의 스타일을 grouped로 만들어준다.

아래처럼 완성!

개인공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

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

테이블뷰 데이터 소스와 델리게이트

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

MVC(Model-View-Controller) 프로그래밍 디자인 패턴에 따라 데이터 소스는 애플리케이션의 데이터 모델(M)과 관련되어 있으며, 델리게이트는 테이블뷰의 모양과 동작을 관리하기에 컨트롤러(C)의 역할에 가깝다. 테이블뷰는 뷰(V)의 역할을 합니다. 데이터 소스와 델리게이트를 통해 테이블뷰를 매우 유연하게 만들 수 있다.

데이터 소스

• 테이블뷰 데이터 소스 객체는 UITableViewDataSource 프로토콜을 채택한다
• 데이터 소스는 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블뷰 객체에 제공
• 데이터 소스는 데이터 모델의 델리게이트로, 테이블뷰의 시각적 모양에 대한 최소한의 정보를 제공
• UITableView 객체에 섹션의 수와 행의 수를 알려주며, 행의 삽입, 삭제 및 재정렬하는 기능을 선택적으로 구현
• UITableViewDataSource 프로토콜의 주요 메서드는 아래와 같다. 이 중 @required로 선언된 두 가지 메서드는 UITableViewDataSource 프로토콜을 채택한 타입에 필수로 구현해야 한다

@required
// 특정 위치에 표시할 셀을 요청하는 메서드
func tableView(UITableView, cellForRowAt: IndexPath)

// 각 섹션에 표시할 행의 개수를 묻는 메서드
func tableView(UITableView, numberOfRowsInSection: Int)

@optional
// 테이블뷰의 총 섹션 개수를 묻는 메서드
func numberOfSections(in: UITableView)

// 특정 섹션의 헤더 혹은 푸터 타이틀을 묻는 메서드
func tableView(UITableView, titleForHeaderInSection: Int)
func tableView(UITableView, titleForFooterInSection: Int)

// 특정 위치의 행을 삭제 또는 추가 요청하는 메서드
func tableView(UITableView, commit: UITableViewCellEditingStyle, forRowAt: IndexPath)

// 특정 위치의 행이 편집 가능한지 묻는 메서드
func tableView(UITableView, canEditRowAt: IndexPath)

// 특정 위치의 행을 재정렬 할 수 있는지 묻는 메서드
func tableView(UITableView, canMoveRowAt: IndexPath)

// 특정 위치의 행을 다른 위치로 옮기는 메서드
func tableView(UITableView, moveRowAt: IndexPath, to: IndexPath)

델리게이트

• 테이블뷰 델리게이트 객체는 UITableViewDelegate 프로토콜을 채택
• 델리게이트는 테이블뷰의 시각적인 부분 수정, 행의 선택 관리, 액세서리뷰 지원 그리고 테이블뷰의 개별 행 편집을 도와줌
• 델리게이트 메서드를 활용하면 테이블뷰의 세세한 부분을 조정할 수 있다
• UITableViewDelegate 프로토콜의 주요 메서드는 아래와 같으며 이 중 필수로 구현해야 하는 메서드는 없다.

// 특정 위치 행의 높이를 묻는 메서드
func tableView(UITableView, heightForRowAt: IndexPath)

// 특정 위치 행의 들여쓰기 수준을 묻는 메서드
func tableView(UITableView, indentationLevelForRowAt: IndexPath)

// 지정된 행이 선택되었음을 알리는 메서드
func tableView(UITableView, didSelectRowAt: IndexPath)

// 지정된 행의 선택이 해제되었음을 알리는 메서드
func tableView(UITableView, didDeselectRowAt: IndexPath)

// 특정 섹션의 헤더뷰 또는 푸터뷰를 요청하는 메서드
func tableView(UITableView, viewForHeaderInSection: Int)
func tableView(UITableView, viewForFooterInSection: Int)

// 특정 섹션의 헤더뷰 또는 푸터뷰의 높이를 물어보는 메서드
func tableView(UITableView, heightForHeaderInSection: Int)
func tableView(UITableView, heightForFooterInSection: Int)

// 테이블뷰가 편집모드에 들어갔음을 알리는 메서드
func tableView(UITableView, willBeginEditingRowAt: IndexPath)

// 테이블뷰가 편집모드에서 빠져나왔음을 알리는 메서드
func tableView(UITableView, didEndEditingRowAt: IndexPath?)

In Apple Docs…

UITableViewDataSource

참고한 애플 문서-UITableViewDataSource

Declaration

protocol UITableViewDataSource

테이블 뷰는 데이터 표현 만 관리하며 데이터 자체를 관리하지 않는다. 데이터를 관리하기 위해 데이터 소스 오브젝트, 즉 UITableViewDataSource 프로토콜을 구현하는 오브젝트를 테이블에 제공한다. 데이터 소스 개체는 테이블의 데이터 관련 요청에 응답하며, 테이블의 데이터를 직접 관리하거나 앱의 다른 부분과 조정하여 해당 데이터를 관리한다.

• 테이블의 섹션 및 행 개수를 보고
• 테이블의 각 행에 셀을 제공
• 섹션 머리글과 바닥 글에 제목을 제공

// Return the number of rows for the table.     
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
   return 0
}

// Provide a cell object for each row.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // Fetch a cell of the appropriate type.
   let cell = tableView.dequeueReusableCell(withIdentifier: "cellTypeIdentifier", for: indexPath)

   // Configure the cell’s contents.
   cell.textLabel!.text = "Cell text"

   return cell
}

UITableViewDelegate

참고한 애플 문서-UITableViewDelegate

Declaration

protocol UITableViewDelegate

• 사용자 정의 머리글 및 바닥 글보기를 만들고 관리
• 행, 머리글 및 바닥 글에 대한 사용자 지정 높이를 지정
• 더 나은 스크롤링 지원을 위해 높이 추정치를 제공
• 행 내용을 들여 쓰고 행 선택에 응답
• 스와이프 및 테이블 행의 다른 작업에 응답 > 테이블 내용 편집을 지원
• 테이블 뷰는 NSIndexPath 객체를 사용하여 행과 섹션을 지정

개인공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

테이블뷰 셀

테이블뷰 셀(TableView Cell)은 테이블뷰를 이루는 개별적인 행(row)으로, UITableViewCell 클래스를 상속받는다. UITableViewCell 클래스에 정의된 표준 스타일을 활용해 문자열 혹은 이미지를 제공하는 셀을 생성할 수 있으며, 커스텀 서브뷰를 올려 다양한 시각적 모습을 나타낼 수 있다.

테이블뷰 셀의 구조

기본적으로 테이블뷰 셀은 아래 이미지와 같이 크게 콘텐츠 영역과 액세서리뷰 영역으로 구조가 나뉩니다.

• 콘텐츠 영역: 셀의 왼쪽 부분에는 주로 문자열, 이미지 혹은 고유 식별자 등이 입력
• 액세서리뷰 영역: 셀의 오른쪽 작은 부분은 액세서리뷰로 상세보기, 재정렬, 스위치 등과 같은 컨트롤 객체가 위치

테이블뷰를 편집 모드(Editing Mode)로 전환하면 아래와 같은 구조로 바뀐다

편집 컨트롤은 삭제 컨트롤(빨간 원 안의 마이너스 기호) 또는 추가 컨트롤(녹색 원 안의 플러스 기호) 중 하나가 될 수 있으며 재정렬이 가능한 경우, 재정렬 컨트롤이 액세서리뷰에 나타난다. 재정렬 컨트롤을 눌러 셀을 드래그하면 위아래로 순서를 변경할 수 있다.

테이블뷰 셀의 기본 기능

UITableViewCell 클래스를 상속받는 기본 테이블뷰 셀은 표준 스타일을 이용할 수 있다. 표준 스타일의 콘텐츠 영역은 한 개 이상의 문자열 그리고 이미지를 지닐 수 있으며, 이미지가 오른쪽으로 확장됨에 따라 문자열이 오른쪽으로 밀려난다.

• UITableViewCell 클래스는 셀 콘텐츠에 세 가지 프로퍼티가 정의되어 있음
• textLabel: UILabel: 주제목 레이블
• detailTextLabel: UILabel: 추가 세부 사항 표시를 위한 부제목 레이블
• imageView: UIImageView: 이미지 표시를 위한 이미지뷰

커스텀 테이블뷰 셀

UITableViewCell 클래스에서 제공하는 표준 스타일 셀을 이용해 이미지와 문자열을 표현하고 글꼴 및 색상 등을 수정할 수 있지만, 기본 형태를 벗어나 다양한 애플리케이션의 요구를 충족시키기 위해 셀을 커스텀 할 수 있다. 셀을 커스텀 하면 이미지를 텍스트 오른쪽에 위치시키는 등 원하는 시각적 형태를 만들 수 있다.

셀을 커스텀 하는 방법에는 크게 두 가지 방법이 있는데, 스토리보드를 이용하거나 코드로 구현할 수 있다.

• 셀의 콘텐츠뷰에 서브뷰 추가하기
• UITableViewCell의 커스텀 서브클래스 만들기

[참고] UITableViewCell의 서브클래스를 이용해 커스텀 이미지뷰를 생성하는 경우, 이미지뷰의 변수명을 imageView로 명명하면 기본 이미지뷰 프로퍼티와 변수명이 같아 원하는 대로 동작하지 않을 수 있으니 반드시 커스텀 이미지뷰의 변수명은 다르게 지어주세요(예. detailImageView, thumbnailImageView, profileImageView). textLabel, detailLabel, accessoryView 등의 기본 프로퍼티 이름 모두 마찬가지입니다.

In Apple Docs…

UITableViewCell

참고한 애플 문서-UITableViewCell

Declaration

class UITableViewCell : UIView

UITableViewCell 객체는 단일 테이블 행의 내용을 관리하는 특수한 유형의 뷰입니다. 주로 셀을 사용하여 앱의 사용자 정의 컨텐츠를 구성하고 표시하지만 UITableViewCell은 다음과 같은 테이블 관련 동작을 지원하기위한 특정 사용자 정의를 제공합니다.

셀에 선택 또는 강조 색상을 적용합니다. 세부 사항 또는 공개 제어와 같은 표준 액세서리보기 추가 셀을 편집 가능한 상태로 만들기 셀 내용을 들여 쓰기하여 테이블에 시각적 계층을 만듭니다.

개인공부 후 자료를 남기기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

테이블뷰(Table View)란?

테이블뷰는 iOS 애플리케이션에서 많이 활용하는 사용자 인터페이스 이다.
테이블뷰는 리스트 형태를 지니고 있으며 스크롤이 가능 해 많은 정보를 보여 줄 수 있다.

테이블뷰 기본 형태

• 테이블뷰는 하나의 열(column)과 여러 줄의 행(row)을 지니며, 수직으로만 스크롤 가능
• 각 행은 하나의 셀(cell)에 대응
• 섹션(section)을 이용해 행을 시각적으로 나눌 수 있다
• 헤더(header)와 푸터(footer)에 이미지나 텍스트를 추가해 추가 정보를 보여줄 수 있다

테이블뷰 스타일

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

• 일반 테이블뷰(Plain TableView)
  • 더 이상 나뉘지 않는 연속적인 행의 리스트 형태
  • 하나 이상의 섹션을 가질 수 있으며, 각 섹션은 여러 개의 행을 지닐 수 있다
  • 각 섹션은 헤더 혹은 푸터를 옵션으로 지닐 수 있다
  • 색인을 이용한 빠른 탐색을 하거나 옵션을 선택할 때 용이
• 그룹 테이블뷰(Grouped TableView):
  • 섹션을 기준으로 그룹화되어있는 리스트 형태
  • 하나 이상의 섹션을 가질 수 있으며, 각 섹션은 여러 개의 행을 지닐 수 있다
  • 각 섹션은 헤더 혹은 푸터를 옵션으로 지닐 수 있다
  • 정보를 특정 기준에 따라 개념적으로 구분할 때 적합
  • 사용자가 정보를 빠르게 이해하는 데 도움이 된다

테이블뷰 생성

테이블뷰를 생성하고 관리하는 좋은 방법은 스토리보드에서 커스텀 UITableViewController 클래스의 객체를 이용 하는 것이다(필요에 따라서 소스코드로 테이블뷰를 생성하는 것도 물론 가능하다) 스토리보드에서 테이블뷰의 특성을 지정할 때, 동적 프로토타입(dynamic prototypes) 혹은 정적 셀(static cells) 중 하나를 선택할 수 있다. 새로운 테이블뷰를 생성할 때 기본 설정 값은 동적 프로토타입 이다.

• 동적 프로토타입(Dynamic Prototypes)
  • 셀 하나를 디자인해 이를 다른 셀의 템플릿으로 사용하는 방식
  • 같은 레이아웃의 셀을 여러 개 이용해 정보를 표시할 경우
  • 데이터 소스(UITableViewDataSource) 인스턴스에 의해 콘텐츠를 관리하며, 셀의 개수가 상황에 따라 변하는 경우에 사용
• 정적 셀(Static Cells)
  • 고유의 레이아웃과 고정된 수의 행을 가지는 테이블뷰에 사용
  • 테이블뷰를 디자인하는 시점에 테이블의 형태와 셀의 개수가 정해져 있는 경우 사용
  • 셀의 개수가 변하지 않음

테이블뷰 구성요소

테이블뷰를 구성하기 위해 꼭 알아야 하는 개념에는 셀(cell), 델리게이트(delegate) 그리고 데이터 소스(data source)가 있습니다

In Apple Docs…

UITableView

참고한 애플 문서-UITableView

Declaration

class UITableView: UIScrollView

iOS의 테이블뷰에는 세로 스크롤 컨텐츠의 단일 열이 행으로 나누어 표시된다. 각 행에는 앱 콘텐츠가 하나씩 포함되어 있다. 하나의 긴 행 목록을 표시하도록 테이블을 구성하거나 컨텐츠를 보다 쉽게 ​​탐색 할 수 있도록 관련 행을 섹션으로 그룹화 할 수 있다.

테이블은 일반적으로 데이터가 고도로 구조화되거나 체계적으로 구성된 앱에서 사용된다. 계층 적 데이터를 포함하는 앱은 종종 탐색 뷰 컨트롤러와 함께 테이블을 사용하여 여러 수준의 계층 구조 간 탐색을 용이하게한다. 예를 들어 설정 앱은 테이블과 탐색 컨트롤러를 사용하여 시스템 설정을 구성한다. UITableView는 테이블의 기본 모양을 관리하지만 앱은 실제 내용을 표시하는 셀 (UITableViewCell 객체)을 제공한다. 표준 셀 구성에는 텍스트와 이미지의 간단한 조합이 표시되지만 원하는 내용을 표시하는 사용자 정의 셀을 정의 할 수 있다. 헤더와 푸터를 제공하여 셀 그룹에 대한 추가 정보를 제공 할 수도 있다.

테이블 뷰는 데이터 중심이며 일반적으로 제공하는 데이터 소스 개체에서 데이터를 가져온다. 데이터 소스 개체는 앱의 데이터를 관리하며 테이블의 셀을 만들고 구성한다. 테이블의 내용이 변경되지 않으면 스토리 보드 파일에서 해당 내용을 대신 구성 할 수 있다.

Table Views

참고한 애플 문서-TableView

테이블뷰에는 세로 스크롤 컨텐츠의 단일 열이 행과 섹션으로 나누어 표시된다. 테이블의 각 행에는 앱과 관련된 단일 정보가 표시되며 섹션을 사용하면 관련 행을 그룹화 할 수 있다.

테이블 뷰는 다음을 포함하여 여러 다른 객체 간의 협업입니다.

• Cells: 셀은 컨텐츠의 시각적 표현을 제공
  • UIKit에서 제공하는 기본 셀을 사용하거나 앱의 요구에 맞게 사용자 정의 셀을 정의 할 수 있다
• Table View Controller: 일반적으로 UITableViewController 객체를 사용하여 테이블 뷰를 관리
  • 다른 뷰 컨트롤러도 사용할 수 있지만 일부 테이블 관련 기능이 작동하려면 테이블 뷰 컨트롤러가 필요
• Data Source object: 이 객체는 UITableViewDataSource 프로토콜을 채택하고 테이블에 대한 데이터를 제공
• Delegate object: 이 개체는 UITableViewDelegate 프로토콜을 채택하고 테이블 내용과의 사용자 상호 작용을 관리

Table

참고한 애플 문서-Table