[Swift] Refresh Control (당겨서 새로고침)

TableView를 이용해서 구현해보게씸더.

xib를 이용해서 테이블뷰 하나를 만들어줍니다. (원래 만들던 방식으로..!)

거기서

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
    
    var dataList : [String] = ["가","나","다","라","마"]
    
    let refreshControl = UIRefreshControl()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        registerXib()
        assignDelegate()
        initRefresh()
    }
    
    func initRefresh() {
        refreshControl.addTarget(self, action: #selector(refreshTable(refresh:)), for: .valueChanged)
        
        refreshControl.backgroundColor = .yellow
        refreshControl.tintColor = .purple
        refreshControl.attributedTitle = NSAttributedString(string: "당겨서 새로고침")
        
        tableView.refreshControl = refreshControl
    }
    
    @objc func refreshTable(refresh: UIRefreshControl) {
        print("새로고침 시작")
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            self.tableView.reloadData()
            refresh.endRefreshing()
        }
    }
    private func registerXib() {
        let nibName = UINib(nibName: "TableViewCell", bundle: nil)
        tableView.register(nibName, forCellReuseIdentifier: "TableViewCell")
    }
    
    private func assignDelegate() {
        tableView.delegate = self
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDelegate {
    
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let tableCell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.identifier) as? TableViewCell else {return UITableViewCell()}
        
        tableCell.setData(title: dataList[indexPath.row])
        
        return tableCell
    }
}

우선 이게 전체 코드이고 하나하나씩 뜯어 볼게요 ..! (위 코드는 뷰컨 코드입니다!)

let refreshControl = UIRefreshControl()

UIRefreshControl 인스턴스를 하나 생성해줍니다.

 func initRefresh() {
        refreshControl.addTarget(self, action: #selector(refreshTable(refresh:)), for: .valueChanged)
        
        refreshControl.backgroundColor = .yellow
        refreshControl.tintColor = .purple
        refreshControl.attributedTitle = NSAttributedString(string: "당겨서 새로고침")
        
        tableView.refreshControl = refreshControl
    }

처음 생성해준 refresgControl이 값이 바뀔 때, 동작할 때 (valueChanged) : 어떤 함수가 동작할지 #selector 안에 넣어줘서

addTarget을 매칭해준다. 

그리고 이렇게 타겟 지정된 refreshControl 을 tableView의 refrehControl 지정한다.

 @objc func refreshTable(refresh: UIRefreshControl) {
        print("새로고침 시작")
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            self.tableView.reloadData()
            refresh.endRefreshing()
        }
    }

refreshControl이 동작했을 때, 어떤 함수가 실행될지에 대한 부분이다.

해당 DispatchQueue를 통해 현재로부터 새로고침을 중단하는 부분이다.

실제 프로젝트라면 딜레이가 걸리는 동안 서버 통신을 진행하고, 서버에서 받아온 데이터를 바탕으로

table을 다시 그려주면,, ! (예시로 1초만 걸어둠)

   override func viewDidLoad() {
        super.viewDidLoad()
        registerXib()
        assignDelegate()
        initRefresh()
    }

initRefresh() 함수를 viewDidLoad() 에서 호출 ! 

 

추가적으로 알게된 점 : 

refreshControl 커스텀이 가능하다는 점? 

backgroundColor 통해 배경색, tintColor 통해 refreshControl의 색을 attributedTitle을 통해 텍스트를 넣어서 변경 가능 !

또한 기본형태가 아니라 애니메이션이나 모양을 추가할 수 있다 ! (앞에서 다뤘던 Lottie)