[SeSAC] 220719 TIL

TableView Row(행) 높이

일괄적인 행 높이를 조절하는 것이라면, 전자의 코드를 사용하는 것이 더 나아보인다.

self.tableView.rowHeight = 80

// 셀의 높이(옵션, 빈도 높은) (feat. tableView.rowHeight)
// 메서드의 우선 순위가 더 높다.
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 100
}

 

---

 

삼항연산자의 사용

삼항연산자를 처음 알게 되었을 때, 정말 모든 부분에 코드를 남용했었다. 그런데 사용하다보니 오히려 코드를 이해하는 데 시간이 걸리는 경우도 많았고, 여러 조건이 겹쳐 있는 경우에는 사용하기 어려웠다. 그렇기에 적절한 순간에 사용하는 것이 필요하다고 생각이 들었다. 삼항연산자의 사용을 오히려 지양하는 것이 좋아보였고, 정말 간단한 부분에만 사용하는 것이 좋아보인다.

if indexPath.row % 2 == 0 {
  cell.imageView?.image = UIImage(systemName: "star")
  cell.backgroundColor = .white
} else {
  cell.imageView?.image = UIImage(systemName: "star.fill")
  cell.backgroundColor = .systemGray6
}

cell.imageView?.image = indexPath.row % 2 == 0 ? UIImage(systemName: "star") : UIImage(systemName: "star.fill")
cell.backgroundColor = indexPath.row % 2 == 0 ? .white : .systemGray6

 

---

 

셀을 2개 이상 사용한다면?

하나의 테이블 뷰에서 여러 개의 셀을 사용하고 싶은 경우가 있다. 이런 경우 시스템이 적절한 셀을 꺼내와 테이블뷰에 뿌려줄 수 있어야 하는데 그것을 가능하게 하도록 identifier가 사용된다. 셀의 이름표라고 생각하면 편할 것 같다.

 

---

 

재사용 메커니즘

1000개의 셀을 화면에 보여줄 것이라고 해서 셀을 한 번에 다 만들어놓는 것은 아니다. 화면에는 당장 필요한 셀만 보여주고 만들어 놓은 셀을 재사용하는 구조로 이루어진다. 딥한 메커니즘은 이후에 알아보도록 하자.

 

 

---

 

Enum을 활용한 코드 개선

우측 화면을 어떻게 구성할 수 있을까? 간단하게 TableViewController를 이용해보도록 하자.

 

CaseIterable

열거형을 배열처럼 사용할 수 있도록 도와주는 프로토콜

CustomStringConvertible

아래 링크 참고
[Swift] CustomStringConvertible

한가지 새로 알게된 것은 CustomStringConvertible 프로토콜을 채택하고, 출력을 하면 description으로 정해 놓은 String 값으로 출력되길래 그 동안 Type 역시 String인 줄 알았지만 Type은 그대로 열거형 타입이었다. print(SettingType.total)와 같이 출력을 하면 "전체 설정"과 같이 출력되는데 이를 헤더의 타이를로 사용할 수 없었던 이유는 String 타입이 아니라 열거형 타입이었기 때문이다. 그래서 String으로 변환해주어서 코드를 작성하였다.

// 다음과 같은 인스턴스 메서드도 있더라.
String(describing: <#T##CustomStringConvertible#>)

 

나의 경우 아래와 같이 코드를 작성해서 위의 화면을 구현했다.

import UIKit

enum SettingType: CaseIterable, CustomStringConvertible {
    case total
    case personal
    case etc

    var contents: [String] {
        switch self {
        case .total:
            return ["공지사항", "실험실", "버전 정보"]
        case .personal:
            return ["개인/보안", "알림", "채팅", "멀티프로필"]
        case .etc:
            return ["고객센터/도움말"]
        }
    }
    
    var numberOfRowInSections: Int {
        return contents.count
    }
    
    var description: String {
        switch self {
        case .total:
            return "전체 설정"
        case .personal:
            return "개인 설정"
        case .etc:
            return "기타"
        }
    }
}

final class SettingViewController: UITableViewController {
    override func numberOfSections(in tableView: UITableView) -> Int {
        return SettingType.allCases.count
    }
    
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return String(describing: SettingType.allCases[section])
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return SettingType.allCases[section].numberOfRowInSections
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "settingCell") else { return UITableViewCell() }
        cell.textLabel?.text = SettingType.allCases[indexPath.section].contents[indexPath.row]
        return cell
    }
}

 

