[Udemy iOS & Swift Bootcamp] 채팅 완성하기 1 (발신자/수신자 구분하기)

지금까지 만든 채팅앱에서 부족한 3가지를 채워보자.

 

1. 발신자/수신자 구분하기

2. 최신 메세지(맨 아래)으로 화면 스크롤하기.

3. 상단 네비게이션 바 꾸미기

---

1. 발신자/수신자 구분하기

1) 기존에 만들었던 Cell 에 another user 이미지 추가하기.

왼쪽의 기존 Cell 에 right Image 를 복사해서 왼쪽에 붙여넣고 You 이미지로 바꿔준다.

채팅 메세지가 본인이면 Me, 상대방이면 You 이미지를 보여주게 할 것이다.

 

2) MessageCell 스크립트에 leftImageView 객체 추가하기.

이미지 객체를 상황에 맞게 다룰 수 있도록 객체로 추가해주자.

 

3) ChatViewController 클래스에 코드 추가하기

extension ChatViewController: UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return messages.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let message = messages[indexPath.row]
        
        let cell = tableView.dequeueReusableCell(withIdentifier: K.cellIdentifier, for: indexPath)
            as! MessageCell
        cell.label.text = messages[indexPath.row].body
        
        //This is a message from the current user.
        if message.sender == Auth.auth().currentUser?.email {
            cell.leftImageView.isHidden = true
            cell.rightImageView.isHidden = false
            cell.messageBubble.backgroundColor = UIColor(named: K.BrandColors.lightPurple)
            cell.label.textColor = UIColor(named: K.BrandColors.purple)
        }
        //This is a message from the another user.
        else {
            cell.leftImageView.isHidden = false
            cell.rightImageView.isHidden = true
            cell.messageBubble.backgroundColor = UIColor(named: K.BrandColors.purple)
            cell.label.textColor = UIColor(named: K.BrandColors.lightPurple)
        }
        return cell
    }
}

Auth.auth().currentUser?.email 구문을 이용해서 현재 message sender 가 본인이면 rightImage를 보여주고 말풍선 색깔을 밝은 보라색, 글자색을 보라색으로 표현해준다.

 

상대방의 메세지라면 leftImage를 보여주고 말풍선 색깔을 보라색, 글자색을 보라색으로 표현해줘서 본인과 상대방의 말풍선을 구별해준다.

 

4) 결과화면

계정을 하나 더 만들어서 접속해서 채팅을 보내보면 잘 구분되는 것을 확인할 수 있다.