[TIL] 테이블뷰

뷰컨트롤러를 하나씩 맡아 작업하기로 하여, 'setting' 환경설정 뷰컨트롤러를 담당하게 되었다.

'setting' UI는 환경설정 내 많은 데이터를 담아내어야하여 테이블뷰 컨트롤러와 네비게이션 컨트롤러를 콜라보하여 구성해야한다.

일단 setting storyboard에 기존 뷰컨트롤러를 지우고, tableViewcontroller를 만들어, 기본 TableView를 구현하자 !

1. Table View Controller 구성

1. 기존 만들어두었던 Viewcontroller 삭제 후, TableViewController 추가
2. Tabbar Item 추가하여 [환경설정] 이미지 아이콘 추가 + 아이콘 사이즈 조절
3. tableview cell → Attribute Inspecter → style [basic] 변경 identifier [cell] 이름 변경
   (코드에서 이 Identifier를 이용하여 설정한 cell을 테이블 뷰에 추가할 예정)
4. TableVIewController → Attribute Inspecter → is initial view controller 클릭

• 뷰컨트롤러에 테이블뷰,셀 추가해서 만들었을 경우, outlet 창에서 Datesource와 Delegate를 테이블 뷰와
  연결해주어야하지만, 테이블뷰컨트롤러는 자동으로 연결되어 있으니 패스 !

• TableViewController 란?

테이블뷰 컨트롤러는 뷰 컨트롤러를 바탕으로 만들어진 테이블뷰의 여러기능을 제공하는 특수한 컨트롤러이다.

UIKIT 프레임워크, UITableViewController 클래스로 구현이 되어있다.

데이터를 목록 형태로 보여주기 위해 가장 용이한게 테이블 뷰 컨트롤러를 이용하는 것 !!

또한 목록의 특정 항목을 선택하여 세부 사항(Navigation 기능)을 표시할 때도 유용하닷

table view 형태

테이블 뷰는 크게 두가지 형태로 구분되어 있는데,

1. 모든 행이 이어져있는 일반 테이블 뷰 (Plain TableView)

• 여러가지 섹션을 가질 수 있고, 각 섹션은 헤더나 푸터를 가질 수 있다.

2. 중간중간에 공백으로 구분되어있는 그룹 테이블 뷰 (Group TableView) 로 나눌 수 있다.

• 여러개의 섹션을 기준으로 그룹화가 되어있는 테이블 뷰
• 특정 기준에 따라 정보들을 분류하여 배치하기에 효과적

table view 계층 구조

테이블뷰 컨트롤러의 계층은 scene, viewcontroller, table view, cell, content view로 구성되있다.

• scene [씬]

  하나의 화면을 나타내는 것

• Table View Controller [테이블 뷰 컨트롤러]

  하나의 뷰 컨트롤러가 하나의 scene 을 담당한다.

• Table View [테이블 뷰]

  테이블 뷰는 최상위 루트 뷰이다. 테이블 뷰 컨트롤러에서 모든 내용은 테이블 뷰를 통해 표현이 된다.

• Table View Cell [테이블 뷰 셀]

  • 셀은 테이블 뷰의 구성원소의 이름
  • UITableViewCell 클래스에 기본적인 스타일이 정해져 있고,
    여기에 서브 뷰를 추가하거나 셀을 수정해 커스텀 셀을 디자인할 수도 있다.
  • 테이블 뷰 셀의 종류 : Basic, Right Detail, Left Detail, Subtitle, Custom

• Content View [콘텐츠 뷰]

  테이블 뷰 셀 안의 내부의 콘텐츠

• Section [섹션]

  테이블 뷰 셀들을 그룹으로 묶을 수 있는 단위를 섹션이라고 한다.

UITableView는 델리게이트(delegate)와 데이터 소스(dataSource)가 필요하다.

• 데이터 소스(dataSource) 란?

테이블에 출력한 데이터를 제공한다.

데이터 소스는 UITableViewDataSource 프로토콜을 준수한다.

( 프로토콜이란? 프로토콜은 특정 작업이나 기능에 적합한 메소드, 프로퍼티 및 기타 요구사항의 청사진(blue print)를 정의한다. 그런 다음, 프로토콜을 클래스, 구조체 또는 열거형에서 채택(adopted)하여 이러한 요구사항을 실제로 구현할 수 있다)

이 프로토콜은 아래 두개의 메서드를 필수적으로 작성해야한다.

