[swift] TableFlip을 사용하여 Swift에서 확장 가능한 테이블 뷰를 만드는 방법

16 Nov 2023

swift

개요

이번 튜토리얼에서는 Swift에서 확장 가능한 테이블 뷰를 만드는 방법을 알아보겠습니다. 프로젝트에서 테이블 뷰를 사용하여 대량의 데이터를 표시하고, 사용자가 더 많은 데이터를 로드할 수 있도록 테이블 뷰를 확장하는 방법을 다룰 것입니다. 이를 위해 TableFlip 라이브러리를 사용할 것입니다.

TableFlip 소개

TableFlip은 TableView를 쉽게 확장할 수 있는 라이브러리입니다. TableView의 섹션을 추가하고, 해당 섹션을 확장 또는 축소할 수 있습니다. 또한, 애니메이션 효과를 통해 테이블 뷰의 확장/축소를 부드럽게 처리할 수 있습니다.

준비 사항

TableFlip를 사용하기 위해서는 먼저 패키지 매니저를 통해 다음과 같이 설치해야 합니다.

import PackageDescription

let package = Package(
  name: "YourProject",
  dependencies: [
    .Package(url: "https://github.com/mercari/TableFlip", majorVersion: 4)
  ]
)

테이블 뷰 생성

테이블 뷰를 생성하기 위해 다음과 같은 코드를 작성합니다.

import TableFlip

class ExpandableTableViewController: UITableViewController {

  var sections = ["Section 1", "Section 2", "Section 3"]
  var items = [
    ["Item 1", "Item 2", "Item 3"],
    ["Item 4", "Item 5", "Item 6"],
    ["Item 7", "Item 8", "Item 9"]
  ]

  override func viewDidLoad() {
    super.viewDidLoad()

    // TableView 높이 조정
    tableView.rowHeight = 50
    tableView.sectionHeaderHeight = 50

    // TableView 등록
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
  }

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

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

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.textLabel?.text = items[indexPath.section][indexPath.row]
    return cell
  }

  override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50))
    headerView.backgroundColor = .gray

    let titleLabel = UILabel(frame: CGRect(x: 16, y: 0, width: headerView.frame.width, height: headerView.frame.height))
    titleLabel.text = sections[section]

    headerView.addSubview(titleLabel)
    return headerView
  }

  override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 50
  }

}

확장/축소 기능 추가

이제 TableFlip을 사용하여 TableView에 확장/축소 기능을 추가해보겠습니다.

import TableFlip

class ExpandableTableViewController: UITableViewController {

  var sections = ["Section 1", "Section 2", "Section 3"]
  var items = [
    ["Item 1", "Item 2", "Item 3"],
    ["Item 4", "Item 5", "Item 6"],
    ["Item 7", "Item 8", "Item 9"]
  ]

  var isExpanded = [Bool](repeating: false, count: 3)

  override func viewDidLoad() {
    super.viewDidLoad()

    //TableView 높이 조정
    tableView.rowHeight = 50
    tableView.sectionHeaderHeight = 50

    //TableView 등록
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
  }

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

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

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.textLabel?.text = items[indexPath.section][indexPath.row]
    return cell
  }

  override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50))
    headerView.backgroundColor = .gray

    let titleLabel = UILabel(frame: CGRect(x: 16, y: 0, width: headerView.frame.width, height: headerView.frame.height))
    titleLabel.text = sections[section]

    headerView.addSubview(titleLabel)
    headerView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap(_:))))
    headerView.tag = section
    
    return headerView
  }

  override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 50
  }

  @objc func handleTap(_ gestureRecognizer: UITapGestureRecognizer) {
    guard let section = gestureRecognizer.view?.tag else { return }

    isExpanded[section] = !isExpanded[section]
    tableView.reloadSections(IndexSet(integer: section), with: .automatic)
  }

}

결론

이제 TableFlip을 사용하여 Swift에서 확장 가능한 테이블 뷰를 만들 수 있는 방법을 알아보았습니다. 이를 통해 대량의 데이터를 사용자에게 쉽게 제공하고, 테이블 뷰를 효율적으로 확장 및 축소할 수 있습니다. TableFlip은 TableView를 간단하게 확장하기 위한 강력한 도구입니다.

TableFlip에 관한 자세한 내용은 공식 GitHub 페이지를 참조하십시오.