[Swift] RxSwift 스크롤 뷰 무한 스크롤링(Infinite Scroll)

아이폰 앱을 만들면 무한 스크롤을 구현해야 하는 경우가 있습니다. 주로 서버에서 보내온 데이터가 페이징 처리가 되있는 경우에 무한 스크롤을 구현합니다. 더보기 버튼을 만들어서 구현할 수 도 있지만 더 보기 버튼 보다는 무한 스크롤로 테이블 뷰를 구현하는 것이 더 자연스럽습니다. 지금 부터 무한 스크롤을 위해서 필요한 것들과 방법에 대해서 알아보겠습니다.

 

ViewModel 코드 (데이터 정의)

▼ 우선 통신하는 부분을 보겠습니다. 코드가 길어서 복잡해보이겠지만 단순합니다. totalPage, currentPage, isLoading 변수를 선언해줍니다. 데이터 통신이 끝나면 테이블 뷰 데이터에 기존 데이터를 포함해서 appendData를 해줍니다. 또한 통신이 시작하기 전에 isLoading 값을 true로 변경해줍니다. 그리고 통신이 끝난 시점에 isLoading을 false값으로 변경해줍니다. 통신하는 부분은 저와 다를 수 있지만 핵심은 다음 변수 들입니다.

• totalPage : 전체 페이지 수 (서버에서 받은 값)
• currentPage : 현재 로드된 페이지 값
• isLoading : 현재 통신 중인지 확인하는 Boolean 값

 

▼ 통신을 시작하기 전에 다음과 같이 totalPage와 currentPage 가 같다면 더 이상 진행을 하지 않습니다.

 

 

▼ 위에 코드중에 totalPage, currentPage 값을 설정하는 부분만 보겠습니다. 서버에서 받은 totalPage 값이 currentPage와 같지 않는 다면 새로운 페이지 값을 적용해줍니다.

 

 

ViewController 코드 (UI 정의)

▼ 이제 뷰컨트롤러에서 테이블 뷰를 바인딩해줍니다. 저는 RxCocoa를 사용해서 바인딩 했는데 일반적인 테이블 뷰 델리게이터를 사용해서 구현해도 됩니다.

 

 

▼ 다음과 같이 viewDidLoad나 초기화 하는 부분에서 delegate = self를 해서 적용해줍니다. 그리고 최초에 한 번 통신을 시작합니다.

 

 

▼ 이제 UIScrollViewDelegate 델리게이터의 scrollViewDidScroll 핸들러를 구현해줍니다. 이는 테이블 뷰 컨트롤러 델리게이트가 이미 UIScrollViewDelegate를 구현하고 있기 때문에 다음과 같이 구현하면 동작되는 것을 볼 수 있습니다. 이제 viewModel에서 isLoading 값을 가져와 값이 false라면 화면이 끝에 닿을 때에 해당 통신을 추가적으로 실행하게 됩니다.

 

▼ 위의 코드에서 다음 부분은 스크롤 뷰의 끝에 닿았을 때를 계산해줍니다. 만약 isLoading 값으로 확인하지 않으면 통신을 연속으로 호출 할 수 있으니 주의하시길 바랍니다.