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

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. 클릭 이벤트 추가