[iOS] Custom TableView 만들기

TableView란?

 ios에서 아래로 내리면서 볼 수 있는 목록을 만들 때 사용하는 것이 TableView입니다. 안드로이드의 RecyclerView와 비슷한 개념인 것 같습니다. 목록을 이루고 있는 반복되는 요소를 cell 이라고 하는데, 목록을 스크롤하면 화면에서 사라진 cell들이 재사용되어 화면에 다시 나타나게 됩니다.

 

 셀은 사용자가 커스텀해서 원하는 모양으로 만들어 사용할 수 있습니다. 커스텀 셀을 가진 테이블뷰를 만들어보도록 하겠습니다:)

 

 

1. Storyboard 에 TableView 만들기

단축키 shift + cmd + L 을 눌러 TableView를 가져와 목록을 만들고 싶은 ViewController위에 놓습니다. TableView를 선택하면 우측의 Attributes Inspector 에서 Prototype cells를 1로 만들어줍니다. (단축키 shift + cmd + L 을 눌러 TableViewCell을 끌어다놓아도 됩니다)

 

Prototype cells를 1로 한 것은 cell모양을 한 종류로 만들겠다는 뜻입니다.

 

 

 

2. ViewController에 Delegate, DataSource 설정

스토리보드에서 TableView를 끌어와 아웃렛변수로 추가해줍니다.

viewDidLoad() 함수에 tableView delegate 와 dataSource를 self 로 설정해줍니다.

 

 

3. tableView 함수

viewDidLoad() 함수 아래에 다음 두 함수를 추가해줍니다. 

저는 2번 과정에서 에러가 발생해서 fix를 눌렀더니 요 두 함수가 자동으로 추가되었고 위치만 아래로 내려주었습니다. 

 

 

4. Dummy Data 만들기 

이제 TableView 안에 넣을 임시 데이터가 필요합니다. 위쪽에 간단히 배열로 만들어도 되지만, 저는 객체를 생성해서 배열에 넣어주는 방식으로 해 보겠습니다. 먼저 객체 class를 만들 새로운 파일을 만들어주겠습니다.

Swift File을 선택해서 새 파일을 만들어줍니다.

 

Swift File과 Cocoa Touch의 차이가 궁금해서 알아보니 Swift File은 말그대로 Swift언어를 사용할 수 있는 파일이고 , Cocoa Touch는 생성시 선택하는 UIViewController 등을 클래스가 자동으로 상속하여 이용할 수 있도록 해 주는 Framework라고 합니다.

 

아래와 같은 형태로 클래스를 만들어주었습니다.

간단하게 제목, 내용만 설정했고, 객체 배열로 된 더미데이터도 만들어 주었습니다.

 

 

5. TableViewCell 클래스 만들기

custom cell을 만든다면 cell 안의 각각의 요소를 컨트롤해주기 위해서 TableViewCell 클래스가 필요합니다.

이번에는 Cocoa Touch Class를 선택해서 새 파일을 만들어줍니다.

 

UITableViewCell을 선택하면 자동으로 이를 상속하게 됩니다. 클래스 이름도 잘 설정해줍니다. 저는 CustomTableViewCell으로 바꿔줬습니다.

파일을 만든 후에는 Storyboard에서 꼭 Class를 지정해주어야 합니다. 스토리보드의 Table View를 선택한 후 우측 Identity inspector에서 Class 이름을 입력할 수 있습니다.

여기에 위에서 만든 클래스 이름을 입력해주면 이제 아웃렛변수를 만들 수 있게 됩니다.

 

Storyboard에서 cell의 구성요소를 끌어와 아웃렛 변수를 만들어주었습니다. 저의 경우는 제목과 내용을 코드와 연결해서 제어할 수 있도록 하였습니다.

 

6. Storyboard에서 cell의 Identifier 설정

Storyboard에서 cell을 선택하면 우측에 identifier를 입력할 수 있는 칸이 있습니다. 이것을 꼭 입력해주어야 코드를 작성할 수 있습니다. 저는 한 종류의 셀만 만들 것이기 때문에 그냥 cell이라고 넣어주었습니다.

 

 

7. ViewController에 tableView 함수 구현하기

마지막으로 아까 만들어 두었던 두 개의 tableView 함수를 구현해보겠습니다.

첫 번째 함수는 테이블 뷰의 행의 갯수를 반환하는 함수입니다. 아까 만들었던 더미데이터의 크기를 반환해주었습니다.

 

두 번째 함수는 cell에 실제 데이터 값을 넣어준 후 반환합니다.

아까 입력했던 Identifier인 "cell"을 withIdentifier에 넣어줍니다. 그리고 CustomTableViewCell 클래스를 사용하기 때문에 'as! CustomTableViewCell' 부분을 넣어줍니다.

 

 

결과물은 요렇습니다,,,ㅎㅎ

다음엔 실제 데이터베이스에 데이터를 넣어서 목록으로 보여줄 계획입니다:)

 

 

 

공부하면서 정리한 글이니 잘못된 부분이 있다면 댓글로 알려주세요 ^O^