[iOS] CollectionView, TableView Pagination

🤔 CollectionView와 TableView에서 Pagination(스크롤을 이용한 페이징)하는 방법은 어떤 것이 있을까?
일반적으로 ContentOffSet와 ContentSize을 계산하는 것을 통해 Pagination 기능을 구현한다.
그래서 ContentOffSet와 ContentSize을 알아보고 CollectionView에 Pagination을 적용해보자.

ContentOffSet

공식문서) ContentsView의 origin이 scrollView의 origin에서 offset(상쇄)되는 point를 말한다. 😅 아무리 읽어도 무슨 뜻인지 모르겠다.

일단 ContentOffSet은 scrollView Bounds의 Origin Point이다.
때문에 scroll을 하면 Bounds의 Origin Point가 변경되고 ContentOffSet이 변경된다.

😎 ContentOffSet은 현재 화면에 보여지는 좌측 상단의 point를 말한다.
아래 그림처럼

ContentSize

공식문서) Content View의 크기

Scroll View의 모든 Content가 들어있는 영역을 말한다.

💡Table View, Collection View는 Scroll View를 상속받고 있다는 것을 기억하자.

Collection View에 pagination 기능 구현하기

1️⃣ 우선 scroll을 하면 자동으로 호출될 수 있도록 UICollectionViewDelegate을 채택한다.

class MainViewController: UICollectionViewDelegate {
// some code    
}

2️⃣ scrollViewDidScroll 메서드를 구현해준다.
scrollViewDidScroll는 UIScrollViewDelegate 프로토콜에 명시된 메서드이다.
UICollectionViewDelegate는 UIScrollViewDelegate을 채택하고 있다.
따라서 UICollectionViewDelegate를 채택함으로써 scrollViewDidScroll 메서드를 사용할 수 있다.
scrollViewDidScroll를 통해 scroll을 하면 이벤트를 delegate에게 알린다.

class MainViewController: UICollectionViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // some code
    } 
}

3️⃣ ContentOffSet, ContentSize을 계산하여 원하는 곳에서 pagination될 수 있도록 한다.
만약 ContentOffSet이 ContentSize의 50%를 지날때 그 다음 페이지로 pagination한다고 가정한다면 아래와 같이 구현할 수 있다.

class MainViewController: UICollectionViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // contentOffset.y(scroll view bounds origin y) 
        // 즉 현재 보여지는 화면의 좌측상단!
        let contentOffsetY = scrollView.contentOffset.y
        
        // collectionView의 
        // content size(화면에 보이지 않는 모든 collectionView영역을 포함하는 size)
        let collectionViewContentSizeY = self.collectionView.contentSize.height
        
        // pagination을 하고 싶은 y 좌표는 collectionView의 content size의 0.5 지점!!!
        let paginationY = collectionViewContentSizeY * 0.5
        
        // contentOffsetY가 
        // 전체 CollectionView의 contentSizeY의 반을 넘어가면 
        // if 문 내부 코드 실행!!
        if contentOffsetY > collectionViewContentSizeY - paginationY {
            // 서버에서 다음 페이지 GET
          apiProvider.getData(url) { data in 
              //some code
          }
        }
    } 
}