DevCho
Developer Blog
DevCho
반응형
전체 방문자
오늘
어제
  • 분류 전체보기 (48)
    • IOS (31)
      • Xcode (7)
      • Assets (1)
      • Swift (20)
      • UI (1)
      • SwiftUI (1)
      • Build (1)
    • Flutter (4)
      • Install (4)
      • Dart (0)
    • Rust (0)
    • 유용한 사이트 소개 (1)
    • 개발자의 아이템 (1)
    • Terminal (1)
    • Mac (2)
    • Git (1)
    • 회고 (1)
    • Java (2)
      • Java 기본 사용법 (2)
      • Collections (0)
    • 개발자의 글쓰기 (0)
    • 디자인 패턴 (1)
    • JavaScript (2)
    • Kotlin (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • flutter install
  • optional
  • swift random
  • MAC
  • random number
  • dart
  • xcode
  • CLASS
  • Java
  • Terminal
  • Swift
  • 제어문
  • chocolatey install
  • Xcode Theme
  • func
  • flutter
  • chocolatey 설치
  • chocolatey
  • nil
  • xcode13
  • SwiftUI
  • 스위프트
  • IOS
  • Dark mode
  • Storyboard
  • dart 설치
  • flutter dart
  • flutter 설치
  • struct
  • 플러터 설치

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
DevCho

Developer Blog

[Swift] TableView 이용해 화면에 목록 표시하기
IOS/Swift

[Swift] TableView 이용해 화면에 목록 표시하기

2021. 12. 28. 20:45
반응형

TableView란?

TableView는 화면에 목록을 표시하기 위한 UI구성요소이다.

 

TableView의 구성요소

TableView는 TableView와 TableViewCell 두가지로 이루어진다.

  • TableView: TableViewCell을 여러개 담기 위한 컨테이너
  • TableViewCell: 하나의 아이템

 

그림1. TableView

 

TableView 만들기

1. TableView는 TableView에 TableViewCell을 넣는 형태로 만들어진다. 따라서 TableViewCell을 만들 수 있도록 다음과 같이 구조를 만들도록 하자. 이 때 TableViewCell의 Identifier은 ResuableCell이 된다.

그림2. TableViewCell 만들기

2. 우리는 UITableView의 각 아이템을 만들기 위해 UITableViewDataSource protocol을 ViewController에 Delegate Pattern으로 이식해야 한다. 다음의 과정을 따르자.

 

 1) DataSource delegate을 ViewController로 설정

 2) 아이템 추가

 3) 화면에 표시할 아이템 수 반환

 4) 화면에 표시할 Cell 설정(그림2에서 설정한 ResuableCell Identifier 사용)

 5) 화면에 표시할 Cell 반환

 

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    
    var tableViewItems = ["item1", "item2", "item3"] // 2. 아이템 추가
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self // 1. DataSource delegate을 ViewController로 설정
    }
}

extension ViewController : UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableViewItems.count // 3. 아이템 수 반환
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ReusableCell", for: indexPath)
        cell.textLabel?.text = tableViewItems[indexPath.row] // 4. ReusableCell을 가져온 다음 라벨을 index에 해당하는 값으로 설정
        return cell // 5. 설정한 cell을 리턴
    }
}

 

특히 3~5번 과정은 Delegate Pattern을 구현하는 과정이다.

 

위와 같이 설정이 끝났으면 실행 시 다음과 같이 표시된다.

 

그림3. 실행화면

 

클릭 이벤트 추가하기

위의 아이템에 클릭 이벤트를 추가하기 위해서는 UITableViewDelegate protocol을 ViewController에서 구현한 후 Delegate Pattern을 설정해야 한다.

class ViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    
    var tableViewItems = ["item1", "item2", "item3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
    }
}

..

extension ViewController : UITableViewDelegate { 
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print(indexPath.row) // 클릭이벤트 주기
    }
}

 

위의 코드를 실행하면 클릭 시 이벤트가 발생한다.

그림4. 클릭 이벤트 추가

 

반응형

'IOS > Swift' 카테고리의 다른 글

[Swift] ObservableObject이용해 옵저버(Observer) 패턴 구현하기  (0) 2021.12.31
[Swift] ViewController의 lifecycle methods 알아보기  (0) 2021.12.28
[Swift] 위치 권한 요청 방법 및 요청 문구 변경 방법 알아보기  (0) 2021.12.26
[Swift] extension 키워드 이용해 타입 기능 확장하기  (0) 2021.12.26
[Swift] Background Thread에서 Task 실행하기  (1) 2021.12.26
    'IOS/Swift' 카테고리의 다른 글
    • [Swift] ObservableObject이용해 옵저버(Observer) 패턴 구현하기
    • [Swift] ViewController의 lifecycle methods 알아보기
    • [Swift] 위치 권한 요청 방법 및 요청 문구 변경 방법 알아보기
    • [Swift] extension 키워드 이용해 타입 기능 확장하기
    DevCho
    DevCho
    개발자의 개발 공간

    티스토리툴바