[Udemy iOS & Swift Bootcamp] Table View(DataSource, Delegate)

 

채팅 창에서 채팅 리스트를 출력하기 위해 Table View 를 사용해보자.

Table View는 데이터를 뿌릴 DataSource와 리스트에 이벤트를 부여할 Delegate 프로토콜이 필요하다.

 

1) DataSource extension: table view에 index에 맞춰 데이터를 뿌리기 위함

2) Delegate extension: table view 리스트의 index에서 각각에 이벤트를 부여하기 위함

---

1. Table View 추가

View 에 Table View 를 추가하고 코드상에서 연결한다.

 

2. table view 의 dataSource 에 self 데이터를 부여해준다.

IBOutlet 으로 UITableView를 연결해준다.

또한, viewDidLoad() 함수 내에서 뷰가 로드된 후에 ChatViewController 클래스에서 데이터를 요청할 수 있도록 tableView.dataSource = self 를 선언해줬다.

 

3. DataSource extension 구현하기

UITableViewDataSource 프로토콜을 확장하여 구현해준다.

 

이 때 사용한 함수들은 아래와 같다.

 

//행의 개수를 반환하는 함수

 func tableView(UITableView, numberOfRowsInSection: Int) -> Int

 

//재사용 가능한 table view cell을 생성하여 반환하는 함수

 func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell

이 함수는 dequeueReusableCell(withIdentifier: String, for: IndexPath) 함수와 함께 사용한다.

 

사용 예시 코드는 아래와 같다.

numberOfRowsInSection 에서 Message 배열 길이가 3이므로 3을 반환하고

indexPath.row 가 0, 1, 2 를 반환하므로 3개의 cell 텍스트에 message[0].body, message[1].body, message[2].body 값을 넣어진다.

 

4. Delegate extension 구현하기

Delegate 프로토콜을 구현할 때도 우선 tableView.delegate 를 self 로 초기화해줘야한다.

 

그리고 UITableViewDelegate 프로토콜을 구현해준다.

본 프로젝트에서는 didSelecRowAt 인자가 있는 함수를 사용한다. 이 함수는 행이 선택되었을 때 특정 동작을 수행하도록 구현할 수 있다.

위 코드는 클릭한 행의 index 값을 print 하라는 구문을 출력하게 한 모습이다.

 

5. Cell 객체 만들기

View 폴더에서 Cocoa touch 클래스를 만들어준다.

Cell 객체 구조를 만들 것이므로 클래스 이름은 MessageCell 이라고 하자.

이 때, 서브클래스는 UITableViewCell 로 선언한다.

디자인 파일도 함께 생성하기 위해 Also create XIB file 을 체크해준다.

 

생성하면 위와 같이 2개의 파일이 생성된다.

 

UITableViewCell 을 상속 받은 cocoa touch 클래스(MessageCell.swift)를 처음 생성하면 위와 같은 코드가 적혀있따.

awakeFromNib() 함수는 초기화 함수라고 생각하면 쉽다.

setSelected() 함수는 cell 이 선택되었을 때 특정 행위를 구현하는 함수이다.

 

MessageCell.xib 디자인 파일은 위와 같이 생성된다.

 

요 Cell 을 위와 같이 꾸며보자.

 

MessageCell 클래스를 열어서 UIView, UILabel, UIImageView 를 코드와 연결해준다.

 

ChatViewController 클래스의 viewDidLoad() 함수에서 table view 에 MessageCell 을 등록하는 코드를 추가한다.

nibName에는 MessageCell.swift 파일명을 넣으면 된다. 나는 K 문자열 상수에 등록된 cellNibName(MessageCell) 을 이용하여 연결해줬다.

forCellReuseIdentifier에는 Table View Cell 의 Identifier 를 넣으면 되는데, K 문자열 상수에 cellIdentifier(ReusableCell) 로  등록하여 사용하였다.

 

DataSource에서 cell 을 생성할 때 방금 만든 MessageCell로 사용해주기.

Before

After

UITableViewDataSource 프로토콜의 extension 에서 cell을 만들어서 사용했는데,

이때의 cell을 MessageCell 클래스로 사용하는 방법이다.

기존 코드에서 as! MessageCell 을 추가해주면 된다.

또한 cell.textLabel -> cell.label 로 바꿔준다.

 

Before -> After

기존에 사용하던 Main.storyboard에 있는 ReusableCell 은 삭제해준다.

 

[결과화면]

 

참고로 셀을 클릭했을 때 회색 처리 되는 것을 제거 하고 싶다면, Interation 탭의 User Interation Enabled 체크박스를 해제하면 된다.

 

6. Cell 둥근 모서리 처리, 글자수 길어질 때 짤리지 않게 처리

awakeFromNib() 함수는 초기화 함수인데, messageBubble.layer.cornerRadius 에 특정 값을 주면 모서리를 둥글게 처리할 수 있다.

위 코드는 messabeBubble의 frame 길이를 구해서 5로 나눈 값을 cornerRadius 값으로 부여한 모습이다.

채팅 줄이 길어질 수록 그에 맞춰 radius 값을 부여해줘야 하기 때문.

 

 둥글게 처리된 모습!

 

추가적으로 텍스트 길이가 길어질 때 짤림처리를 막기 위해서는 Label의  Lines 속성을 0으로 주면 된다.

크기를 늘리면 더 각이 커지고, 크기를 줄이면 각이 더 작아진다.