IOS) TableVIew의 Pagination을 구현해보자

 

안녕하세요 후르륵짭짭 입니다.

이번에는 TableView에서 Pagination을 구현하는 방법에 대해 설명하려 합니다.

정말 간단한 것 입니다.

 

** ContentOffSet 과 contentSize 란 **

위의 그림을 보면 ContentOffset 과 contentSize에 대해서 쉽게 알 수 있을 겁니다.

contentOffset은 현재 보여지는 ScrollView의 마지막 위치를 의미합니다.

그래서 현재 스크롤 하는것 자체가 contentOffSet에 변화를 주게 됩니다.

 

반면 ContentSize는 TableView난 ScrollView 자체의 크기 입니다.

따라서 위에서 보면 우리가 보여지는 영역을 넘어서 보여지지 않은 View의 전체적인 크기가 

ContentSize라 할 수 있습니다.

 

** 구현하기 **

extension MainViewController : UIScrollViewDelegate {
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        let contentOffset_y = scrollView.contentOffset.y
        let tableViewContentSize = mainTableView.contentSize.height
        let pagination_y = tableViewContentSize * 0.2
        
        if contentOffset_y > tableViewContentSize - pagination_y {
            
            apiViewModel.getfetchData(input_url: input_url) { [weak self](result) in

                
                switch result{
                
                case .success(let jsonData):

                    self?.itemData?.append(contentsOf: newItemData)

                    self?.itemData?.append(contentsOf: newItemData)
                   
                    DispatchQueue.main.async {
                        self?.mainTableView.reloadData()
                        self?.apiViewModel.isPagination = false
                    }
                    
                    
                case .failure(let error):
                    print(error.rawValue)
                 
                    
                }
                
            }
            
        }
        
    }
    
}

일단 Pagination을 사용하기 위해서는 ScrollView 형태로 되어 있어야합니다.

그런데 TableView는 ScrollView를 이미 상속 받고 있기 때문에, UIScrollVIewDelegate를 받아주시면 그에 대응되는 

기능들을 위임받아 사용할 수 있게 됩니다.

 

그런 다음에 ScrollViewDidScroll() 함수를 호출하여 

Scroll 될때마가 함수가 호출 되도록 합니다.

 func scrollViewDidScroll(_ scrollView: UIScrollView) {}

이제 scrollView.contentOffset.y 을 사용해서 현재 스크롤 하고 있는 위치를 찾게 하고 

TableView.contentSize.height

를 사용해서 현재 사용하고 있는 ScrollView의 전체 크기를 가져옵니다.

let contentOffset_y = scrollView.contentOffset.y
let tableViewContentSize = mainTableView.contentSize.height
let pagination_y = tableViewContentSize * 0.2
        
if contentOffset_y > tableViewContentSize - pagination_y {}

그리고 이렇게 특정 위치에 해당할 경우에 원하는 특정 기능을 넣어주면

Pagination을 사용할 수 있게 됩니다.

 

저 같은 경우는 Network 작업을 해서 

apiViewModel.getfetchData(input_url: input_url) { [weak self](result) in

                switch result{
                
                case .success(let jsonData):
				self?.itemData?.append(contentsOf: newItemData)
                    DispatchQueue.main.async {
                        self?.mainTableView.reloadData()
                        self?.apiViewModel.isPagination = false
                    }
                    
                    
                case .failure(let error):
                
                }
                
            }

네트워크 작업이 다 끝나고 나서 기존에 있던 Array에 새로운 데이터를 추가해준 다음에

MainThread에서 tableView를 Reload 하도록 했습니다.

 

어렵지 않지만 많이 사용되는 Pagination을 구현 해봤습니다.

더 추가적인 내용도 있기 때문에 유튜브에서 확인하면 좋을 것 같습니다.

 

참고 사이트 :

www.youtube.com/watch?v=TxH35Iqw89A