[swift] 채팅 UI 구현해보기(2)

[swift] 채팅 UI를 만들어봅시다!(1)

[ 첫 번째 포스팅 참고 ⬆ ]

 

이전 포스팅에서는 셀을 등록하고 확인만 할 수 있게 적용해 봤다면 이번 포스팅에서는

 

(1) 메시지를 주고받을 때, 가장 최근 주고받은 것이 하단에 올 수 있게 적용하는 방법

(2) 메시지를 주고 받을 때, 자동으로 마지막에 주고받은 메시지를 볼 수 있게 스크롤의 위치를 변경하는 방법

 

위의 두가지를 정리하려고 합니다.

 

애플 개발자 문서를 먼저 살펴봅시다.

Apple Developer Documentation

 

 

 

해당 메서드 설명을 보면 Index Path를 통해 식별한 행이

화면의 특정 위치에 있을 때까지 스크롤한다고 나와있습니다.

 

 

간단하게 설명해보면

- IndexPath : 행과 섹션을 넘겨줄수 있는 인덱스 경로입니다.

- ScrollPosition : 스크롤이 끝날 때 테이블의 상대 위치를 식별하는 매개변수로 top, middle, bottom 3가지가 있습니다.

- Animated : 애니메이션 효과를 적용하기 위한 Bool 타입 매개변수 입니다.

 

이 메서드를 다음과 같은 상황에 적용하면 됩니다.

 

1. 메시지를 보낼때 

2. 메세지를 수신할 때 

 

메세지를 수신하는 것을 예시로 작성해보겠습니다.

// 소켓통신을 이용해 수신한 메세지가 있다면 테이블뷰에 추가하고 스크롤
@objc func getMessage(push: NSNotification) {

    '''
    생략
    '''
    
    self.viewModel.chatList.append(chatting)
    self.tableView.reloadData()
    self.tableView.scrollToRow(at: IndexPath(row: self.viewModel.chatList.count - 1, section: 0), at: .bottom, animated: false)
}

이렇게 작성하게 되면 

메세지를 수신하였을 때

IndexPath가 가장 마지막에 들어온 채팅이므로

bottom 옵션으로 인해 해당 인덱스의 하단으로 이동할 수 있게 됩니다.

 

카카오톡 같은 경우에 메시지가 오더라도

바로 마지막 채팅내역으로 내려가지 않는데

마지막 채팅내역이 현재 Visible하다면 내려주고

아니라면 오른쪽 하단에 가장 밑의 셀로 이동시켜주는 버튼을 주는게 아닌가 생각이 드네요.

나중에 구현하게 되면 포스팅 해봐야겠습니다.

 

 

오늘은 여기까지 정리하겠습니다.

그럼 이만 👋🏻 👋🏻 👋🏻