[ Project ] WishListApp #5 / Pull to Refresh 적용하기 / UIRefreshControl

 

 

오늘은 메인화면과 TableView에 Pull to refresh ( 당겨서 새로고침 ) 를 적용해 보았습니다.

 

UIRefreshControl

 

UIRefreshControl는 Table View와 Collection View가 상속받고 있는 UIScrollView에 연결하는 표준 Control입니다. Content를 새로고침할 수 있는 Control를 제공하는 object입니다. 사용자가 스크롤이 가능한 Content 영역을 아래로 드래그하면 refresh control이 표시되고, progress indicator가 애니메이션화 되어 앱에 알려줍니다. 이 알림을 사용해 content를 업데이트하거나 refresh control을 무시할 수 있습니다.

 

Target-action 메커니즘

UIRefreshControl은 target-action 메커니즘을 사용하여 Content를 업데이트할 수 있는 시기를 알려주는데요! 해당 기능이 활성화되었을 때, @objc로 구성된 selector 함수를 호출하여 Content를 업데이트하고 완료가 되면 endRefreshing()함수를 사용하여 종료합니다.

 

func configureRefreshControl () {
   // Add the refresh control to your UIScrollView object.
   myScrollingView.refreshControl = UIRefreshControl()
   myScrollingView.refreshControl?.addTarget(self, action:
                                      #selector(handleRefreshControl),
                                      for: .valueChanged)
}
    
@objc func handleRefreshControl() {
   // Update your content…


   // Dismiss the refresh control.
   DispatchQueue.main.async {
      self.myScrollingView.refreshControl?.endRefreshing()
   }
}

위는 애플 공식 홈페이지에서 제공된 코드입니다! 위를 참고해서 구현했어요!

 

 

Main 화면에 UIRefreshControl 적용하기

 

먼저 RefreshCotrol을 설정해 줄 ScrollView를 VC과 연결해 줍니다!

@IBOutlet weak var scrollView: UIScrollView!

 

RefreshControl를 설정할 함수를 만들어서 이름과 값이 변화되었을 때, 실행될 함수를 정의해 주었어요!

override func viewDidLoad() {
    super.viewDidLoad()
    
    setRefreshControl()
}


// MARK: - refreshControl

func setRefreshControl() {
    scrollView.refreshControl = UIRefreshControl()
    scrollView.refreshControl?.attributedTitle = NSAttributedString(string: "Pull to refresh")
    scrollView.refreshControl?.addTarget(self,
                                         action: #selector(self.refresh(_:)),
                                         for: .valueChanged)
}

@objc func refresh(_ sender: AnyObject) {
    
    DispatchQueue.main.asyncAfter(deadline: .now()+1){
        self.setRandomID()
        self.setDataAndLabel()
        self.scrollView.refreshControl?.endRefreshing()
    }
}

 

 

새로고침했을 때, 데이터가 변화되기 위해서 randomID를 생성하는 setRandomID 함수를 실행해 주고 해당 data로 다시 UI를 그리는 setDataAndLabel 함수를 실행하여 데이터를 변화시켜 줍니다!

 

이때, 새로고침 상태가 잠시 유지되었으면 해서 ⭐️ asyncAfter(deadline: (시간)) 을 사용하여 시간을 1초 정도 유지시켜 주었어요!

 

 

실행화면

 

 

 

 

 

TableViewController에 UIRefreshControl 적용하기

 

TableViewController에는 자체적으로 tableView가 정의가 되어있기 때문에 VC와 연결을 따로 해주지 않아도 됩니다!

override func viewDidLoad() {
    super.viewDidLoad()
    setRefreshScroll()
}

func setRefreshScroll() {
    tableView.refreshControl = UIRefreshControl()
    tableView.refreshControl?.addTarget(self, action: #selector(refresh(_:)), for: .valueChanged)
}

@objc func refresh(_ sender: AnyObject) {
    DispatchQueue.main.asyncAfter(deadline: .now()+1) {
        self.tableView.refreshControl?.endRefreshing()
        self.tableView.reloadData()
    }
}

 

위와 똑같이 적용해 주었습니다.

TableView에는 따로 attributedTitle를 설정해주지 않았습니다~!

또한 TableView의 데이터를 새롭게 그리기 위해서 tableView.reloadData()를 사용해 주었어요!

 

저는 분명 endRefreshing()을 해주었는데, refresh 애니메이션이 멈추지 않고 반복적으로 돌아가는 오류가 있었습니다.

알고 보니 제가 .valueChanged 대신에 .allEditingEvents를 넣어두었더라구요..ㅎㅎ

• .valueChanged : 사용자가 컨트롤의 값을 변경했을 때 발생 ( UIRefreshControl 에서는 사용자가 화면을 아래로 드래그하는 모션자체가 컨트롤 값이 변화된 것 )
• .allEditingEvent : textField나 다른 입력 폼 요소에서 발생하는 모든 편집 관련 이벤트를 포괄함 ( 애초에 UIRefreshControl과는 관련이 없어서 무한 실행이 되었던 것 ) 즉, 텍스트 편집과 관련된 컨트롤에서 사용자의 입력을 감지할 때 사용

여러분들은 잘 확인하세요!!

 

 

실행화면