iOS) UITableView 기본적인 사용 방법

앱 개발 중 자주 사용하는 UITableView의 기본적인 사용법에 대해 알아보자.

 

 

시작!

 

 

먼저 Storyboard에 Table View를 추가한다.

 

 

화면 전체에 TableView를 보여줄 것이기 때문에 Constraints를 전부 0으로 설정했다.

 

 

tableView를 우클릭으로 끌어다 ViewController에 Outlet으로 등록!

 

 

다음으로 tableView에 들어갈 cell을 만들어보자.

 

File - New - File - Cocoa Touch Class  선택!

 

 

Subclass of를 UITableViewCell로 변경

그리고 XIB file을 이용해서 cell을 구성할 것이기 때문에 Also create XIB file 선택 체크 후 생성!

 

그럼 myTableViewCell.swift 와 myTableViewCell.xib 두 개의 파일이 생성된 걸 볼 수 있다.

 

myTableViewCell.xib에서 cell을 구성해보자.

 

간단하게 Label을 넣어주고 중앙에 위치하도록 Constraits를 설정했다.

 

label을 myTableViewCell에 Outlet으로 등록!

 

 

그리고 중요한 부분! 

cell의 Identifier를 설정해 줘야 한다. 꼭 기억해 두자.

 

 

cell은 만들어 주었으니 전에 tableView를 등록해 두었던 ViewController.swift로 돌아가 cell을 사용해 보자.

setupTableView라는 함수를 만들어 그 안에 tableView를 사용하기 위한 작업을 진행해 주었다.

 

 

tableView의 모양과 동작을 관리하는 delegate, tableView를 생성하고 수정하는 dataSource를 채택해 주었다.

 

그리고 위에서 생성한 cell을 등록해 주었다.

nibName에는 파일 이름을 forCellReuseIdentifier에는 위에서 정해준 identifier인 "myCellIdentifier"를 넣어주었다.

 

잊지 말고 viewDidLoad()에서 setupTableView 함수를 호출해주자.

 

 

그럼 delegate, dataSource를 채택해줬으니 사용해보자.

 

 

DataSource를 상속받았더니 에러가 발생한다. UITableViewDataSource의 정의를 보자.

나머지는 다 optional func인데 위에 두 개는 필수로 구현해줘야 하는 메서드이다.

 

에러 메시지 클릭 후 Fix하면 자동으로 추가해준다.

 

 

numberOfRowsInSection은 한 섹션에 들어갈 row의 개수,

cellForRowAt은 특정 row에 들어갈 cell을 설정하는 메서드이다.

 

 

추가로 섹션의 개수를 3개로 정해주자.

numberOfSection 메서드로 section의 개수를 3개로 설정해 주었다.

(참고로 섹션의 개수를 설정해주지 않을 경우 기본값으로 한 개의 섹션을 사용하게 된다.)

 

 

cell에 들어갈 데이터 array도 만들어 주었다.

 

 

다시 DataSource로 와서 필수 메서드 중 numberOfRowsInSection으로 각 섹션에 들어갈 row의 개수를 설정해주자.

numberOfRowsInSection에서 array.count 값을 리턴 받아 각 섹션에 5개의 row가 들어가도록 해주었다.

 

 

cellForRowAt에서 cell을 리턴해주자.

셀을 재사용하기 때문에 dequeueReusableCell을 사용한다. 그리고 dequeueReusablecell이 optional을 반환하기 때문에 if let으로 처리해 주었다.

(dequeueReusableCell은 나중에 자세히 다뤄보자.)

 

변수 cell에는 myCellIdentifier라는 identifier를 가진 cell이 들어가 있고 그 cell의 myLabel을 array에 있는 text로 바꿔주었다. 

그 셀을 리턴 !

 

 

실행해보면 다음과 같이 잘 나온다.

 

 

 

 

그런데 섹션 구분이 안되어있다.

섹션에 헤더를 추가해 구분해주고, cell의 높이를 설정해보자.

 

 

다음과 같은 코드를 추가했다 (설명은 주석 참고)

 

 

실행해보면

 

👍👍

 

---

자주 사용하는 TableView의 기본적인 사용법을 정리해 보았다.