Ios - UITableView 기본

TableView는 Ios 앱 제작에 있어 매우 매우 많이 응용되는 중요한 뷰라 할 수 있습니다. 메모앱의 메모목록이나 뮤직앱의 플레이리스트 등 테이블뷰는 여러 앱에서 다양한 형태로 사용되고 있습니다. 오늘은 이러한 테이블뷰를 만드는 가장 기초적인 방법을 알아보겠습니다.

 

테이블뷰는 Xcode의 Objects Library에서 테이블뷰컨트롤러를 통해 생성할 수도 있지만(이경우 아래에서 다룰 DataSource 및 Delegate가 자동으로 연결 및 생성됨) 여기서는 일반 뷰컨트롤러에 테이블뷰와 테이블뷰셀을 추가하는 방법으로 진행하겠습니다.

 

시작하기

1. 일반적인 ViewController에 TableView를 추가합니다.

 

2. 그리고 TableView안에 TableViewCell을 추가합니다. TableViewCell은 하나 하나의 목록을 말하고 TableView는 이러한 셀들을 묶어서  관리 및 화면에 표시하는 뷰입니다.

 

3. ViewController에 TableView를 IBOutlet으로 연결합니다.(주의: TableViewCell에 오브젝트들을 넣어 이것을 IBOutlet으로 ViewController에 연결하는 것은 오류를 만듭니다!!! -> 커스터마이징 셀을 만들기 위해서는 스토리보드와 같은 역할을 하는 .xib파일을 만들어 UITableViewCell을 만들고 여기에 오브젝트들을 추가합니다. 이 오브젝트들을 커스텀 TableViewCell.swift 파일을 생성한 뒤 여기에 IBOutlet으로 연결해야합니다!!!!)

 

DataSource

1. TableView에 TableViewCell들을 이루기 위한 데이터를 관리하고 셀을 제공하기 위해 사용하는 프로토콜인 UITableViewDataSource를 확장합니다.

 

2. UITableViewDataSource 프로토콜을 확장하면 아래의 두 메소드를 반드시 구현해야합니다.

 

numberofRowsInSection -> 테이블뷰에 들어갈 행의 갯수를 return값으로 주어 결정합니다.

cellForRowAt -> 테이블뷰에 생성할 셀을 구현하여 생성케하는 메소드입니다. 따라서 UITableViewCell타입의 값을 즉, 코드로 구현한 셀을 반환값으로 줍니다.

 

셀을 생성해주어야 하는데 이 때 tableView 클래스에 정의된 dequeueReusableCell(...)메서드를 이용하여 생성합니다. 붕어빵을 만드는 붕어빵판같은 기능을 한다 할 수 있습니다.

 

이렇게 생성한 일정한 판에 indexPath.row값을 이용하여 각각의 셀마다 서로 다른 데이터값을 넣으므로 각각의 셀이 고유의 데이터들을 나타내도록 만들 수 있습니다.

 

그리고 UITableViewCell의 standard type으로 textLabel, detailTextLabel, imageView을 이용할 수 있습니다. (다른 속성들을 추가하는 등의 커스터마이징 cell을 만들고 싶은 경우 위에서 말한 것처럼, TableViewCell.xib에 넣은 오브젝트들을 커스텀 TableViewCell.swift 파일에 IBOutlet으로 연결해야합니다.

extension ViewController: UITableViewDataSource {
	
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	
    	return numberOfRows
	}
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "foo", for: indexPath)
        
        cell.textLabel?.text = titles[indexPath.row]
        
        return cell
    }

}

 

Delegate

 

tableview.reloadData() - tableview datasource 메소드를 다시 호출하여 다시 셀 생성하게 만듦