---

 

네비게이션 컨트롤러 지정 위치

1. 탭 바 + 네비게이션
2. 네비게이션 + 각 Child 뷰 컨트롤러

• 1번의 경우, 각 뷰 컨트롤러의 탭 바 아이템을 설정하기가 편하다.
• 2번의 경우, 네비게이션 바 구현이 편하다. 네비게이션 바 타이틀, 아이템을 설정하기가 편하다.

 

---

 

Extension

• 필요한 요소들만 익스텐션으로 만들자.
• 한 군데에서만 사용한다면 익스텐션으로 만들지 않는 것이 좋다.
• UIViewController+Extension 안에 100개의 함수를 추가로 선언해놓았다고 가정해보자. UIViewController를 상속해오거나 사용하려고 할 때 그 함수들까지 불러오기 때문에 불필요한 호출이 일어날 수 있고 무거워진다.

 

---

 

Store Property

• 저장 프로퍼티는 포함할 수 없다.
• 선언하는 시점에 메모리에 올라가기 때문에 확장의 형태로 사용할 수 없다.
• cf) 메서드는 호출하는 시점에 사용되기 때문에 확장을 할 수 있는 것이다.

 

---

 

Issue

• TableView ViewController 연결 이슈 (Xcode 끄고 켜기, Clean Build Folder, 역으로 연결하기)
• Identifier 휴먼 에러 (Cell Id는 정확히 쓰자)
• numberOfRowInSection (메서드 정확히 사용하자)

 

---

 

커스텀 셀 생성하기

• 셀 클래스 파일 생성
• 셀과 클래스 연결 (정확히 매칭시켜주어야 함)
• 셀 identifier 설정
• 셀 꺼내기

 

---

 

셀 추가하기(갱신하기)

ReloadData

배열에 데이터를 잘 추가해준다고 해도, 테이블뷰에는 변경 사항이 반영되지 않는다. 그렇기 때문에 UI를 다시 그리라고 TableView에 요청할 필요가 있다. 데이터가 달라지는 시점에 적절히 요청되어야 한다. 다음과 같은 메서드를 호출해서 테이블뷰를 다시 그리도록 한다.

tableView.reloadData()

reloadData()시점에는 다음 작업이 실행된다.

• numberOfItemsInSection 메서드 : cell의 개수 결정
• cellForItemAt 메서드 : 화면에 보여질 만큼의 셀 생성

매번 전체를 갱신해야 할까?

Section, Row만 갱신할 수도 있다. 적절히 선택해서 사용하도록 하자.

• reloadSections()
• reloadRows()

예시 코드

import UIKit

class BucketlistTableViewController: UITableViewController {

    var list = ["범죄도시", "탑건", "토르"]
    
    @IBOutlet weak var userTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.rowHeight = 90
    }
    
    @IBAction func userTextFieldDidFinish(_ sender: UITextField) {
        self.list.append(sender.text!)
        self.tableView.reloadData()
    }
}

// MARK: - Methods

extension BucketlistTableViewController {
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.list.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: BucketlistTableViewCell.self), for: indexPath) as! BucketlistTableViewCell
        cell.bucketlistLabel.text = self.list[indexPath.row]
        cell.bucketlistLabel.font = .boldSystemFont(ofSize: 18)
        return cell
    }
}

 

---

 

테이블뷰 관련 메서드 및 기능

스크롤 시 키보드 dismiss

Reload

self.tableView.reloadData()
self.tableView.reloadSections(IndexSet(0...0), with: .fade)
self.tableView.reloadRows(at: [IndexPath(row: 0, section: 0), IndexPath(row: 1, section: 0)], with: .fade)

Move & Swipe

override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
    // 셀 이동
}

override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    // 삭제
}

override func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    // 즐겨찾기 핀 고정
}

Default Edit(+Delete)

// 편집 가능한 상태로 만들 수 있음
override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
    return true
}

override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    if editingStyle == .delete {
        // 배열 삭제 후에 테이블 뷰 갱신
        list.remove(at: indexPath.row)
        tableView.reloadSections(IndexSet(0...0), with: .automatic)
    }
}