iOS/Swift 어플 따라하기

[Swift] 새 메시지 보낼 때, 받을 때마다 아래에 배치하기

Chafle 2022. 9. 7. 20:06
반응형

2. 메시지 작성 시 최근 메시지를 계속 아래로 내리기

 

loadmessage 메서드에서

 

   let indexPath = IndexPath(row: <#T##Int#>, section: <#T##Int#>)
self.tableView.scrollToRow(at: <#T##IndexPath#>, at: <#T##UITableView.ScrollPosition#>, animated: <#T##Bool#>)

 

scrollToRow를 작성해주면 된다.

 

  let indexPath = IndexPath(row: self.messages.count - 1, section: 0)

 

messages가 array type이므로 -1을 해줬고

section도 마찬가지로 1개의 섹션이면 0부터 시작하기 때문에 0으로 설정

 

self.tableView.scrollToRow(at: indexPath, at: .top, animated: true)

위에서 설정한 indexPath를 scrollToRow에 입력하고

at은 해당 행을 맨 위에 배치 한다

animated 은 스크롤하는 애니메이션은 true로 설정한다. (스크롤 되는 애니메이션을 보이게 할 것이냐 말 것이냐)

 

 

func loadMessages() { // firestore 시작하기 -> 데이터 읽기
        // messages = [] -> 중복데이터 삽입 안되게 클로저 내부에서 비우겠다 -> goto43오ㅘ     
        db.collection(K.FStore.collectionName).order(by: K.FStore.dateField).addSnapshotListener { (querySnapshot, error) in
            self.messages = []
            if let e = error {
                print("There was an issue retrieving data from Firestore. \(e)")
            } else {
                if let snapshotDocuments = querySnapshot?.documents {
                    for doc in snapshotDocuments { // 여기까지는 firebase데이터 읽기와 동일
                        let data = doc.data()
                        if let messageSender = data[K.FStore.senderField] as? String, let messageBody = data[K.FStore.bodyField] as? String {
                            let newMessage = Message(sender: messageSender, body: messageBody)
                            self.messages.append(newMessage)
                            DispatchQueue.main.async { // 인터페이스를 조작하려고 할 때마다(tableView를 업데이트하려고 하고 클로저 내부에 있는 경우 main queue에 홀드 시키는 습관 가지자
                                self.tableView.reloadData() // tableview를 탭하고 데이터 소스를 트리거할 수 있다는 것
                                let indexPath = IndexPath(row: self.messages.count - 1, section: 0)
                                self.tableView.scrollToRow(at: indexPath, at: .top, animated: true)
                            }
                        }
                    }
                }
            }
        }
    }

 

 

전체 코드를 보면 이렇다.

 

 

반응형