1. numberOfRowsInSection: 각 섹션에서 몇개의 행을 보여줄 지 결정
2. cellForRowAtIndexPath: 각 행에서 어떤 정보를 보여줄지 제공

• 델리게이트(delegate) 란?
• 테이블뷰의 셀 재정렬, 삭제 등과 같은 편집 및 그 외 다양한 이벤트를 관리한다.
• 섹션 헤더뷰, 푸더뷰의 설정 등과 같이 뷰를 표현하는 방법을 결정한다

1. 테이블뷰 커스텀 헤더뷰 생성 및 관리 → viewForHeaderInSection:, viewForFooterInSection:
2. 테이블뷰 해더뷰, 푸터뷰, 행 등의 커스텀 높이설정 및 구체화 가능 → heightForRowAt:, heightForHeaderInSection:
3. 테이블뷰 셀 선택 시 반응 → didSelectRowAt:, willSelectRowAt
4. 테이블뷰 컨텐츠의 수정 편집기능 제공 → editingStyleForRowAt

2. class 파일[SettingTableViewController] 생성

1. 기존 생성해두었던 subclass가 UIViewController로 되어있던 settingviewcontroller 파일 삭제 후,
   class : SettingTableViewController / subclass of : UITableviewcontroller 새 파일 생성
2. [setting] storyboard → identify inspected → custom class를 방금 생성한 ' SettingTableViewController' 선택 + storyboard ID 는 'SettingViewController' 입력 !
3. [main]storyboard → settingviewcontroller 레퍼런스→ identify에 방금 설정했던 storyboard ID 입력

3. code

[section 배열 만들기]

import UIKit

class SettingTableViewController: UITableViewController {

    let cellIdentifier: String = "cell" //cell 이름을 정해서 서로 인터페이스

    let setting: [String] = ["글씨체","글씨 크기"]
    let notification:[String] = ["알림받기"]
    let backup:[String] = ["백업 및 복구","TXT파일 내보내기"]
    let support:[String] = ["의견 보내기","별점 남기기","업데이트 소식 v1.0"]
    
    override func viewDidLoad() {
        super.viewDidLoad()

• let (이름) : [String] = [][환경설정] 뷰에 포함될 섹션 이름과 section 내 cell 이름을 담는 배열을 만든다 !
  '다이어리가든' [환경설정] 내 섹션은 총 4개 [설정,알림,백업,지원] 이므로
  영문으로 setting, notification ,backup, support 4개 상수 배열을 만들어주었다
• viewDidLoad()
  View Controller를 만들어주면 항상 기본적으로 들어있는 메서드!
  주로 추가적인 초기화 작업을 구현하기 위해 오버라이딩 되어 사용된다
• let cellIdentifier: String= "cell"
  setting 스토리보드 cell 설정한 이름을 입력하여 서로 인터페이스 해준다.

[데이터 소스가 필수적으로 구현해야하는 메소드1]

override func numberOfSections(in tableView: UITableView) -> Int {
     
        return 4
    } //section에 해당하는 row가 몇개여야하는지 알려달라는 메소드

numberOfSections 은 섹션의 개수를 정하는 메소드이다.

우리 팀은 결과물이 4개 나와야하니, 4를 반환한다.

[[데이터 소스가 필수적으로 구현해야하는 메소드2]

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        // row마다 해당하는 cell을 돌려달라는 의미
        switch section {
        case 0:
            return setting.count
        case 1:
            return notification.count
        case 2:
            return backup.count
        case 3:
            return support.count
        default:
            return 0
        }
    }

numberOfRowsInSection 은 각 섹션에 몇 개의 cell이 들어가는 지를 반환해달라는 메서드이다.

인자로 전달되는 section 값에 따라 반환값을 다르게 해주면 된다 ( 인자란? 어떤 함수를 호출시에 전달되는 값)

switch문을 사용하여 몇번째 section인지에 따라 필요한 값을 반환한다.

1.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        2. let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
         
        var text:String
        
        switch indexPath.section {
        case 0:
            text = setting[indexPath.row]
        case 1:
            text = notification[indexPath.row]
        case 2:
            text = backup[indexPath.row]
        case 3:
            text = support[indexPath.row]
        default:
            text = ""
        }

1. override func tableview(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)

이 메서드는 테이블 뷰에 사용할 모든 cell을 반환해달라는 의미이다.

즉 파라미터로 tableView, indexPath 주어졌다. 그 후, UITableViewCell을 리턴해주는 함수이다.

2. let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)

상수로 선언한 cell을 보면, 파라미터로 받은 dequeueReusableCell이 있다.