로고

UITableView 기초: 간단한 목록 만들기

작성일 :

UITableView 기초: 간단한 목록 만들기

UITableView는 iOS 개발에서 매우 유용한 컴포넌트 중 하나로, 데이터를 목록 형태로 표시할 때 사용합니다. 이번 글에서는 UITableView를 사용하여 간단한 목록을 만드는 방법을 단계별로 설명합니다. 이 튜토리얼을 마치면 여러분은 UITableView의 기본적인 설정과 사용법을 이해하게 될 것입니다.

프로젝트 설정

먼저, Xcode를 열고 새 프로젝트를 생성합니다. 프로젝트 템플릿으로 'Single View App'을 선택하고 Swift를 프로그래밍 언어로 설정해 주세요.

  1. 프로젝트 생성: Xcode에서 'Single View App' 템플릿으로 새 프로젝트 생성
  2. 언어 설정: Swift를 선택
  3. 유니버설 옵션: 프로젝트를 유니버설로 설정 (iPhone, iPad 지원)

UI 구성

이제 Main.storyboard에서 UITableView를 추가해 보겠습니다.

  1. 스토리보드 열기: Main.storyboard 파일을 더블 클릭하여 엽니다.
  2. UITableView 추가: 오른쪽 하단의 객체 라이브러리(Object Library)에서 UITableView를 찾아서 ViewController에 드래그 앤 드롭합니다.
  3. 제약 조건 설정: UITableView를 선택하고 제약 조건을 추가하여 뷰의 가장자리에 고정시킵니다.

뷰 컨트롤러와 UITableView 간의 연결을 설정하려면 다음 단계를 따르세요.

  1. ViewController.swift 파일 열기: ViewController.swift 파일을 엽니다.

  2. UITableView 아웃렛 생성:

    swift
    import UIKit

class ViewController: UIViewController {
  @IBOutlet weak var tableView: UITableView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // 기타 초기 설정
  }
}

  3. 스토리보드에서 연결: Main.storyboard로 돌아가서 ViewController의 UITableView를 아웃렛에 연결합니다.

데이터 소스 및 델리게이트 설정

UITableView를 작동시키기 위해서는 데이터 소스와 델리게이트를 설정해야 합니다. ViewController 클래스에 UITableViewDataSource와 UITableViewDelegate 프로토콜을 채택하도록 합니다.

  1. 프로토콜 채택:

    swift
    class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  @IBOutlet weak var tableView: UITableView!

  override func viewDidLoad() {
    super.viewDidLoad()
    tableView.dataSource = self
    tableView.delegate = self
  }

  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10 // 예제 데이터 수
  }

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.textLabel?.text = "Row \(indexPath.row + 1)"
    return cell
  }
}

  2. 셀 재사용 식별자 설정: 스토리보드에서 UITableViewCell을 선택하고, 속성 창에서 재사용 식별자를 cell로 설정합니다.

  3. 셀이 없는 경우 대비: 기본적으로 dequeueReusableCell 메서드는 반드시 설정된 셀 식별자를 반환해야 합니다. 위 코드에서는 cell 식별자를 가진 셀을 반환하도록 설정합니다.

기본적인 목록 데이터 설정

이제 UITableView에서 목록 데이터를 효과적으로 표시하기 위해 기본 데이터를 설정해 보겠습니다. 예제에서는 정적인 문자열 배열을 사용합니다.

  1. 데이터 배열 추가:

    swift
    class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  @IBOutlet weak var tableView: UITableView!

  let data = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew"]

  override func viewDidLoad() {
    super.viewDidLoad()
    tableView.dataSource = self
    tableView.delegate = self
  }

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

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

  2. 테이블 갱신: viewDidLoad 메서드에서 tableView.reloadData()를 호출합니다. 이를 통해 데이터 소스 배열이 변경되었을 때 테이블 뷰가 갱신됩니다.

사용자 인터페이스 개선

기본적인 설정이 끝났으니, 이제 사용자 인터페이스를 개선하기 위해 몇 가지 추가 설정을 해보겠습니다.

  1. 커스텀 셀 디자인:

    • 스토리보드에서 UITableViewCell을 선택하고, 커스텀 스타일을 적용합니다.
    • 필요한 경우 셀에 이미지를 추가하거나 상세 라벨을 추가할 수 있습니다.

  2. 동적 높이 조정:

    swift
    tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableView.automaticDimension

  3. 셀 선택 시 행동 지정:

    swift
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  let selectedItem = data[indexPath.row]
  print("Selected item: \(selectedItem)")
}

이제 UITableView의 기본 설정과 데이터 소스, 델리게이트를 활용하여 간단한 목록을 만들 수 있습니다. 이 튜토리얼이 UITableView를 이해하는 데 도움이 되었기를 바랍니다.

추가 자료