iOS - UITableView, UITableViewCell 테이블뷰 만들기

UITableView는 여러 아이템을 테이블(리스트) 형태로 보여주기 위한 뷰입니다. 컬럼은 여러 개를 갖지 않고 한 가지만 가집니다. 대신 데이터를 여러 행으로 표시할 수 있게 됩니다. 각 데이터들은 TableViewCell을 통해서 표현이 됩니다.

Recycle Cell

테이블 뷰는 Cell을 재사용합니다. 예를 들어서 30개의 데이터가 있고 이걸 리스트로 보여주려고 합니다. 하지만 디자인된 Cell은 화면에 5개 정도만 표시가 된다고 해봅시다. 만약 모든 데이터에 맞게 셀을 생성하게 되면 낭비가 됩니다. 즉 실제로 보이는 셀은 한정적이기 때문에 모든 데이터를 위해서 TableViewCell을 만들지는 않습니다. 화면에 보이는 셀을 만들고 재활용해서 사용하게 됩니다. 따라서 스크롤을 하게 되면 새로운 데이터는 앞에서 사용한 셀을 재사용하여 표시가 됩니다.

Table View, Cell 추가하기

메인 스토리보드에 Table View와, Table View Cell을 추가해 줍니다.

추가한 테이블 뷰와 셀을 적당한 크기로 맞춰줍니다. 이제 ViewController로 돌아가서 테이블 뷰를 사용할 수 있게 해주어야 합니다. 테이블 뷰를 사용하기 위해서는 UITableViewDataSource와, UITableViewDelegate protocol을 사용해야 합니다.

protocol 이란?

프로토콜의 뜻은 규약이라는 뜻인데요. 쉽게 생각하면 서비스를 사용하기 위해서 해야 할 일을 뜻합니다. 무슨 뜻이냐면 프로토콜은 인터페이스 역할입니다. 프로토콜에는 프로퍼티와 메서드를 정의할 수 있습니다. 프로토콜은 추상 클래스와 비슷하다고 생각하셔도 됩니다. 사진에서 볼 수 있듯이UITableViewDataSource에 메서드들이 정의되어있습니다. 프로토콜을 사용하기 위해서는 해당 메서드를 구현해주어야 합니다.

Swift - Struct(구조체) vs. Class(클래스) 비교하기

Swift - Struct(구조체) vs. Class(클래스) 비교하기

Swift의 Object인 구조체와 클래스에 대해서 알아봤습니다. 구조체와 클래스 모두 관계가 있는 데이터를 묶어서 표현할 때 사용됩니다. 이것을 표현하면 프로퍼티와 메서드로 표현할 수 있습니다.

minmong.tistory.com

프로토콜을 사용하는 방법은 클래스 상속과 유사합니다. 앞에서 프로토콜을 규약이며 인터페이스라고 하였죠? 추가한 프로토콜이 요구하는 일을 하지 않으면 에러가 발생하게 됩니다. 프로토콜에 optional이 붙어있지 않은 함수를 반드시 구현해주어야 합니다.

ViewController유형이 'UITableViewDataSource'프로토콜을 준수하지 않습니다. 프로토콜 스텁을 추가하시겠습니까? Fix를 누르게 되면 필수적으로 구현해주어야 하는 메서드들이 바로 만들어지게 됩니다.

UITableViewDataSource 프로토콜에 보면 인터페이스 메서드가 있습니다. 해당 부분을 구현해주지 않아서 에러가 발생했던 겁니다.

만들어진 프로토콜 인터페이스 메서드입니다. 위의 함수가 테이블 뷰의 셀 개수 표시, 아래가 테이블 뷰에 있는 보여줄 셀을 찾는 부분입니다. dequeueReusableCell은 애플 문서에 보면 지정된 재사용 식별자에 대해 재사용 가능한 테이블 뷰 셀 객체를 반환하고 테이블에 추가합니다. 라고 되어있습니다. 앞에서 테이블 뷰는 셀을 재사용한다고 했었죠? 그 부분에 해당하는 기능입니다. withIdentifier는 재사용할 셀을 찾아줄 수 있도록 해줍니다. for는 IndexPath를 요구하고 있네요. 이제 다시 스토리 보드로 가서 세팅을 해줍시다.

Table View 사용하기

추가한 Table View Cell의 Identifier를 지정해줍시다. 앞에 코드에서 "cell"로 파라미터 값을 넘겨주었죠 똑같이 지정해 줍시다.

추가로 Table View에서 테이블 뷰가 동작할 수 있도록 대리자를 위임해줍니다.

이제 시뮬레이터를 실행해 봅시다. 비어있는 테이블 뷰가 짜잔 나오네요! 테이블 뷰에 아무것도 나오지 않기 때문에 제대로 셀이 연결이 되었는지 확인이 안 되네요. 테이블 셀에 줄 번호가 표시되도록 해보겠습니다.

셀의 개수를 4로 변경하고 셀을 찾아서 숫자를 붙여주도록 해보겠습니다. UITableViewCell에 textLabel이 있습니다. 해당 값에 테이블의 row(열)값을 지정 후 실행해보겠습니다.

짜잔, 테이블 셀에 번호가 생기면서 우리가 원하는 모습을 확인했습니다. 이제 테이블 셀을 누르면 동작을 시켜보겠습니다. 클릭하게 되면 해당 row값을 print 해보려고 합니다. UITableViewDelegate에는 optional로 되어있기 때문에 구현하지 않아도 에러가 발생하지 않았습니다. 프로토콜 인터페이스를 구현하여서 클릭을 받을 수 있도록 해봅시다.