[iOS/Swift] TableView 기본 사용법, 리스트 테이블뷰에 표시하기, TableView Cell 기본 사용법

TableView를 사용하는 가장 기본적인 방법만을 정리한 문서입니다.

 

 TableView는 가장 흔하게 볼 수 있는 View 중 하나이다. TableView는 안에 TableView Cell을 표시해서 우리가 원하는 결과를 보여준다. 즉 TableView 안에 TableView Cell에서 정보를 표시한다는 뜻이다. 설명도 같이 포함했지만 이해가 안 간다면 사진만 보고 그대로 따라 하면 된다.

 

프로젝트를 생성하고 TableView를 불러온다. 

 

 원하는 위치에 배치를 끝내고 제약조건을 설정한다. 다음은 내용 표시를 위한 TableView Cell을 불러와야 한다.

 

 TableView와 같은 방법으로 TableView Cell을 불러오는데, 배치는 TableView 안으로 해주면 된다.

 

 빨간색 네모 테두리를 확인하면 TableView안에 TableView Cell이 들어간 모습을 확인할 수 있다. Content View는 자동으로 생성된다.

 

 다음은 Cell을 사용하기 위해서 Object들을 배치하는 작업이 필요하다. 위에 사진처럼 Cell을 클릭하고 위아래로 Cell의 높이를 조절할 수 있다. 그러면 안에 Content View 높이도 바뀌는데 필요에 따라서 조절하면 된다.

 

 일단 테스트를 하기 위해서 간단하게 [이름, 나이, 사는 곳]을 표시하기 위한 Label들을 배치했다.

 

 이번에는 Label IBOutlet을 설정해주는 것이다. 하지만 ViewController가 아니라 TableView Cell Class에 설정할 것이다.

[command + N] 버튼을 클릭해서 Cocoa Touch Class를 생성해준다.

 

Subclass를 UITableViewCell로 설정해주고 이름은 “MyTestTableViewCell”로 지정했다.

(이름을 설정하기 전에 Subclass 먼저 설정해주고 Class 이름을 후에 바꾸는 게 편하다. 하다 보면 이해가 갈 것)

 

 생성된 TableViewCell Class이다. 여기다 사용하고 싶은 IBOutlet을 연결하는 것이다.

 우선 생성한 Class를 TableView Cell과 연결을 해준다. Cell을 클릭하고 생성한 Class 이름을 입력하고 엔터를 누르면 Module 칸에 프로젝트 이름이 연하게 보이면 제대로 적용된 것이다.

 

다시 한번 Cell을 클릭하고 identifier을 설정해준다. 원하는 이름으로 알아볼 수 있게 설정하면 된다.

 

TableView Cell에서 사용할 Label들을 생성한 Cell Class에 IBOutlet을 설정해준다. 

 

 다음은 사용할 ViewController에 TableView를 IBOutlet으로 연결한다. 여기까지 하면 연결 작업은 얼추 끝난 것이다. 아니 끝난 거다. 에러가 발생한다면.. 인터넷 검색을 통해서 다시 찾아보면 된다..?!

 

 우선 우리는 간단한 출력을 할 것이기 때문에 코드도 어렵지 않다. 천천히 따라가면 된다.

 

let name = ["스티브 잡스", "빌 게이츠", "맥아더"]
let age = ["59", "30", "70"]
let city = ["seoul", "paju", "goyang"]

 TableView에 사용하기 위한 사람들을 리스트로 만들어 봤다. 

[iOS/Swift] TableView | Delegate, DataSource 메서드 정리 — Jiwift (tistory.com)

[iOS/Swift] TableView | Delegate, DataSource 메서드 정리

 TableView를 사용하기 위해서는 delegate와 datasource가 있는데 위에 정리된 기능들을 한번 읽어보는 것이 좋다. 외우지는 못하더라도 어떤 게 있는지 알고 있다면 검색하기가 쉬워질 것이다.

 

 일단 쉽게 정리하자면 다음과 같다.

UITableViewDelegate = TableView의 시각적인 부분을 설정하고, 행의 액션 관리, 액세서리 뷰 지원 그리고 테이블 뷰의 개별 행 편집을 도와준다. 필수로 구현해야 하는 메서드는 없다.

UITableViewSource = TableView를 생성하고 수정하는데 필요한 정보를 TableView 객체에 제공한다.

 

myTableView.dataSource = self

 위에 코드에서 보듯이 delegate는 사용하지 않고 datasource만 사용하기 때문에 위와 같이 한 줄을 입력한다. 공부 초기에는 delegate 연결이 생각보다 복잡해 보인다. 근데 계속 꾸준하게 하다 보면 익숙해지니 한 번에 이해 못 해도 괜찮다.

 

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	return
}
    
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	return
}

 역시는 Delegate에서 필요한 메서드를 정의한 부분에다. DataSource Delegate는 필수 메서드가 2개가 있다. 그래서 delegate 등록하고 나면 위 두 개를 꼭 해주어야 한다. 

 

numberOfRowsInSection은 TableView에 표시할 행의 수를 return 한다.

cellForRowAt은 Cell에 표시하기 위한 Cell을 만들어서 return 한다.

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

numberOfRowsInSection은 행의 수를 return 해야 하니 위에서 생성한 사람 이름 count(수) 만큼 return을 해준다.

 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	let cell = myTableView.dequeueReusableCell(withIdentifier: "peopleCell", for: indexPath) as! MyTestTableViewCell
	cell.nameLabel.text = name[indexPath.row]
	cell.ageLabel.text = age[indexPath.row]
	cell.cityLabel.text = city[indexPath.row]
	return cell
}

 cellForRowAt에서는 cell을 먼저 생성한다. tableview IBOutlet과 아까 설정한 cell의 identifier 그리고 cell class가 모두 필요하다. 생성된 cell은 연결된 class안에 생성한 변수들에 접근이 가능하다. 그렇기 때문에 우리가 생성한 Label IBOutlet을 접근할 수 있어서 text를 설정할 수 있다.

 

indexPath.row에서 indexPath는 화면이 그려질 때 행 위치(section, row)를 알려준다. row는 그 주소 중에서 몇 번째 행인지만을 가지고 온다. 이 정보를 사용하여 우리가 생성한 이름, 나이, 사는 곳 Array값을 가지고 와서 Label에 String으로 넘겨주면 된다.

 

그렇게 생성된 cell은 return 한다.

 

위 코드를 실행한 결과이다.

ViewController 전체 모습

numberOfRowsInSetion에 return 값을 임의 숫자로 변경해 표시되는 모습을 보는 것과

cellForRowAt에 “indexPath.row”를 임의 숫자로 입력해서 어떻게 표시되는지 확인을 해보면 기본적인 TableView 출력은 이해할 것으로 판단된다.