IOS) Pull to Refresh에 대해 알아보자 1부

완성된 모습

헬로우~~

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

이번에 배워 볼 것은 Pull To Refresh에 대해서 알아 볼까 합니다!

Pull To Refresh는 당겼을 때, 새로고침 하는 것을 의미합니다. 

보통 많은 앱에서 위에서 당겼을 때, 뱅뱅 돌면서 나오죠.

그럼 지금 부터 알아 보도록 합시다~~~!!!

** 테이블을 생성하기 **

일단 테이블 뷰나 콜렉션 뷰 처럼 ScrollView 형태의 뷰를 만들어 주세요!

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        //섹션에 따라서 보여주는 갯수를 달리한다.
        if section == 0{
            return infoList.count
        }
        
        return interestList.count
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "TestViewTableViewCell") as! TestViewTableViewCell
        
        //섹션에 따라서 어떻게 할 것인가
        if indexPath.section == 0 {
        
            cell.updateUI(label: infoList[indexPath.row])
            
        }
        else {
            
            cell.updateUI(label: interestList[indexPath.row])
        }
        
        return cell
    }
    
    //MARK : 섹션의 설정
    //섹션의 객수를 몇개로 할 것인가?
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionList.count
    }
    
    //각 섹션의 이름을 어떻게 할 것인가를 알려준다.
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionList[section]
    }

이렇게 섹션과 테이블을 형성 해줍니다.

테이블 생성은 기본적으로 안다 생각하고 넘어가겠습니다!

** RefreshControl 생성 **

IOS에서는 RefreshControl을 지원하고 있습니다.

그래서 아주 쉽게 

 let refreshControll : UIRefreshControl = UIRefreshControl()

이 코드를 넣어주세요!

이렇게 하면 RefreshControl 객체가 생성이 됩니다.

그리고 나서 ViewDidLoad()에 아래 코드를 넣어주세요!

    //MARK : viewDidLoad()에서 부를 기본설정
    func setTableDelegate(){
        self.tableView.dataSource = self
        self.tableView.delegate = self
        
        //IOS10 이후에는 이렇게 refreshControll을 넣어준다.
        tableView.refreshControl = refreshControll
        settingRefreshControl()
    }

IOS10 이후 부터는 tableView에 refreshControl 을 추가 할 수 있도록 지원합니다. 

따라서 아래 처럼 tableView.refreshControl = "우리가 생성한 UIRefreshControl"을 넣어주세요.

이렇게 하면 이제 새로고침 할때, 뱅뱅이가 생길 겁니다.

** RefreshControl 기본 설정 하기 **

저런 상태로 끝마치면 뱅뱅이가 계속 돌고 멈추지 않을 겁니다.

그래서 이제 RefreshControl을 하면 어떤 기능을 넣어줄 것인지 알려줘야합니다.

refreshControll.addTarget(self, action: #selector(self.refreshFunction), for: .valueChanged)

이렇게 refreshControl.addTarget(대상 , 기능 , 방법) 을 ViewDidLoad()에 추가해주세요.

대상은 현재 뷰 클래스에 있는 refreshControl에 적용하는 것이니, Self를 넣어주고 

기능 부분에는 기능을 추가해줄 object-c 형 함수를 추가해주세요.

그리고 방법에는 값 변환을 해주는 valueChanged를 넣어주세요.

    //MARK : refresh할 때 기능을 추가
    @objc func refreshFunction(){
        
            interestList.append("Machine Learning")
            interestList.append("Apple Device")
            interestList.append("NBA")
  

        refreshControll.endRefreshing()
        
        tableView.reloadData()
    }

그리고 이렇게 endRefreshing() 함수를 통해 뱅뱅이를 멈춰추고

tableview를 다시 reload 해주시면 끝납니다!

 

어렵지 않죠???

아주 간단한 겁니다!!!

그럼 2부에서는 RefreshControl을 꾸미는 방법에 대해서 포스팅 하겠습니다.

모두 즐코 하세요!!

** 전체 코드 **

import UIKit

class TestViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    let refreshControll : UIRefreshControl = UIRefreshControl()
    
    var infoList = ["Hururuek-ChapChap", "IOS Devloper", "University Student"]
    var interestList : [String] = []
    var sectionList = ["Info", "Interest"]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        setTableDelegate()
        // Do any additional setup after loading the view.
    }

}

extension TestViewController : UITableViewDataSource , UITableViewDelegate{
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        //섹션에 따라서 보여주는 갯수를 달리한다.
        if section == 0{
            return infoList.count
        }
        
        return interestList.count
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "TestViewTableViewCell") as! TestViewTableViewCell
        
        //섹션에 따라서 어떻게 할 것인가
        if indexPath.section == 0 {
        
            cell.updateUI(label: infoList[indexPath.row])
            
        }
        else {
            
            cell.updateUI(label: interestList[indexPath.row])
        }
        
        return cell
    }
    
    //MARK : 섹션의 설정
    //섹션의 객수를 몇개로 할 것인가?
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionList.count
    }
    
    //각 섹션의 이름을 어떻게 할 것인가를 알려준다.
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionList[section]
    }
    
    //MARK : viewDidLoad()에서 부를 기본설정
    func setTableDelegate(){
        self.tableView.dataSource = self
        self.tableView.delegate = self
        
        //IOS10 이후에는 이렇게 refreshControll을 넣어준다.
        tableView.refreshControl = refreshControll
        settingRefreshControl()
    }
    
    //refreshControll에 기능을 추가해준다.
    func settingRefreshControl(){
        
        //당겨서 새로고침을 할 때, 해줄 함수적 기능을 넣어준다.
        refreshControll.addTarget(self, action: #selector(self.refreshFunction), for: .valueChanged)

    }
    
    //MARK : refresh할 때 기능을 추가
    @objc func refreshFunction(){
        
            interestList.append("Machine Learning")
            interestList.append("Apple Device")
            interestList.append("NBA")
  

        refreshControll.endRefreshing()
        
        tableView.reloadData()
    }
    
}